Skip links and keyboard navigation

SWE components

Aside

On this page

Overview

An aside is used for content that complements the main content but doesn't have the same priority as the main content.

Examples include:

  • related initiatives
  • latest news
  • upcoming events
  • contact details
  • tips
  • customer stories
  • case studies.

It should remain meaningful when separated from the main content.

Default

To add an aside, simply add <aside id="qg-secondary-content"> after the #qg-primary-content element, then add one or more asides.

If multiple pages are to have the same aside, it is advised that you use a server-side include (SSI), or some other dynamic method to include the file from assets/includes-local/asides/.

Each aside should start with a <h2> element.

View example in Storybook

Code

<aside id="qg-secondary-content">
    <div class="qg-aside" role="complementary">
        <h2>Contact</h2>
        <p>General enquiries <a href="#">13 QGOV (13 74 68)</a></p>
    </div>
</aside>

With an icon

View example in Storybook

Code

<aside id="qg-secondary-content">
    <div class="qg-aside" role="complementary">
        <h2><span class="fa fa-lightbulb-o fa-2x" aria-hidden="true"></span>Online services</h2>
        <p>We have a range of services that you can access online. You can:</p>
        <ul>
            <li><a href="#">take the practice road rules test</a></li> 
            <li><a href="#">book a practical driving test</a></li>
            <li><a href="#">take the motorcycle knowledge test</a>.</li>
        </ul>
    </div>
</aside>

With a full-width image

Recommended image dimensions are 961 x 541 pixels (an aspect ratio of 16:9). In a viewport of  991px, the image displays at its maximum width of 961 pixels.

Code

<aside id="qg-secondary-content">
    <div class="qg-aside" role="complementary">
        <h2>Wheel of Brisbane</h2>
        <p>
            <img src="https://picsum.photos/961/541" class="img-fluid" alt="default responsive image example">
        </p>
    </div>
</aside>

With a center-aligned image

  • Uses the <figure> element which displays at a maximum width of 374 pixels.
  • Recommended image dimensions are 374 x 210 pixels (an aspect ratio of 16:9).

Code

<aside id="qg-secondary-content">
    <div class="qg-aside" role="complementary">
        <h2>Wheel of Brisbane</h2>
        <figure class="qg-fig qg-unstyled">
            <img src="https://picsum.photos/374/210">
        </figure>
    </div>
</aside>
Last updated:
28 June 2024