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.
- 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
- Chevron Left: Add
f-previousclass name to create a previous button with chevron pointing left.
- Chevron Right: Add a
f-nextclass name to create a new button with chevron pointing right.
- Large: Add a
f-largeclass name to create a large button.
- Schema definition: The flipper schema defines the acceptable configurations, requirements, and options for each component.
Code and preview
<button class="c-flipper f-previous" aria-label="See previous"></button>
<button class="c-flipper f-next" aria-label="See next"></button>
<button class="c-flipper f-previous" aria-hidden="true" tabindex="-1"></button>
<button class="c-flipper f-next" aria-hidden="true" tabindex="-1"></button>
<button class="c-flipper f-previous f-large" aria-label="See previous"></button>
<button class="c-flipper f-next f-large" aria-label="See next"></button>