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>