Text
Paragraphs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed risus metus. Quisque eleifend ultrices dolor at suscipit. Cras ut justo sagittis, interdum erat at, finibus lorem. Aliquam at sem pulvinar, sagittis diam blandit, ultrices dolor. Donec tincidunt, urna at efficitur rutrum, elit turpis dignissim sem, ut pharetra eros eros quis libero. Donec maximus tincidunt nibh vel malesuada. Donec nec ligula aliquet, interdum leo eget, cursus tellus. Praesent ac nisi a sapien vehicula efficitur dapibus eget erat. Morbi in dui pretium erat egestas iaculis. Aenean quis metus purus.
Blockquotes
Donec augue risus, luctus non elit a, ullamcorper aliquam magna. Aliquam hendrerit turpis ut tincidunt rutrum. Suspendisse potenti. Donec augue erat, consectetur pulvinar luctus quis, dictum at nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id dui sapien. Nullam quis velit sed neque convallis viverra. Vestibulum nec orci sit amet mi ultrices imperdiet rutrum at velit. Sed non purus luctus, tempor magna quis, eleifend elit. Cras porta vulputate lorem, id ultrices est pretium id. Etiam lobortis libero id felis condimentum, in eleifend dui faucibus. Integer erat justo, dapibus vel convallis in, tempor in ante. Ut ac tellus hendrerit, mattis erat sit amet, sodales ante.
Hello!
Lists
Definition list
- Definition List Title
- This is a definition list division.
Ordered List
- List Item 1
- List Item 2
- List Item 3
Unordered List
- List Item 1
- List Item 2
- List Item 3
Horizontal rules
Tables
| Table Heading 1 | Table Heading 2 | Table Heading 3 | Table Heading 4 | Table Heading 5 |
|---|---|---|---|---|
| Table Footer 1 | Table Footer 2 | Table Footer 3 | Table Footer 4 | Table Footer 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
Table with strips. Just add the striped class to <table>.
| Table Heading 1 | Table Heading 2 | Table Heading 3 | Table Heading 4 | Table Heading 5 |
|---|---|---|---|---|
| Table Footer 1 | Table Footer 2 | Table Footer 3 | Table Footer 4 | Table Footer 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
Code
Keyboard: WASD
Inline: console.log("Hello, world!");
Sample: This is sample output from a computer program.
Pre-formatted text
console.log("Hello, world!");
console.log("Hello, world!");Inline elements
Strong is used to indicate strong importance.
This text has added emphasis.
The b element is stylistically different text from normal text, without any special importance.
The i element is text that is offset from the normal text.
The u element is text with an unarticulated, though explicitly rendered, non-textual annotation.
This text is deleted and This text is inserted.
This text has a strikethrough.
Superscript®.
Subscript for things like H2O.
This small text is small for for fine print, etc.
Abbreviation: HTML
This text is a short inline quotation.
This is a citation.
The dfn element indicates a definition.
The mark element indicates a highlight.
The variable element, such as x = y.
The time element:
Embedded
Images
No <figure>
With <figure>, no <figcaption>
With <figure>, with <figcaption>
Video
Progress
Forms
Components
Nav
Tabs
Cards
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius hendrerit ligula. Nunc neque dui, pulvinar at nisi quis, sagittis imperdiet justo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius hendrerit ligula. Nunc neque dui, pulvinar at nisi quis, sagittis imperdiet justo.
Proin congue rhoncus volutpat. Nam egestas leo lorem, eu facilisis nunc ornare vitae. Phasellus consectetur, tellus ac bibendum aliquet, ligula mi porta felis, sed iaculis dolor tortor at leo.
Tags
One
Two
Three
Small
Large
Utilities
Text colors
Primary Text
Secondary Text
Tertiary Text
Error Text
Background colors
Primary Background
Secondary Background
Tertiary Background
Error Background
Responsive utilities
Icons
Grids
.col
.col
.col
.col
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-2
.col-2
.col-2
.col
.col-3
.col-3
.col-3
.col-3
.col-4
.col-4
.col-4
.col-5
.col-5
.col
.col-6
.col-6
.col-7
.col
.col-1
.col-8
.col
.col-1
.col-9
.col
.col-1
.col-10
.col
.col-11
.col
.col-12
Responsive grids:
.col-12.col-6-md.col-4-lg
.col-6.col-3-md.col-4-lg
.col-6.col-3-md.col-4-lg
.col.col-6-lg
.col.col-3-lg
.col.col-3-lg