Skip to main content


The flipper component, normally used in pairs, are buttons used to scroll or page through a sequence of content in a given area.


Flipper on a default theme

Best practices

Use flipper components to page through content blocks one at a time or to scroll through content. They should only be used where a swipe is used on a touch screen. This means that flipper components should be hidden on a mobile device with a touch screen.

The flipper component never accepts keyboard focus. Similarly, keyboard tabbing will not give focus to a flipper.

Flipper components do not have any functionality built in. They are typically used as building blocks for more complex components or modules, like carousel.


  • Before using flipper, consider using carousel instead.
  • A good example of using flipper outside of carousel would be to use it to scroll through a menu.


  • Do not use a flipper to go to new pages, use the pagination component instead.
  • Do not add a text label to the flipper button. It uses glyphs only, by design.


Sequence Indicator


  • Aria Label: Use aria label to add additional information for screen readers since there is no content naturally displayed on the page.
  • Hidden Completely: When either the left or right flipper is not valid based on user interaction aria-hidden="true" should be used to not announce to for users of screen readers.
  • Hidden for Keyboard: Flippers can be made hidden from keyboard focus by adding a tabindex="-1".


  • Chevron Left: Add f-previous class name to create a previous button with chevron pointing left.
  • Chevron Right: Add a f-next class name to create a new button with chevron pointing right.
  • Large: Add a f-large class name to create a large button.


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

Code and preview

Default previous

<button class="c-flipper f-previous" aria-label="See previous"></button>

Default next

<button class="c-flipper f-next" aria-label="See next"></button>

Default previous (flippers hidden)

<button class="c-flipper f-previous" aria-hidden="true" tabindex="-1"></button>

Default next (flippers hidden)

<button class="c-flipper f-next" aria-hidden="true" tabindex="-1"></button>

Default previous

<button class="c-flipper f-previous f-large" aria-label="See previous"></button>

Default next

<button class="c-flipper f-next f-large" aria-label="See next"></button>