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 1
h2. Heading 2
h3. Heading 3
h4. Heading 4
h5. Heading 5
h6. Heading 6
Styled Headings
Create lighter, secondary text in any heading with a generic
<small>
tag or the
.small
class.
Heading 1 Secondary Text
Heading 2 Secondary Text
Heading 3 Secondary Text
Heading 4 Secondary Text
Heading 5 Secondary Text
Heading 6 Secondary Text
Inline text elements
Make a paragraph stand out by adding
.lead
.
Your title goes here
For highlighting a run of text due to its relevance in another context, use the
<mark>
tag.
For indicating blocks of text that have been deleted use the
<del>
tag.
For indicating additions to the document use the
<ins>
tag.
For emphasizing a snippet of text with a heavier font-weight.
<strong>
For emphasizing a snippet of text with italics.
<em>
Contextual Text Colors
Use classes
.text-custom
,
.text-primary
etc. to highlight text
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Addresses
Present contact information for the nearest ancestor or the entire body of work. Preserve formatting
by ending all lines with
<br>
.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890 Full Name
first.last@example.com
Blockquotes
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.
Add
.blockquote-reverse
for a blockquote with right-aligned content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
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
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
Unstyled
Remove the default
list-style
and left margin
on list items (immediate children only). This only applies to immediate children
list items, meaning you will need to add the class for any nested lists as well.
- Lorem ipsum dolor sit amet
-
Integer molestie lorem at massa
- Phasellus iaculis neque
- Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Eget porttitor lorem
Inline
Place all list items on a single line with
display: inline-block;
and some light padding.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
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. Starts off stacked like default
<dl>
s, but when the navbar expands, so do these.
- 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 semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Dropcap
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 quod perferendis! Voluptate, quod illo rerum? Lorem ipsum dolor sit amet.
Dorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, illo, iste itaque voluptas corrupti ratione reprehenderit magni similique? Tempore, quos delectus asperiores libero voluptas quod perferendis! Voluptate, quod illo rerum? Lorem ipsum dolor sit amet.
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>
