The banner element is a focus area that can adds more focus on links. A banner can only contain links and headers together with image or illustration. There are different versions of the element on how the links are assembled.
Important
The background is always 100% width.
Default
Colors
There are multiple colors that you can use as a background color. These colors are the ones that give the best contrast and allows the content to show best.
White
- #ffffff
- $white
- ods-banner
Yellow
- #f9c66b
- $yellow
- ods-banner--yellow
Blue-light
- #b3f5ff
- $blue-light
- ods-banner--blue-light
Green-light
- #c7f6c9
- $green-light
- ods-banner--green-light
Gray
- #f2f2f2
- $gray
- ods-banner--gray
Beige
- #f8f0dd
- $beige
- ods-banner--beige
2 columns
There are different banner versions that have a different setup on the amount of columns or headings.
Illustration
You can use a illustration or image together with the links if you want the banner to be “softer” and think that the image or illustration gives the component more information.
