Atoms

Backdrop

Implementation: modules/components/atoms/backdrop.liquid

Content (String):

Variants & examples

Button

Implementation: modules/components/atoms/button.liquid

Tag (String): button | a

Size (String): normal | small

Filled (Boolean): false | true

Weight (String): primary | secondary

Classes (String):

Content (String): Click me

Variant (String): normal | important | confirmation | inverted

Disabled (Boolean): false | true

Variants & examples


tag: button
{"tag":"button","size":"normal","filled":false,"weight":"primary","classes":"","content":"Click me","variant":"normal","disabled":false}

tag: a
Click me
{"tag":"a","size":"normal","filled":false,"weight":"primary","classes":"","content":"Click me","variant":"normal","disabled":false}

size: normal
{"tag":"button","size":"normal","filled":false,"weight":"primary","classes":"","content":"Click me","variant":"normal","disabled":false}

size: small
{"tag":"button","size":"small","filled":false,"weight":"primary","classes":"","content":"Click me","variant":"normal","disabled":false}

filled: true
{"tag":"button","size":"normal","filled":true,"weight":"primary","classes":"","content":"Click me","variant":"normal","disabled":false}

weight: primary
{"tag":"button","size":"normal","filled":false,"weight":"primary","classes":"","content":"Click me","variant":"normal","disabled":false}

weight: secondary
{"tag":"button","size":"normal","filled":false,"weight":"secondary","classes":"","content":"Click me","variant":"normal","disabled":false}

variant: normal
{"tag":"button","size":"normal","filled":false,"weight":"primary","classes":"","content":"Click me","variant":"normal","disabled":false}

variant: important
{"tag":"button","size":"normal","filled":false,"weight":"primary","classes":"","content":"Click me","variant":"important","disabled":false}

variant: confirmation
{"tag":"button","size":"normal","filled":false,"weight":"primary","classes":"","content":"Click me","variant":"confirmation","disabled":false}

variant: inverted
{"tag":"button","size":"normal","filled":false,"weight":"primary","classes":"","content":"Click me","variant":"inverted","disabled":false}

disabled: true
{"tag":"button","size":"normal","filled":false,"weight":"primary","classes":"","content":"Click me","variant":"normal","disabled":true}

Card

Implementation: modules/components/atoms/card.liquid

Tag (String): div

Content (String): This is an example card

Variant (String): default | highlighted

Variants & examples


tag: div
This is an example card
{"tag":"div","content":"This is an example card","variant":"default"}

variant: default
This is an example card
{"tag":"div","content":"This is an example card","variant":"default"}

variant: highlighted
This is an example card
{"tag":"div","content":"This is an example card","variant":"highlighted"}

Checkbox

Implementation: modules/components/atoms/checkbox.liquid

Id (String): my-checbox

Name (String): my-checbox

Checked (Boolean): false | true

Disabled (Boolean): false | true

Variants & examples


id: my-checbox
{"id":"my-checbox","name":"my-checbox","checked":false,"disabled":false}

name: my-checbox
{"id":"my-checbox","name":"my-checbox","checked":false,"disabled":false}

checked: true
{"id":"my-checbox","name":"my-checbox","checked":true,"disabled":false}

disabled: true
{"id":"my-checbox","name":"my-checbox","checked":false,"disabled":true}

Chip

Implementation: modules/components/atoms/chip.liquid

Tag (String): div

Content (String): Chip

Variant (String): default | clickable | selected | error | success | warning

Closable (Boolean): false | true

Variants & examples


tag: div
Chip
{"tag":"div","content":"Chip","variant":"default","closable":false}

variant: default
Chip
{"tag":"div","content":"Chip","variant":"default","closable":false}

variant: clickable
Chip
{"tag":"div","content":"Chip","variant":"clickable","closable":false}

variant: selected
Chip
{"tag":"div","content":"Chip","variant":"selected","closable":false}

variant: error
Chip
{"tag":"div","content":"Chip","variant":"error","closable":false}

variant: success
Chip
{"tag":"div","content":"Chip","variant":"success","closable":false}

variant: warning
Chip
{"tag":"div","content":"Chip","variant":"warning","closable":false}

closable: true
Chip
{"tag":"div","content":"Chip","variant":"default","closable":true}

Heading

Implementation: modules/components/atoms/heading.liquid

Level (Integer): 1 | 2 | 3 | 4 | 5 | 6

Classes (String):

Content (String): I'm a heading

Variants & examples


level: 1

I'm a heading

{"level":1,"classes":"","content":"I'm a heading"}

level: 2

I'm a heading

{"level":2,"classes":"","content":"I'm a heading"}

level: 3

I'm a heading

{"level":3,"classes":"","content":"I'm a heading"}

level: 4

I'm a heading

{"level":4,"classes":"","content":"I'm a heading"}

level: 5
I'm a heading
{"level":5,"classes":"","content":"I'm a heading"}

level: 6
I'm a heading
{"level":6,"classes":"","content":"I'm a heading"}

Headline

Implementation: overrides/components/atoms/headline.liquid

Tag (String): h1

Content (String): I'm a headline

Variant (String): h1 | h2 | h3 | h4 | h5 | h6

Variants & examples


tag: h1

I'm a headline override

{"tag":"h1","content":"I'm a headline","variant":"h1"}

variant: h1

I'm a headline override

{"tag":"h1","content":"I'm a headline","variant":"h1"}

variant: h2

I'm a headline override

{"tag":"h1","content":"I'm a headline","variant":"h2"}

variant: h3

I'm a headline override

{"tag":"h1","content":"I'm a headline","variant":"h3"}

variant: h4

I'm a headline override

{"tag":"h1","content":"I'm a headline","variant":"h4"}

variant: h5

I'm a headline override

{"tag":"h1","content":"I'm a headline","variant":"h5"}

variant: h6

I'm a headline override

{"tag":"h1","content":"I'm a headline","variant":"h6"}

Icon

Implementation: modules/components/atoms/icon.liquid

Name (String): plus | checkCircle | ...

Class (String): w-4 h-4

Variants & examples

{"name":"all","class":"w-10 h-10 p-2 m-2 inline-block"}

Input

Implementation: modules/components/atoms/input.liquid

Name (String): my-input

Type (String): text | email | password | search | tel | date | number | hidden

Value (String):

Classes (String):

Variant (String): normal | confirmation | error

Disabled (Boolean): false | true

Required (Boolean): false | true

Attributes (Hash): {}

Placeholder (String): Type here

Variants & examples


name: my-input
{"name":"my-input","type":"text","value":"","classes":"","variant":"normal","disabled":false,"required":false,"attributes":{},"placeholder":"Type here"}

type: text
{"name":"my-input","type":"text","value":"","classes":"","variant":"normal","disabled":false,"required":false,"attributes":{},"placeholder":"Type here"}

type: email
{"name":"my-input","type":"email","value":"","classes":"","variant":"normal","disabled":false,"required":false,"attributes":{},"placeholder":"Type here"}

type: password
{"name":"my-input","type":"password","value":"","classes":"","variant":"normal","disabled":false,"required":false,"attributes":{},"placeholder":"Type here"}

type: search
{"name":"my-input","type":"search","value":"","classes":"","variant":"normal","disabled":false,"required":false,"attributes":{},"placeholder":"Type here"}

type: tel
{"name":"my-input","type":"tel","value":"","classes":"","variant":"normal","disabled":false,"required":false,"attributes":{},"placeholder":"Type here"}

type: date
{"name":"my-input","type":"date","value":"","classes":"","variant":"normal","disabled":false,"required":false,"attributes":{},"placeholder":"Type here"}

type: number
{"name":"my-input","type":"number","value":"","classes":"","variant":"normal","disabled":false,"required":false,"attributes":{},"placeholder":"Type here"}

type: hidden
{"name":"my-input","type":"hidden","value":"","classes":"","variant":"normal","disabled":false,"required":false,"attributes":{},"placeholder":"Type here"}

variant: normal
{"name":"my-input","type":"text","value":"","classes":"","variant":"normal","disabled":false,"required":false,"attributes":{},"placeholder":"Type here"}

variant: confirmation
{"name":"my-input","type":"text","value":"","classes":"","variant":"confirmation","disabled":false,"required":false,"attributes":{},"placeholder":"Type here"}

variant: error
{"name":"my-input","type":"text","value":"","classes":"","variant":"error","disabled":false,"required":false,"attributes":{},"placeholder":"Type here"}

disabled: true
{"name":"my-input","type":"text","value":"","classes":"","variant":"normal","disabled":true,"required":false,"attributes":{},"placeholder":"Type here"}

required: true
{"name":"my-input","type":"text","value":"","classes":"","variant":"normal","disabled":false,"required":true,"attributes":{},"placeholder":"Type here"}

placeholder: Type here
{"name":"my-input","type":"text","value":"","classes":"","variant":"normal","disabled":false,"required":false,"attributes":{},"placeholder":"Type here"}

Sidenote

Implementation: modules/components/atoms/sidenote.liquid

Classes (String):

Content (String): I'm a sidenote

Variants & examples

Molecules

Input with button

Implementation: modules/components/molecules/input-with-button.liquid

Classes (String): w-1/2

Input params (Hash): {"name":"input","placeholder":"Type here"}

Button params (Hash): {"content":"Search","variant":"primary"}

Variants & examples

{"classes":"w-1/2","input_params":{"name":"input","placeholder":"Type here"},"button_params":{"content":"Search","variant":"primary"}}

Organisms