Skip to main content

Sequence indicator

The sequence indicator shows the user where they are in a sequence of content. It also shows the total number of content views available.

Example

Sequence indicator showing the first item, on the light theme

Best practices

Use underneath content which the user can "flip" through. In other words, the entire sequence of content is viewable within the same page, but not all visible at one time.

Do

  • The recommended number of indicators is a minimum of 2 and a maximum of 5.
  • The flipper always accompanies sequence indicators (but the flipper can also exist on its own without sequence indicators).

Don’t

  • Don’t use to indicate the page a user is currently on, use the pagination component instead.

Also known as

Indicator dots

Related

Carousel
Hero
Product placement

Accessibility

  • Roles: role="tablist" to be used to inform screen reader users there is a navigatable list of tabs.
  • Aria label: aria-label to be used to inform screen reader users what content is on the slide.
  • Aria expanded: aria-expanded to be used to indicate open or closed drawers.
  • Aria controls: aria-controls to be used to create an association between the drawer and the contents within.

Development

  • Schema definition: The sequence-indicator schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Default

<div class="c-sequence-indicator" role="tablist">
    <button role="tab" aria-selected="true" aria-label="sequence-indicator-label" aria-controls="sequence-indicator-label-one" title="sequence-indicator-label"></button>
    <button role="tab" aria-selected="false" aria-label="sequence-indicator-label" aria-controls="sequence-indicator-label-two" title="sequence-indicator-label"></button>
    <button role="tab" aria-selected="false" aria-label="sequence-indicator-label" aria-controls="sequence-indicator-label-three" title="sequence-indicator-label"></button>
    <button role="tab" aria-selected="false" aria-label="sequence-indicator-label" aria-controls="sequence-indicator-label-four" title="sequence-indicator-label"></button>
    <button role="tab" aria-selected="false" aria-label="sequence-indicator-label" aria-controls="sequence-indicator-label-five" title="sequence-indicator-label"></button>
    <button role="tab" aria-selected="false" aria-label="sequence-indicator-label" aria-controls="sequence-indicator-label-six" title="sequence-indicator-label"></button>
</div>