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!

Name

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

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