UI elements

typography

headings look like this:

heading 1

heading 2

heading 3

heading 4

heading 5

heading 6

body text looks like this. it can be bold, italic, or strikethrough.

a horizontal rule can be seen below.
the first <h1> tag on each page will be styled to appear as though it’s followed by a horizontal rule.

lists

• unordered lists look like this.
• item 2
• item 3

1. ordered lists look like this.
2. item 2
3. item 3

blockquotes

blockquotes look like this.

tables

tables look like this:

code

inline code looks like this: code here

code blocks look like this (shown here with highlighting):

// code with highlighting
if (thing == true) {
  object.method();
  return true;
}

callouts

callouts are a type of element added by lifeblood, similar to the admonition syntax available in Read the Docs.
add one of the classes .tip, .note, or .caution to a paragraph using a Kramdown inline attribute list to turn it into a callout:

{: .tip}
this is a *tip* callout.

{: .note}
this is a *note* callout.

{: .caution}
this is a *caution* callout.

this is a tip callout.

this is a note callout.

this is a caution callout.

add .caps to capitalize the callout’s first letter:

{: .note .caps}
this is a *note* callout with the first letter capitalized.

this is a note callout with the first letter capitalized.