• Getting Started
  • Writing for UQ Drupal
  • Configuring site title
  • Site Editor Training
  • Planning your website
  • Administrator view
  • Alert boxes
  • Content Writing
  • Building a homepage
  • Writing for the Web
  • Site Coordinator Training
  • Banners
  • User types
  • Legacy system support section
  • Accessibility
  • Blocks
  • UQ School Template Training
  • Logging in
  • Administration
  • Brand Colours
  • Views
  • Design & Build
  • Images for the web
  • Buttons
  • Display Suite
  • UQ Base theme: Style Guide
  • Equal height elements
  • Search Engine Optimisation
  • Image Styles
  • For Developers
  • DS Inception
  • Forms
  • Drupal Glossary
  • Creating a sandbox
  • Icons
  • How to create banners
  • Training
  • List with lead
  • Google Analytics
  • UQ School Theme: Style Guide
  • Panels
  • UQ Base Regions
  • Utility classes
  • UQ Base theme
  • Quicktabs
  • Webforms
  • Tables
  • Toggle
  • Typography
  • UQ News RSS feeds
  • Block grid
  • Demo form
  • Date and Time
  • Grid
  • Menus
  • Name space standards
  • Theme settings
  • URL patterns
  • Central data
  • Maintenance mode
  • Site search
  • Developer Virtual Machine
  • Developer Contribution Workflow
  • UQ Base theme updates
  • Modules available for use in UQ Drupal
  • Migration Classes
  • DS Inception V3
  • Automated Tests
  • Typography

    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.

    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]

    Previous (Toggle)Next (UQ News RSS feeds)