Cover

Default Cover

The Cover is a top page component that should be used to display important information and to make the user scroll down the page. It is composed of two variants. The first one is a full width background image with an overlay on top and the second one is a Carousel variant that can display several images in the same area.

Carousel variant

On top of the page, we recommend using a Cover rather than a Carousel because it poses accessibility issues for keyboard and screen reader users that simply cannot be adequately addressed by markup or hacks. Carousels are a poor way to showcase important content at the top of the page. Most of the time content delivered with carousels is missed by the users and few interact with them. It is best suited in a section of the middle of the page to make the content more dynamic and to redirect to other pages.

Best Practices

• Favor Covers rather than Carousels on top of the page.
• Carousels can be used inside the page to showcase less important content or an image gallery.
• This component should include an image with an overlay. Other components can be displayed inside like headings, text, buttons, icons etc.