Correct/incorrect
Overview
Highlight correct/incorrect page content with this component.
Short form
Use the short form when your correct/incorrect examples express a simple idea or use a minimum amount of content (e.g. a single word or sentence fragment).
Code
<span class="qg-correct">You can use this service to change your home address.</span> <span class="qg-incorrect">You cannot use this service to change your business address.</span>
Long form
Use the long form when your correct/incorrect examples express a more complex idea or use a larger amount of content (e.g. multiple sentences).
Eligible drink containers between 150mL and 3L:
- aluminium
- glass
- plastic
- steel
- liquid paperboard.
Non-eligible drink containers:
- plain milk containers
- glass containers which have contained wine or pure spirits
- large containers (1L or more) which have contained flavoured milk, pure juice, cask wine or cask water
- cordial or vegetable juice containers
- sachets above 250ml which have contained wine
- registered health tonics.
Code
<div class="qg-correct" alt="Correct example"> <p>Bike paths make it safer and easier to cycle around. Using bike paths:</p> <ul> <li>gives you access to facilities like bike shelters</li> <li>allows you to choose routes for different purposes (such as exercise or sightseeing)</li> <li>reduces greenhouse gases and traffic congestion.</li> </ul> </div> <div class="qg-incorrect" alt="Incorrect example"> <p>Bike paths make it safer and easier to cycle around. Using bike paths: </p> <ul> <li>Gives you access to facilities like bike shelters.</li> <li>Allows you to choose routes for different purposes (such as exercise or sightseeing).</li> <li>Reduces greenhouse gases and traffic congestion.</li> </ul> </div>
In a table
You can apply correct/incorrect classes to individual table cells. Use this when you want to custom specify correct/incorrect cells.
Acronyms | Accessibility |
---|---|
A.T.O | Eg. |
ATO | Example |
Not this | This |
---|---|
Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi culpa dignissimos. |
Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet |
Code
<!-- Applied to rows --> <table title="acronym examples" class="table"> <thead> <tr> <th> Acronyms </th> <th> Accessibility </th> </tr> </thead> <tbody> <tr> <td class="qg-incorrect"> A.T.O </td> <td class="qg-incorrect"> Eg. </td> </tr> <tr> <td class="qg-correct"> ATO </td> <td class="qg-correct"> Example </td> </tr> </tbody> </table> <!-- Applied to columns --> <table title="acronym examples" class="table qg-correct-incorrect"> <thead> <tr> <th> Not this </th> <th> This </th> </tr> </thead> <tbody> <tr> <td> Lorem ipsum dolor sit amet </td> <td> Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi culpa dignissimos. </td> </tr> <tr> <td> Lorem ipsum dolor sit amet </td> <td> Lorem ipsum dolor sit amet </td> </tr> </tbody> </table>