Mercy Ships Cargo Day

Typography

Headings

Code Example
h1

Design system heading example
h2

Design system heading example
h3

Design system heading example
h4

Design system heading example
h5
Design system heading example
h6
Design system heading example

Display

Code Example
display-1 Display heading
display-2 Display heading
display-3 Display heading
display-4 Display heading
display-5 Display heading
display-6 Display heading

Sizes

Code Example
fs-1 Font size 1
fs-2 Font size 2
fs-3 Font size 3
fs-4 Font size 4
fs-5 Font size 5
fs-6 Font size 6
fs-sm Font size small
fs-lg Font size large

Elements

Code Example
a This line of text is meant to render a linked text.
mark This line of text is meant to render a highlight text.
del This line of text is meant to render a deleted text.
s This line of text is meant to render a no longer accurate text.
ins This line of text is meant to render an inserted text.
u This line of text is meant to render an underlined text.
small This line of text is meant to render a small text.
strong This line of text is meant to render a bold text.
em This line of text is meant to render an italicized text.

Lead

Code Example
lead In ultricies fermentum aliquet. Pellentesque dui magna, condimentum non ullamcorper at, cursus in sem. Nunc condimentum, purus ac sagittis ultricies, metus leo pharetra mi, non vehicula felis elit et nisi.

Paragraph

Code Example
p In ultricies fermentum aliquet. Pellentesque dui magna, condimentum non ullamcorper at, cursus in sem. Nunc condimentum, purus ac sagittis ultricies, metus leo pharetra mi, non vehicula felis elit et nisi. Etiam venenatis commodo libero, vel ullamcorper nibh lobortis vel. Aliquam auctor porta tortor, nec consequat nibh finibus a. Sed ultrices risus eget iaculis luctus. Mauris vel gravida magna.

Unstyled list

Code Example
list-unstyled
  • This is an unordered list. It appears completely unstyled.
  • This is an unordered list. It appears completely unstyled.
  • This is an unordered list. It appears completely unstyled.
  • Nested lists:
    • Nested lists are unaffected by this style. Will still show a bullet and have appropriate left margin.
    • Nested lists are unaffected by this style. Will still show a bullet and have appropriate left margin.
    • Nested lists are unaffected by this style. Will still show a bullet and have appropriate left margin.
  • This is an unordered list. It appears completely unstyled.