Code examples

Use semantic HTML

Typical Tidbit markup consists of an SVG icon, heading, paragraph text, and a link.

Standard Tidbit

<div class="tidbit">
    <div class="icon">
        <svg role="img" aria-label="Info" xmlns="http://www.w3.org/2000/svg" height="1.5em" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>
    </div>
    <div class="content">
        <h2 id="tidbit-heading">Cats are amazing creatures</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima dolorum repudiandae sit molestias aperiam, quam pariatur qui, deleniti quas porro consectetur sed nulla, veniam provident eveniet officia sint error magni!</p>
        <a href="#" aria-describedby="tidbit-heading" class="tertiary">Learn more</a>
    </div>
</div>

Cats are amazing creatures

Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima dolorum repudiandae sit molestias aperiam, quam pariatur qui, deleniti quas porro consectetur sed nulla, veniam provident eveniet officia sint error magni!

Learn more

Developer notes

  • Icon: Ensure that the info icon has a text alternative. Add role="img" and aria-label="Info" to the SVG.
  • Heading: Ensure the bold text that leads the Tidbit paragraph text is a heading element. Consider the hiearchy of the page when choosing the heading level.
  • Link: If the link in the Tidbit is a generic “Learn more” “More info” style link, ensure that it is programmatically associated with the nearby heading with aria-describedby. The aria-describedby value will the the ID found on the heading element at the top of the Tidbit.

Tidbit with no heading

<div class="tidbit">
    <div class="icon">
        <svg role="img" aria-label="Info" xmlns="http://www.w3.org/2000/svg" height="1.5em" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>
    </div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima dolorum repudiandae sit molestias aperiam, quam pariatur qui, deleniti quas porro consectetur sed nulla, veniam provident eveniet officia sint error magni!</p>
        <a href="#" class="tertiary">Learn more about cats</a>
    </div>
</div>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima dolorum repudiandae sit molestias aperiam, quam pariatur qui, deleniti quas porro consectetur sed nulla, veniam provident eveniet officia sint error magni!

Learn more about cats

Developer notes

  • Ensure the link text is meaningful. Avoid generic “Learn more” “Read more” links when there is no heading.
<div class="tidbit">
    <div class="icon">
        <svg role="img" aria-label="Info" xmlns="http://www.w3.org/2000/svg" height="1.5em" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>
    </div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima dolorum repudiandae sit molestias aperiam, quam pariatur qui, <a href="#">deleniti quas porro</a> consectetur sed nulla, veniam provident eveniet officia sint error magni!</p>
    </div>
</div>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima dolorum repudiandae sit molestias aperiam, quam pariatur qui, deleniti quas porro consectetur sed nulla, veniam provident eveniet officia sint error magni!

Tidbit - Error example

<div class="tidbit error">
    <div class="icon">
        <svg role="img" aria-label="Error" height="1.5em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>
    </div>
    <div class="content">
        <h2 id="tidbit-heading-error">Ooops! Something is not right.</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima dolorum repudiandae sit molestias aperiam, quam pariatur qui, deleniti quas porro consectetur sed nulla, veniam provident eveniet officia sint error magni!</p>
        <a href="#" aria-describedby="tidbit-heading-error" class="tertiary">Learn more</a>
    </div>
</div>

Ooops! Something is not right.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima dolorum repudiandae sit molestias aperiam, quam pariatur qui, deleniti quas porro consectetur sed nulla, veniam provident eveniet officia sint error magni!

Learn more

Tidbit - Caution example

<div class="tidbit caution">
    <div class="icon">
        <svg role="img" aria-label="Caution" height="1.5em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>
    </div>
    <div class="content">
        <h2 id="tidbit-heading-warning">Are you sure you want to do that?</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima dolorum repudiandae sit molestias aperiam, quam pariatur qui, deleniti quas porro consectetur sed nulla, veniam provident eveniet officia sint error magni!</p>
        <a href="#" aria-describedby="tidbit-heading-warning" class="tertiary">Learn more</a>
    </div>
</div>

Are you sure you want to do that?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima dolorum repudiandae sit molestias aperiam, quam pariatur qui, deleniti quas porro consectetur sed nulla, veniam provident eveniet officia sint error magni!

Learn more

Developer notes

  • Ensure the SVG icon has a meaningful text alternative. e.g. aria-label="Error" or aria-label="Caution"

Name

  • The icon is an informative image and should have a text alternative of “Info”, “Error”, “Caution”

Role

  • The “i” icon is an image due to the use of role="img" on the SVG.
  • The bold text at the top of the Tidbit owns a role of heading due to the use of an h2 element.

Documentation