In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

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.

General guidelines

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.
Cover01
Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top