Typography
Headings
All HTML headings, <h1> through <h6>, are
available. .h1 through .h6 classes 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 .small class.
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.
StrikThis Monthrough 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 .small in 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 .initialism to an abbreviation for a slightly smaller font-size.
HTML is the best thing since sliced bread.
Lists - Unordered
A list of items in which the order does not explicitly 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 does explicitly 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-style on 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
[email protected]
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-reverse for 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 .dropcap let 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.