Typography
Heading with color Text
Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus.
Aa
Body
Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus.
Aa
Title
Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus.
Aa
Sub Header
Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus.
Aa
Header
Default Heading Text
h1. Heading
h2. Heading
h3. Heading
h4. Heading
h5. Heading
h6. Heading
Heading with color Text
h1. Heading
h2. Heading
h3. Heading
h4. Heading
h5. Heading
h6. Heading
Paragraph with Lead
" This is a lead paragraph. It stands out from regular paragraphs. " Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus.
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast
Display Headings
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
Display 7
Display 8
Display headings with color Text
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
Display 7
Display 8
Abbreviations
attr : "Attribute"
CSS : "Cascading Style Sheet"
HTML : "HyperText Markup Language"
Line Height
Lorem ipsum dolor sit amet.
Dolor sit amet.
Lorem ipsum dolor sit amet.
Dolor sit amet.
Lorem ipsum dolor sit amet.
Dolor sit amet.
Lorem ipsum dolor sit amet.
Dolor sit amet.
Inline text elements
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.
Paragraph Text
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.
Most designers set their type arbitrarily, either by pulling values out of the sky or by adhering to a baseline grid. The former case isn’t worth discussing here, but the latter requires a closer look.
You can use the mark tag to highlight text.
Letter spacing
Lorem ipsum dolor sit amet. Tight letter spacing.
Lorem ipsum dolor sit amet. Normal letter spacing.
Lorem ipsum dolor sit amet. Wide letter spacing.
Inline List
- This is a list item.
- And another one.
- But they're displayed inline.
- This is a list item.
- And another one.
- But they're displayed inline.
Description list alignment
- Description lists
- A description list is perfect for defining terms.
- Term
-
Definition for the term.
And some more placeholder definition text. Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Another term
- This definition is short, so no extra paragraphs or anything.
- Truncated term is truncated
- This can be useful when space is tight. Adds an ellipsis at the end.
- Nesting
-
- Nested definition list
- I heard you like definition lists. Let me put a definition list inside your definition list.
Blockquotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Blockquotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Blockquotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Blockquotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Blockquotes
John Taylor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. consectetur ipsum dolo
Blockquotes
Manny Jah
Lorem ipsum dolor sit amet, consectetur adipiscing elit. consectetur ipsum dolo
Blockquotes
Willie Findit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. consectetur ipsum dolo