Pre-defined HTML headings from <h1> to <h6>:
Headings
Body Copy
Paragraphs
Global default font-size is 16px, with a line-height of 22px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of 10px.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
A .lead paragraph that stands out:
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Emphasis
Make use of tags <strong>, <small>, and <em> for additional styles. <strong> formemphasising a snippet of text with a heavier font-weight. <small> for de-emphasising inline or blocks of text. <em> for emphasising a snippet of text with italics.
This line of text contains strong text, and small text, and italicised text.
Blockquotes
Use <blockquote> for quoting blocks of content from another source within the document:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Author and Date
Abbreviations
Stylized implementation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <title> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.
An abbreviation of Hyper Text Markup Language is HTML.
Address
Use <address> to present contact information:
Daemon
404/46A Macleay Street
Potts Point, NSW 2011
P: +61 2 8090 9394
E: info@daemon.com.au
404/46A Macleay Street
Potts Point, NSW 2011
P: +61 2 8090 9394
E: info@daemon.com.au
Lists
Unordered
Unordered list <ul>:
- Excepteur sint occaecat cupidatat non proident
- Sunt in culpa qui officia deserunt
-
Mollit anim id est laborum lLorem ipsum dolor sit
- Excepteur sint occaecat cupidatat non proident
- Sunt in culpa qui officia deserunt
- Mollit anim id est laborum lLorem ipsum dolor sit
- Amet consectetur adipisicing elit, sed do eiusmod tempor
- Incididunt ut labore et dolore magna aliqua
Ordered
Ordered list <ol>:
- Excepteur sint occaecat cupidatat non proident
- Sunt in culpa qui officia deserunt
- Mollit anim id est laborum lLorem ipsum dolor sit
- Amet consectetur adipisicing elit, sed do eiusmod tempor
- Incididunt ut labore et dolore magna aliqua
Unstyled
A list with list-style set to none:
- Excepteur sint occaecat cupidatat non proident
- Sunt in culpa qui officia deserunt
- Mollit anim id est laborum lLorem ipsum dolor sit
- Amet consectetur adipisicing elit, sed do eiusmod tempor
- Incididunt ut labore et dolore magna aliqua
Inline
Place all list items on a single line with inline-block and some light padding.
- Excepteur
- Sunt
- Mollit
- Amet
- Incididunt
Description
A list of terms with their associated descriptions. <dl>
- 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
A default table .table:
| 1 | Second Column | Third | Final |
|---|---|---|---|
| A Value | Some more longer values | 1,000 | NSW |
| Another | Lorem ipsum dolor sit amet | 3,081 | ACT |
| Repeated | Sed do eiusmod tempor incididunt ut labore | 910 | QLD |
| Again | Et dolore magna aliqua | 80,310 | VIC |
.table-striped adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-8).
.table-hover enables a hover state on table rows within a <tbody>.
| 1 | Second Column | Third | Final |
|---|---|---|---|
| A Value | Some more longer values | 1,000 | NSW |
| Another | Lorem ipsum dolor sit amet | 3,081 | ACT |
| Repeated | Sed do eiusmod tempor incididunt ut labore | 910 | QLD |
| Again | Et dolore magna aliqua | 80,310 | VIC |