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

Typography with custom size.

Typography with custom size.

  • Typography
  • Size: 18px

Typography with custom size.

Typography with custom size.

  • Typography
  • Size: 1.2em

Typography with custom size.

Typography with custom size.

  • Typography
  • Size: 1.4rem

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

Layout left justification.

Layout left justification.

  • Layout
  • Justification: left
  • Element: article

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.