Marketplace Template

Colors

  • Page background

    Class suffix:
      Color:
      • Panels background

        Class suffix:
          Color:
          • Frames

            Class suffix:
              Color:
              • Text

                Class suffix:
                  Color:
                  • Interactive elements

                    Class suffix:
                      Color:
                      • Alternative (colorful) elements

                        Class suffix:
                          Color:
                          • Danger

                            Class suffix:
                              Color:
                              • Confirmation

                                Class suffix:
                                  Color:
                                  • Warning

                                    Class suffix:
                                      Color:

                                      Icons

                                      {% theme_render_rc 'ui/icon', icon: 'plus' %}

                                      Images

                                      Logo

                                      {% render 'theme/simple/ui/logo', context: context %}
                                      Marketplace Template

                                      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', context.timezone }}
                                      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 2024-05-23
                                      2 Community 2024-05-23
                                      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

                                      Color input

                                      
                                      {% render "theme/simple/ui/color_input",
                                          class: "w-full",
                                          name: "color-primary",
                                          value: "#ff6600",
                                          is_hex: true,
                                          text_input_enabled: true %}
                                                

                                      Text inputs

                                      Modifiers:
                                      form-input-small

                                      Small text inputs

                                      Class:
                                      form-input-small

                                      Password inputs

                                      {% render 'theme/simple/ui/password',
                                        name: 'testPassword',
                                        id: 'testPassword',
                                        value: '',
                                        meter: true
                                      %}
                                      

                                      Selects

                                      Multiselect

                                      [ { value: 'value1', label: 'Label for value 1' }, { value: 'value2', label: 'Label for value 2' } ]
                                      {% render 'theme/simple/ui/multiselect', list: example_list, form: 'example-form', name: 'multiselect-example', combineSelected: true, showFilter: true %}
                                      • There are no items for given filter, please rephrase.
                                      Select
                                      • There are no items for given filter, please rephrase.
                                      Select
                                      • There are no items for given filter, please rephrase.
                                      Select
                                      • There are no items for given filter, please rephrase.

                                      Multiple Select (deprecated)

                                      <div>
                                        <select multiple class="hidden">
                                          <option>A</option>
                                          <option>B</option>
                                          <option>C</option>
                                          <option>D</option>
                                        </select>
                                        {% render 'theme/simple/uiltiple', 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