MVP Marketplace

Colors

  • Page background

    Class suffix:
      Color:
      • Panels background

        Class suffix:
          Color:
          • Frames

            Class suffix:
              Color:
              • Text

                Class suffix:
                  Color:
                  • Interactive elements

                    Class suffix:
                      Color:
                      • Danger

                        Class suffix:
                          Color:
                          • Confirmation

                            Class suffix:
                              Color:
                              • Warning

                                Class suffix:
                                  Color:

                                  Icons

                                  {% render 'theme/simple/ui/icon', icon: 'plus' %}

                                  Images

                                  Logo

                                  {% render 'theme/simple/ui/logo' %}
                                  MVP Marketplace

                                  Picture placeholder

                                  {% render 'theme/simple/ui/picture-placeholder' %}

                                  Typography

                                  Text content

                                  Color:
                                  Font:
                                  Size:
                                  Font Weight:
                                  Line height:

                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum luctus magna quis ex suscipit pharetra. Phasellus eleifend nisi sit amet risus imperdiet commodo. Suspendisse eu vestibulum mauris. Donec lacinia risus urna, tincidunt pretium lorem tincidunt nec. In in enim quis nibh feugiat imperdiet quis quis velit.

                                  Nunc tortor purus, egestas ac tristique non, fringilla in ipsum. Pellentesque in auctor turpis, ac vestibulum nisl.

                                  Page title

                                  Class:
                                  Color:
                                  Font:
                                  Size:
                                  Font Weight:
                                  Line height:

                                  Example page title

                                  Big titles

                                  Class:
                                  Color:
                                  Font:
                                  Size:
                                  Font Weight:
                                  Line height:

                                  Example title

                                  Titles

                                  Class:
                                  Color:
                                  Font:
                                  Size:
                                  Font Weight:
                                  Line height:

                                  Example title

                                  Subtitles

                                  Class:
                                  Color:
                                  Font:
                                  Size:
                                  Font Weight:
                                  Line height:

                                  Example subtitle

                                  Sidenotes

                                  Class:
                                  sidenote
                                  Color:
                                  Font:
                                  Size:
                                  Font Weight:
                                  Line height:
                                  Example sidenote

                                  Text formatting

                                  Prices

                                  {% render 'theme/simple/price', amount_cents: 553344, currency: context.constants.CURRENCY %}
                                  $5,533.44

                                  Dates

                                  {{ '2021-02-20T11:06:37.718Z' | l: 'compact' }}
                                  Feb 20 2021 at 11:06

                                  Text content

                                  Class:
                                  prose

                                  Heading 1

                                  Heading 2

                                  Heading 3

                                  Heading 4

                                  Heading 5
                                  Heading 6
                                  Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptate, totam expedita facilis in velit, et quasi ut non, ipsum modi tempora ipsa error maiores rem adipisci. Soluta, ut quibusdam? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur harum tenetur velit explicabo pariatur debitis quasi soluta quam alias in porro, nulla illo iusto excepturi adipisci vel ex aut incidunt!

                                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, odio possimus. Dolorem odit eum doloribus. Explicabo aspernatur ducimus accusantium repellendus voluptas nemo illum cum? Possimus tenetur esse veritatis temporibus laboriosam.

                                  • UL List item
                                  • UL List item
                                  • UL List item

                                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, odio possimus. Dolorem odit eum doloribus. Explicabo aspernatur ducimus accusantium repellendus voluptas nemo illum cum? Possimus tenetur esse veritatis temporibus laboriosam.

                                  1. OL List item
                                  2. OL List item
                                  3. OL List item
                                  function highlight() {
                                    let x = document.querySelectorAll("pre > code");
                                    return x.highlight();
                                  }
                                  ID Name Date
                                  1 Template 2021-09-27
                                  2 Community 2021-09-27
                                  Person Person

                                  Links and buttons

                                  Links

                                  Color:
                                  Sample link

                                  Buttons

                                  Class:
                                  button
                                  Modifiers:
                                  button-disabled button-small
                                  Link
                                  Link button

                                  Secondary buttons

                                  Class:
                                  button button-secondary
                                  Modifiers:
                                  button-disabled button-small
                                  Link

                                  Danger buttons

                                  Class:
                                  button button-danger
                                  Modifiers:
                                  button-disabled button-small
                                  Link

                                  Small buttons

                                  Class:
                                  button button-small
                                  Modifiers:
                                  button-disabled
                                  Link

                                  Small secondary buttons

                                  Class:
                                  button button-secondary button-small
                                  Modifiers:
                                  button-disabled
                                  Link

                                  Compact buttons

                                  Class:
                                  button button-compact
                                  Modifiers:
                                  button-disabled button-secondary

                                  Forms

                                  Checkboxes

                                  Radios

                                  Text inputs

                                  Modifiers:
                                  form-input-small

                                  Small text inputs

                                  Class:
                                  form-input-small

                                  Selects

                                  Multiple Select

                                  <div>
                                    <select multiple >
                                      <option>A</option>
                                      <option>B</option>
                                      <option>C</option>
                                      <option>D</option>
                                    </select>
                                    {% render 'theme/simple/ui/select_multiple', class: 'w-full' %}
                                  </div>
                                              

                                  Form tip

                                  {% render 'theme/simple/ui/form-tip', content: 'Lorem ipsum dolor sit amet…' %}
                                  {% render 'theme/simple/ui/form-tip', content_key: 'app.translation.test' %}
                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis faucibus eros eget velit tristique, sit amet facilisis nulla viverra.

                                  Forms playground

                                  Boxes

                                  Card

                                  Class:
                                  card
                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ex orci, molestie vitae dolor pretium, tristique fringilla dui. Phasellus luctus at sapien eget ornare. Maecenas faucibus condimentum lacinia. Quisque blandit iaculis commodo. Cras in congue massa, nec auctor ante. Morbi fermentum quam ut ante volutpat convallis.

                                  Large card

                                  Class:
                                  card-lg
                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ex orci, molestie vitae dolor pretium, tristique fringilla dui. Phasellus luctus at sapien eget ornare. Maecenas faucibus condimentum lacinia. Quisque blandit iaculis commodo. Cras in congue massa, nec auctor ante. Morbi fermentum quam ut ante volutpat convallis.

                                  Card overlay

                                  Class:
                                  card-overlay
                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ex orci, molestie vitae dolor pretium, tristique fringilla dui. Phasellus luctus at sapien eget ornare. Maecenas faucibus condimentum lacinia. Quisque blandit iaculis commodo. Cras in congue massa, nec auctor ante. Morbi fermentum quam ut ante volutpat convallis.
                                  Loading…

                                  Tables

                                  Standard

                                  <div class="table"> <header> <div>Column 1</div> <div>Column 2</div> <div class="text-end">Column 3</div> </header> <div class="table-content"> <ul> <li>Content 1</li> <li>Content 1</li> <li class="text-end">Number</li> </ul> <ul> <li>Content 2</li> <li>Content 2</li> <li class="text-end">Number</li> </ul> </div> </div>
                                  Column 1
                                  Column 2
                                  Column 3
                                  • Content 1
                                  • Content 1
                                  • Number
                                  • Content 2
                                  • Content 2
                                  • Number

                                  Simple

                                  <div class="table"> <header> <div>Column 1</div> <div>Column 2</div> <div class="text-end">Column 3</div> </header> <div class="table-content-simple"> <ul> <li>Content 1</li> <li>Content 1</li> <li class="text-end">Number</li> </ul> <ul> <li>Content 2</li> <li>Content 2</li> <li class="text-end">Number</li> </ul> </div> </div>
                                  Column 1
                                  Column 2
                                  Column 3
                                  • Content 1
                                  • Content 1
                                  • Number
                                  • Content 2
                                  • Content 2
                                  • Number