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.

OL List item
OL List item
OL List item

function highlight() {
  let x = document.querySelectorAll("pre > code");
  return x.highlight();
}

ID	Name	Date
1	Template	2024-04-25
2	Community	2024-04-25

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

Test checkbox

Disabled checkbox

Disabled checked checkbox

Radios

Radio

Disabled radio

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 %}

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

Navigation elements

Spinner

{% render 'theme/simple/ui/spinner' %}

Dropdowns

{% capture 'example_dropdown' %} <ul class="px-7 py-4 flex flex-col gap-3 whitespace-nowrap"> <li><a href="https://platformos.com">platformOS</a></li> <li><a href="https://documentation.platformos.com/get-started">Get started</a></li> <li><a href="https://documentation.platformos.com">Documentation</a></li> </ul> {% endcapture %}

{% render 'theme/simple/ui/dropdown', toggle_title: 'Toggle dropdown', label: 'Example dropdown', content: example_dropdown %}

Breadcrumbs

--- metadata: breadcrumbs: - label: Example url: / - label: app.style_guide.title url: /style-guide ---

{% parse_json breadcrumbs %} [ { "label": "Example", "url": "http://platformos.com" }, { "label": "Style guide", "url": "http://platformos.com" } ] {% endparse_json %}

{% render 'theme/simple/ui/breadcrumbs', breadcrumbs: context.page.metadata.breadcrumbs, value: 2 %}

Pagination

{% render 'theme/simple/ui/pagination', collection: collection, current_page: 3 %}

3

Tabs

<ul class="flex gap-8 md:subtitle md:font-semibold"> <li> <a href="#" class="py-4 block text-content-sidenote border-b-2 text-content"> Tab 1 </a> </li> <li> <a href="#" class="py-4 block border-b-2 border-interaction text-content"> Tab active </a> </li> </ul>

User avatar

{% render 'theme/simple/ui/avatar', profile: profile, size: 96, class: 'w-24 h-24' %}

Notifications

{% render 'theme/simple/ui/flash', error: 'Error message' %}

new api.Flash('error', 'Error message')

{% render 'theme/simple/ui/flash', notice: 'Notice message', autohide: false %}

new api.Flash('success', 'Success message')

Badges

{% render 'theme/simple/ui/badge', class: 'bg-confirmation', label: 'badge' %}

badge

Slider (simple)

<div class="flex" data-slider> <button disabled class="pe-6 hidden lg:block text-interaction disabled:text-interaction-disabled hover:text-interaction-hover transition-colors" data-slider-prev > {% if dir == 'rtl' %} {% theme_render_rc 'ui/icon', icon: 'dashRight', class: 'fill-current w-4 h-4' %} {% else %} {% theme_render_rc 'ui/icon', icon: 'dashLeft', class: 'fill-current w-4 h-4' %} {% endif %} </button> <ul class="w-full relative flex whitespace-nowrap overflow-x-auto lg:overflow-hidden"> <li class="w-1/3 mx-2 first:ms-0 last:me-0 flex-shrink-0">Item 1</li> <li class="w-1/3 mx-2 first:ms-0 last:me-0 flex-shrink-0">Item 2</li> <li class="w-1/3 mx-2 first:ms-0 last:me-0 flex-shrink-0">Item 3</li> <li class="w-1/3 mx-2 first:ms-0 last:me-0 flex-shrink-0">Item 4</li> </ul> <button class="ps-6 hidden lg:block text-interaction disabled:text-interaction-disabled hover:text-interaction-hover transition-colors" data-slider-next > {% if dir == 'rtl' %} {% theme_render_rc 'ui/icon', icon: 'dashLeft', class: 'fill-current w-4 h-4' %} {% else %} {% theme_render_rc 'ui/icon', icon: 'dashRight', class: 'fill-current w-4 h-4' %} {% endif %} </button> </div>

Item 1
Item 2
Item 3
Item 4

Modal

<button x-ref="showModalButton" x-on:click="showModal = true;" class="button button-secondary"> Show modal </button> <div x-data="{ showModal: false }"> {% capture 'modal_content' %} Test content {% endcapture %} {% render 'theme/simple/ui/modal', title: 'Test modal', content: modal_content %} </div>

Marketplace Template

Test content

Page background

Panels background

Frames

Text

Interactive elements

Alternative (colorful) elements

Danger

Confirmation

Warning

Logo

Picture placeholder

Text content

Page title

Example page title

Big titles

Example title

Titles

Example title

Subtitles

Example subtitle

Sidenotes

Prices

Dates

Text content

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Links

Buttons

Secondary buttons

Danger buttons

Small buttons

Small secondary buttons

Compact buttons

Checkboxes

Radios

Color input

Text inputs

Small text inputs

Password inputs

Selects

Multiselect

Multiple Select (deprecated)

Form tip

Forms playground

Card

Large card

Card overlay

Standard

Simple

Spinner

Dropdowns

Breadcrumbs

Tags

Pagination

Tabs

User avatar

Notifications

Badges

Modal