Banner
Banners, often referred to as side-by-side banners, may be used to highlight specific content on pages. This banner is often used at the top of mid-level pages to highlight a main call to action on a page.
When to use
- To highlight specific content on pages
When not to use
- For general content
Anatomy
- Image: required element
- Alignment: left or right, in mobile the image will stack with the option to do that as well in tablet
- Image width: 33%, 50% or 66%
- Heading: there should always be a heading and use H2 or H3 and limit to a maximum of 2 lines
- Paragraph/Subhead text: additional text is optional
- Call to actions: call to actions are optional, there can also be multiple if needed
- Background color and border options:
- bright blue 10% background color
- gray 2 background color
- blue background color
- off-white background color
- decorative solid border with white background
Demos & variations
Bright blue 10% background
Gray 2 background
Decorative solid border
Off-white background
Blue background
Image width & alignment
50 / 50 image right aligned
50 / 50 image left aligned
33 / 66 image left aligned
33 / 66 image right aligned
66 / 33 image right aligned
66 / 33 image left aligned
Image specs
Images should be provided at 2x size so they appear sharp on retina monitors. The sizes below are recommended but the height of the banner image may be adjusted if necessary. See more guidance on the image component page.
50/50 banner split: 450 x 350px (2x image size 900 x 700px)
66/33 banner split: 595 x 350px (2x image size 1190 x 700px)
33/66 banner split: 300 x 350px (2x image size 600 x 700px)
Image file size: 250kb or less
Preferred file type: jpg (the component can support .png or .gif files)