open Styleguide

Typography

Base text and heading styles

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…

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus porta massa, nec aliquet quam eleifend ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend eget augue at egestas. Morbi pulvinar lobortis massa sed tincidunt. Pellentesque semper quis orci faucibus auctor. Duis id cursus nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum posuere turpis nec dapibus euismod. Integer sapien erat, varius id volutpat ut, tincidunt quis justo. Quisque faucibus placerat purus sit amet eleifend. Cras ornare molestie ligula, ut mollis nisi blandit vel. In hac habitasse platea dictumst. Morbi gravida ante nisl, quis sollicitudin dolor porta ac. Integer ac diam convallis, blandit nibh sit amet, sagittis nunc. Quisque ac ex nulla. Mauris porta augue et laoreet aliquet.

Fusce neque nisl, condimentum et ligula nec, faucibus mollis lacus. Mauris pretium sapien vel finibus tincidunt. Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.

Integer eget sapien ut massa rutrum sollicitudin. Vivamus ultricies, dolor vel viverra rutrum, nisi mi congue mi, vitae ultricies tortor nisi et tellus. Curabitur varius tincidunt tortor, eget lobortis nisl vehicula eu. Donec arcu urna, cursus vitae cursus vel, ullamcorper blandit nisi. Fusce non sodales ante. Etiam dignissim velit sit amet sollicitudin imperdiet. Etiam a nisi vehicula, posuere dui eget, tristique dui. Integer consectetur aliquam vulputate. Aliquam faucibus arcu est, eget pellentesque dolor ultricies ut. Nam nunc justo, congue non consequat in, tempus ut turpis. Donec nec dui sed dui dapibus consectetur in ut lectus. Integer finibus augue dui, id placerat nisl scelerisque id. Nam nec nulla lorem. Vivamus sodales erat in turpis accumsan imperdiet.

Aenean efficitur neque erat, quis accumsan ipsum placerat sit amet. Nam mollis dignissim elit quis pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In fermentum dapibus massa ac rhoncus. Aliquam nec tincidunt sapien. Cras sed porttitor velit. Proin scelerisque convallis hendrerit. Nunc luctus eget enim quis iaculis.

Cras sed lorem vitae sapien vulputate dignissim quis sed tortor. Fusce viverra pulvinar metus eu eleifend. Phasellus sollicitudin turpis quis pellentesque bibendum. Sed suscipit lacinia urna. Ut nec massa laoreet, cursus purus vitae, posuere ante. Praesent elit nunc, cursus ac lorem eget, dapibus vehicula justo. Aliquam suscipit eu nulla in bibendum.

H1: This is a heading

Fusce neque nisl, condimentum et ligula nec, faucibus mollis lacus. Mauris pretium sapien vel finibus tincidunt. Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.

H2: This is a heading

Integer eget sapien ut massa rutrum sollicitudin. Vivamus ultricies, dolor vel viverra rutrum, nisi mi congue mi, vitae ultricies tortor nisi et tellus. Curabitur varius tincidunt tortor, eget lobortis nisl vehicula eu. Donec arcu urna, cursus vitae cursus vel, ullamcorper blandit nisi. Fusce non sodales ante. Etiam dignissim velit sit amet sollicitudin imperdiet. Etiam a nisi vehicula, posuere dui eget, tristique dui. Integer consectetur aliquam vulputate. Aliquam faucibus arcu est, eget pellentesque dolor ultricies ut. Nam nunc justo, congue non consequat in, tempus ut turpis. Donec nec dui sed dui dapibus consectetur in ut lectus. Integer finibus augue dui, id placerat nisl scelerisque id. Nam nec nulla lorem. Vivamus sodales erat in turpis accumsan imperdiet.

H3: This is a heading

Aenean efficitur neque erat, quis accumsan ipsum placerat sit amet. Nam mollis dignissim elit quis pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In fermentum dapibus massa ac rhoncus. Aliquam nec tincidunt sapien. Cras sed porttitor velit. Proin scelerisque convallis hendrerit. Nunc luctus eget enim quis iaculis.

H4: This is a heading

Cras sed lorem vitae sapien vulputate dignissim quis sed tortor. Fusce viverra pulvinar metus eu eleifend. Phasellus sollicitudin turpis quis pellentesque bibendum. Sed suscipit lacinia urna. Ut nec massa laoreet, cursus purus vitae, posuere ante. Praesent elit nunc, cursus ac lorem eget, dapibus vehicula justo. Aliquam suscipit eu nulla in bibendum.

H5: This is a heading

Cras sed lorem vitae sapien vulputate dignissim quis sed tortor. Fusce viverra pulvinar metus eu eleifend. Phasellus sollicitudin turpis quis pellentesque bibendum. Sed suscipit lacinia urna. Ut nec massa laoreet, cursus purus vitae, posuere ante. Praesent elit nunc, cursus ac lorem eget, dapibus vehicula justo. Aliquam suscipit eu nulla in bibendum.

H6: This is a heading

Cras sed lorem vitae sapien vulputate dignissim quis sed tortor. Fusce viverra pulvinar metus eu eleifend. Phasellus sollicitudin turpis quis pellentesque bibendum. Sed suscipit lacinia urna. Ut nec massa laoreet, cursus purus vitae, posuere ante. Praesent elit nunc, cursus ac lorem eget, dapibus vehicula justo. Aliquam suscipit eu nulla in bibendum.

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.
  • Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.
  • Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.

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.
  5. Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.
  6. Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.
  7. Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.
  8. Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.
  9. Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.
  10. Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.
  11. Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.
  12. Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.
  13. Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.
  14. Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.
  1. Outline "A" list type
  2. This is the first item in an ordered list.
  3. This is the second item in an ordered list.
  4. This is the third item in an ordered list.
  5. This is the fourth item in an ordered list.
  1. Outline "a" list type
  2. This is the first item in an ordered list.
  3. This is the second item in an ordered list.
  4. This is the third item in an ordered list.
  5. This is the fourth item in an ordered list.
  1. Outline "I" list type
  2. This is the first item in an ordered list.
  3. This is the second item in an ordered list.
  4. This is the third item in an ordered list.
  5. This is the fourth item in an ordered list.
  1. Outline "i" list type
  2. This is the first item in an ordered list.
  3. This is the second item in an ordered list.
  4. This is the third item in an ordered list.
  5. This is the fourth item in an ordered list.

Nested List OL > UL

  1. This is the first item in an ordered list. Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.
    • 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.
    • Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.
    • Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.
  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.
  5. Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.
  6. Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.

Nested List UL > OL

  • This is the first item in an ordered list. Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.
    1. This is the first nested item within the first item.
    2. This is the second nested item within the first item.
    3. This is the third nested item within the first item.
    4. Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.
    5. Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.
  • This is the second item in an ordered list.
  • This is the third item in an ordered list.
  • This is the fourth item in an ordered list.
  • Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.
  • Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.

Nested List UL > UL

  • This is the first item in an unordered list. Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.
    • 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.
    • Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.
    • Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.
  • 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.
  • Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.
  • Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.

Nested List OL > OL

  1. This is the first item in an unordered list. Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.
    1. This is the first nested item within the first item.
    2. This is the second nested item within the first item.
    3. This is the third nested item within the first item.
    4. Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.
    5. Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.
  2. This is the second item in an unordered list.
  3. This is the third item in an unordered list.
  4. This is the fourth item in an unordered list.
  5. Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.
  6. Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.
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

The .text2 class tightens the line-height of a block. Fusce neque nisl, condimentum et ligula nec, faucibus mollis lacus. Mauris pretium sapien vel finibus tincidunt. Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.

The .text3 class tightens the line-height of a block. Fusce neque nisl, condimentum et ligula nec, faucibus mollis lacus. Mauris pretium sapien vel finibus tincidunt. Curabitur sed orci leo. Proin id arcu mi. Donec pulvinar iaculis massa quis sagittis. In semper molestie massa et gravida. Aliquam purus odio, dignissim vel vestibulum eu, imperdiet sed nisi.