Living Styleguide

MidCamp Hatter Styleguide

Typography

The sans serif face used is Poppins from Google Fonts. The complimentary serif face (not seen here) is Averia Serif Libre, also available via google fonts.

Headings

H1: It is a Period of Civil War Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

H2: It is a Period of Civil War Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

H3: It is a Period of Civil War Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

H4: It is a Period of Civil War Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

H5: It is a Period of Civil War Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
H6: It is a Period of Civil War Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Paragraphs & Lists

It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.

During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the Death Star, an armored space station with enough power to destroy an entire planet.

Pursued by the Empire’s sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy…

Unordered Lists

  • This is the first item in an unordered list.
  • This is the second item in an unordered list.
  • This is the third item in an unordered list.
  • This is the fourth item in an unordered list.

Ordered Lists

  1. This is the first item in an ordered list.
  2. This is the second item in an ordered list.
  3. This is the third item in an ordered list.
  4. This is the fourth item in an ordered list.

Nested Lists

  1. This is the first item in an ordered list.
    • This is the first nested item within the first item.
    • This is the second nested item within the first item.
    • This is the third nested item within the first item.
  2. This is the second item in an ordered list.
  3. This is the third item in an ordered list.
  4. This is the fourth item in an ordered list.
Text Attributes

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

This text is deleted and This text is inserted

This text has a strikethrough

Superscript®

Subscript for things like H2O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variarble element, such as x = y