Typography
Headings
All HTML headings, <h1>through <h6>, are available. .h1through .h6classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.
h1. Heading H1
h2. Heading H2
h3. Heading H3
h4. Heading H4
h5. Heading H5
h6. Heading H6
Styled headings
Create lighter, secondary text in any heading with a generic <small> tag or the .smallclass.
h1. Heading H1 Secondary Text
h2. Heading H2 Secondary Text
h3. Heading H3 Secondary Text
h4. Heading H4 Secondary Text
h5. Heading H5 Secondary Text
h6. Heading H6 Secondary Text
Inline text elements
You can use different types inline text elements.
Marked text
For highlighting a run of text due to its relevance in another context, use the <mark>tag.
You can use the mark tag to highlight text.
Deleted text
For indicating blocks of text that have been deleted use the <del>tag.
This line of text is meant to be treated as deleted text.
Strikethrough text
For indicating blocks of text that are no longer relevant use the <s>tag.
This line of text is meant to be treated as no longer accurate.
Inserted text
For indicating additions to the document use the <ins>tag.
This line of text is meant to be treated as an addition to the document.
Underlined text
To underline text use the <u>tag.
This line of text will render as underlined
Small text
You may alternatively use an inline element with .smallin place of any <small>.
This line of text is meant to be treated as fine print.
Bold
For emphasizing a snippet of text with a heavier font-weight.
The following snippet of text is rendered as bold text.
Italics
For emphasizing a snippet of text with italics.
The following snippet of text is rendered as italicized text.
Basic abbreviation
Stylized implementation of HTML's <abbr>element for abbreviations and acronyms to show the expanded version on hover.
An abbreviation of the word attribute is attr.
Initialism abbreviation
Add .initialismto an abbreviation for a slightly smaller font-size.
HTMLis the best thing since sliced bread.
Lists - Unordered
A list of items in which the order does notexplicitly matter.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Lists - Ordered
A list of items in which the order doesexplicitly matter.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Lists - Unstyled
Remove the default list-styleon items.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Addresses
Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>.
1355 Market Street, Suite 900
San Francisco, CA 94103
P:(123) 456-7890 Full Name
first.last@example.com
Basic block
Use <pre>for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.
<p>Sample text here...</p>
Inline
Place all list items on a single line with display: inline-block;and some light padding.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
Blockquotes
For quoting blocks of content from another source within your document.
Naming a source
Add a <footer>for identifying the source. Wrap the name of the source work in <cite>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Alternate displays
Add .blockquote-reversefor a blockquote with right-aligned content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Description
A list of terms with their associated descriptions.
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
Horizontal description
Make terms and descriptions in <dl>line up side-by-side.
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod
- Fusce dapibus, tellus ac cursus commodo, tortor mauris.
Drop cap
Use the class .dropcaplet the first letter drop down of content texts.
Dorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, illo, iste itaque voluptas corrupti ratione reprehenderit magni similique Tempore, quos delectus asperiores libero voluptas.
Dorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, illo, iste itaque voluptas corrupti ratione reprehenderit magni similique Tempore, quos delectus asperiores libero voluptas.