Atoms
Space:
- Breakpoints
-
xs sm md lg xl
Color palette:
Foreground on background colors with highlight between
- light, dark
- ,
typography:
Heading 1
Heading 2
Heading 3
Heading 4
paragraph Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti ad quae a voluptate molestiae suscipit velit facere vitae ut, magnam eius fuga cum voluptates minus illum quos, recusandae magni eos.
- text.h1
- text
inline-semantics:
- a
- anchor
- abbr
- In short: abbr
- strong / b
- strong bold
- em
- emphasize
- s
-
strikethrough
- u
- spelling speling
- sub
- Subscript O2
- sup
- Superscript m2
- mark
- This should be marked
- code
Code
- kbd
- Ctrl
- ruby, rb, rp, rt
- 漢 字
- time
grouping:
- pre
-
preformatted
- blockquote cite
-
Never give up! Trust your instincts! – Peppy
- ul ol li
-
- ordered list item
- ordered list item
-
ordered list item with nested ul
- item lvl 2
- item lvl 2
- item lvl 2
-
ordered list item with nested ol
- item lvl 2
- item lvl 2
- item lvl 2
- list item
- details / summary
-
Guano Aapes - Quetly / Lyrics
Qietly explodes your love
Your insecurity is so soft to me
- dl dt / dd
-
- definition term
- definition description
- figure / figcaption
-
By Susan Yin @syinq
input / form:
- button
- button.outline
- button.button-clear
- input[type=text]
- input[type=number]
- label.btn ~ input[type=file]
- input:invalid
- Needs to be min 1
- textarea
- (fieldset legend) checkbox, radio
- datalist
- select
- select[multiple]
- meter
-
at 50/100 at 50/100 at 50/100
- progress:indeterminate
- progress[value=0]
- progress[value=50]
- progress[value=100]