Typography
The basic elements of typographyHeadings
h1. Heading 1 |
Semibold 36px |
h2. Heading 2 |
Semibold 30px |
h3. Heading 3 |
Semibold 24px |
h4. Heading 4 |
Semibold 18px |
h5. Heading 5 |
Semibold 14px |
h6. Heading 6 |
Semibold 12px |
Paragraph text
Lorem ipsum eget urna mollis ornare vel eu leo. Cum sociisnatoque penatibus et magnis dis parturient montes, code
nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit. Sed euismod aliquet sapien consequat tincidunt.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed euismod aliquet sapien consequat tincidunt.
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual.
But I must explain to you how all this mistaken idea of
Inline text elements, Contextual Text Colors
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.
Contextual Text Colors
This paragraph is styled with class "text-muted".
This paragraph is styled with class "text-primary".
This paragraph is styled with class "text-success".
This paragraph is styled with class "text-info".
This paragraph is styled with class "text-warning".
This paragraph is styled with class "text-danger".
This paragraph is styled with class "text-inverse".
This paragraph is styled with class "text-purple".
This paragraph is styled with class "text-pink".
This paragraph is styled with class "text-black".
This paragraph is styled with class "text-violet".
Unordered
- 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
- 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
- Lorem ipsum dolor sit amet,
- Quisque varius enim at risus ultrices,.
- Maecenas placerat mauris id.
- In pellentesque lacus sit .
- Sed dapibus nisl eget tempor.
Unstyled
- 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
Address, Blockquotes, Alignment
Address
Twitter, Inc.1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Full Name
first.last@example.com
Blockquotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Alignment
Left aligned text.
Center aligned text.
Right aligned text.
Justified text.
No wrap text.
Description
- 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
- 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.