Skip links and keyboard navigation

For government has transitioned to using the Queensland Government design system. If you have feedback, please use the form at the bottom of this page.

Learn more

SWE components

Correct/incorrect

On this page

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

View example in Storybook

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

View example in Storybook

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.

View example in Storybook

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>
Last updated:
28 June 2024