Typography Headings, paragraphs, lists, and other inline type elements
Typographic scale
The typographic grid is based on Compass Vertical Rhythm mixins. Once your $base-line-height and $base-font-size are set, all other typographic elements can rely on those values and adjust accordingly with wonderful mixins such as @include adjust-font-size() and leader() / trailer().
Example body text
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Lead body copy
Make a paragraph stand out by adding .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
h1. Et et porta cras tempors
h2. malesuada elementum amet
h3. Gravida mi lorem erat nam
h4. Lacinia viverra dignissim tortor eros
h5. Tortor vitae orci dignissim eu
h6. Mattis convallis amet magna nunc
Link, Emphasis and Strong
| Element | Usage |
|---|---|
| Link | Cras vulputate accumsan turpis neque iaculis mi vitae erat orci. |
<em> |
Massa pellentesque pellentesque velit adipiscing iaculis auctor ac gravida neque. |
<strong> |
Nunc est luctus nisl orci lorem neque aliquam venenatis aliquam. |
Blockquotes
| Element | Usage |
|---|---|
<blockquote> |
Block-level element for quoting content from another source |
<small> |
Optional element for adding a user-facing citation, typically an author with title of work. |
Example blockquotes
Default blockquotes are styled as such:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Someone famous in Body of work
To float your blockquote to the right, add class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Someone famous in Body of work
Lists
Unordered
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Phasellus iaculis neque
Unstyled
- Lorem ipsum dolor sit amet
- Integer molestie lorem at massa
-
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Phasellus iaculis neque
Ordered
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Phasellus iaculis neque
Description Lists
Standard
- 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.
Inline
- 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.
Tables
| Name | Class | Description |
|---|---|---|
| Default | None | None |
| Condensed | .table--condensed |
None |
| Bordered | .table--bordered |
None |
| Zebra Striped | .table--striped |
None |
Default
| vitae | lacus | lorem | dignissim | tincidunt |
|---|---|---|---|---|
| convallis | sit | felis | viverra | dignissim |
| porta | enim | elementum | vestibulum | lacinia |
| viverra | ante | orci | velit | orci |
Condensed
| vitae | lacus | lorem | dignissim | tincidunt |
|---|---|---|---|---|
| convallis | sit | felis | viverra | dignissim |
| porta | enim | elementum | vestibulum | lacinia |
| viverra | ante | orci | velit | orci |
Bordered
| vitae | lacus | lorem | dignissim | tincidunt |
|---|---|---|---|---|
| convallis | sit | felis | viverra | dignissim |
| porta | enim | elementum | vestibulum | lacinia |
| viverra | ante | orci | velit | orci |
Zebra
| vitae | lacus | lorem | dignissim | tincidunt |
|---|---|---|---|---|
| convallis | sit | felis | viverra | dignissim |
| porta | enim | elementum | vestibulum | lacinia |
| viverra | ante | orci | velit | orci |
| viverra | ante | orci | velit | orci |
All in One Combo
| vitae | lacus | lorem | dignissim | tincidunt |
|---|---|---|---|---|
| convallis | sit | felis | viverra | dignissim |
| porta | enim | elementum | vestibulum | lacinia |
| viverra | ante | orci | velit | orci |
| viverra | ante | orci | velit | orci |
Forms
Horizontal Forms
Horizontal Forms
Inline Forms
Use.login-inline for an inline login block.