Fonts

Base@baseFont
Heading@headingFont
Description Title@dtFont
Description@ddFont
Quote@quoteFont
Cite@citeFont
Address@addressFont
Code@codeFont
Code Block@codeBlockFont
Input@inputFont
Legend@legendFont
Button@buttonFont

Icons

Wee@iconWee
Twitter@iconTwitter
Facebook@iconFacebook
GitHub@iconGitHub

Headings

Headings establish a semantic hierarchy of importance

Heading <h1>

Heading <h2>

Heading <h3>

Heading <h4>

Heading <h5>
Heading <h6>

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nibh sapien, porttitor non nibh et, sodales cursus est. Cras nec tristique sem. Nam ex nulla, sagittis a facilisis ac, suscipit at justo. Etiam lectus massa, aliquam ornare ligula quis, tempus dictum odio. Duis ac porttitor sapien. Nulla a nibh in libero imperdiet tempor gravida non magna. Nullam pulvinar nibh sit amet blandit iaculis.

Inline

Miscellaneous inline text formatting

  • This is a simple link
  • Strong defines important text
  • The em tag renders as emphasized text
  • The b tag visually weights text without added importance
  • The i tag visually differentiates text without emphasis
  • The u tag renders text with an underline
  • This text has a strikethrough
  • This is deleted text and this text is inserted
  • Superscript
  • Subscript for things like H2O
  • Small text is small for fine print
  • CSS is a style sheet language
  • This inline quote has a cite reference
  • This is a citation
  • The dfn tag renders a definition
  • The mark tag highlights specific text
  • Styling inline code is easy
  • This is sample output
  • The variable element, such as x / y = z
  • The relative time is

Address

Company Name
123 Main Street
City, ST 12345

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper bibendum nisl, eu aliquam libero luctus in. Cras eleifend, arcu ut varius suscipit, sem purus vehicula tortor, et iaculis ligula magna et magna. Integer et lacus enim.

John Doe