UI — Kit

Typography

Display 1 = 80px

Display 2 = 72px

Display 3 = 64px

Display 4 = 56px

Display 5 = 48px

Display 6 = 40px

Heading 1 = 40px

Heading 2 = 36px

Heading 3 = 28px

Heading 4 = 24px

Heading 5 = 20px

Heading 6 = 18px

This is a lead paragraph. It stands out from regular paragraphs.

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

  • This is a list.
  • It appears completely unstyled.
  • Structurally, it's still a list.
  • However, this style only applies to immediate child elements.
    • 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 may still come in handy in some situations.
  • Inline lists:
    • This is a list item.
    • And another one.
    • But they're displayed inline.

Buttons

Backgrounds

Primary = white opacity 5% ~ #363636
Secondary = #3d3d3d
Success
Danger
Warning
Info
Light
Black
White
Yellow = #ffe795
Lightyellow = #fff7ca
Darkgray = #222323
Gray = #383838 = old site color
Darkness = #343434
Lightgray = #3e3e3e
Dark = custom bg = 2b2b2b
Placeholder

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

9 mins
Placeholder

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

9 mins
Placeholder

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

9 mins
PlaceholderResponsive image
A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera200x200

Custom cards

Short title, long jacket

  • Bla-bla
  • Moon
  • 3d

Short title, long jacket

  • Bla-bla
  • Earth
  • 3d

Title belongs here

  • bla-bla
  • Saturn
  • 5d

Alerts

A simple success alert—check it out!
A simple warning alert—check it out!
A simple danger alert—check it out!
A simple info alert—check it out!
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!

Spinners

GalleryLoader:
Bootstrap Spinners:
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
]
]