Aside
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.
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
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>