Layout left justification.
Layout left justification.
- Layout
- Justification: left
- Element: article
core/group
Typography
Typography with default size, default appearance, no letter-spacing, no letter-case, and no decoration.
Typography with default size, default appearance, no letter-spacing, no letter-case, and no decoration.
- Typography
- Size: default
- Appearance: default
- Letter-spacing: none
- Letter-case: none
- Decoration: none
Typography with small size, thin appearance, 8px letter-spacing, no letter-case, and no decoration.
Typography with small size, thin appearance, 8px letter-spacing, no letter-case, and no decoration.
- Typography
- Size: small
- Appearance: thin
- Letter-spacing: 8px
- Letter-case: none
- Decoration: none
Typography with medium size, regular appearance, 0.5em letter-spacing, uppercase letter-case, and underline decoration.
Typography with medium size, regular appearance, 0.5em letter-spacing, uppercase letter-case, and underline decoration.
- Typography
- Size: medium
- Appearance: regular
- Letter-spacing: 0.5em
- Letter-case: uppercase
- Decoration: underline
Typography with large size, default appearance, 0.5rem letter-spacing, lowercase letter-case, and strike-through decoration.
Typography with large size, default appearance, 0.5rem letter-spacing, lowercase letter-case, and strike-through decoration.
- Typography
- Size: large
- Appearance: default
- Letter-spacing: 0.5rem
- Letter-case: lowercase
- Decoration: strike-through
Typography with extra large size, light italic appearance, no letter-spacing, capitalize letter-case, and no decoration.
Typography with extra large size, light italic appearance, no letter-spacing, capitalize letter-case, and no decoration.
- Typography
- Size: extra large
- Appearance: light italic
- Letter-spacing: none
- Letter-case: capitalize
- Decoration: none
Layout left justification.
Layout left justification.
- Layout
- Justification: left
- Element: div
Layout center justification.
Layout center justification.
- Layout
- Justification: center
- Element: header
Layout right justification.
Layout right justification.
- Layout
- Justification: right
- Element: main
Layout space between justification.
Layout space between justification.
- Layout
- Justification: space between
- Element: section
Background with image cover center.
Background with image cover center.
- Background
- image
- cover
Background with image cover top.
Background with image cover top.
- Background
- image
- cover
Background with image cover bottom.
Background with image cover bottom.
- Background
- image
- cover
Background with image contain left.
Background with image contain left.
- Background
- image
- cover
Background with image auto right.
Background with image auto right.
- Background
- image
- cover
Variant: group
A group
can contain
multiple nested
elements
A group
has a font-size
setting
A group
is by default
a <div> but
can be changed
to another
html element
e.g. a <section> or <aside>
Variant: Row
a row combines multiple components
e.g. images or text on a single row
and are forced to stay on the row
it’s possible to allow
the nested components
to wrap over multiple lines
when there’s no space available.
Variant: Stack
a stack combines multiple components
e.g. images or text
beneath each other
it’s possible to align
the nested components
to the center or the right.