Headings

Standard headings

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading

Add .serif class to headings

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading

Underlined Heading

.underline

Paragraph

Curly blue fractal like object of unknown origin. Source: flickr

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Lorem ipsum dolor sit amet, emphasis nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Subheading (h2)

Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Subheading (h2)

Consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

Sub subheading (h4)

Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus.

Sub subheading (h4)

Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

[top]


Links are styled automatically.

For links to other websites add class="external" to indicate it will take the user away from the current website. It is recommended to use this method rather than opening all links in a new window, let the user decide for themselves if they want to open in a new window/tab.

<a href="http://www.google.com" class="external">Link to external website</a>
http://www.google.com


List types

Default ordered list (ol)

  1. List Item 1
  2. List Item 2
    1. Nested List Item
    2. Nested List Item
    3. Nested List Item
  3. List Item 3
    1. Nested List Item
    2. Nested List Item
    3. Nested List Item

Default unordered list (ul)

  • List Item 1
  • List Item 2
    1. Nested Ordered List Item
    2. Nested Ordered List Item
    3. Nested Ordered List Item
  • List Item 3
    • Nested List Item
    • Nested List Item
    • Nested List Item

[top]

Four column nested

ul.disc
  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item
ul.circle
  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item
ul.square
  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item
ul.arrow
  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item
ul.inline
  • List item no padding, can be used with any of the previous lists.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item
ul.no-bullet
  • List item no padding, can be used with any of the previous lists.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item

Unordered list with dividers

.divider goes on the <ul> or <ol> and .dark .dashed .thick .no-top .no-tail can be used for additional styling.

  • List Item 1
  • List Item 2
    1. Nested Ordered List Item
    2. Nested Ordered List Item
    3. Nested Ordered List Item
  • List Item 3
    • Nested List Item
    • Nested List Item
    • Nested List Item

Definition list

Title:
Definition list.
Purpose:
Definition lists consist of two parts: a term and a description. To present key/value data in this format, it has been overlooked for years. There are some limitations and for example, no block level tags should be used.
Why is this:
Well, possibly due to the rather obscure dl dd and dt tags. Go look it up on w3schools
Anything else:
Just that we should use this appropriately rather than a table. Key value pairs and tables are two completely different things.

Definition list horizontal

Title:
Definition list.
Purpose:
Definition lists consist of two parts: a term and a description. To present key/value data in this format, it has been overlooked for years. There are some limitations and for example, no block level tags should be used.
Why is it under utilised?:
Well, possibly due to the rather obscure dl dd and dt tags. Go look it up on w3schools
Anything else:
Just that we should use this appropriately rather than a table. Key value pairs and tables are two completely different things.

abbr, acronym, pre, code, sub, sup, etc.

This is a sentence with an example of superscript and subscript. It was written by Web Services (bold the author), authors of This Website About Drupal (and <cite> the publication). At UQ we often refer to ourselves in acronym form and this can be marked-up like this in HTML <acronym>, or like this UQ in HTML 5 <abbr>. It's also handy for things like AVE.

pre
defines preformatted text which is great for code examples or specific indenting.

You can use it with <code> to display formatted code examples like this using class="markup" and <pre>

<table summary="This is a table to demonstrate tables.">
	<thead>
		<tr>
			<th scope="col">Table header 1</th>
			<th scope="col">Table header 2</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td>Table footer 1</td>
			<td>Table footer 2</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>Table data 1</td>
			<td>Table data 2</td>
		</tr>
	</tbody>
</table>

Blockquote

"This stylesheet is going to help so freaking much."

-Blockquote

The price of greatness is responsibility. This is a class="pullquote offset-by-one" style example. It stands out and is awesome.

Winston Churchill

[top]