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