Banners can be static or dynamic and can contain text, images, or both. They are often designed to be eye-catching to draw the visitor's attention and can be used to direct visitors to other parts of the website or to external links. Banners can also be used for branding purposes, to display a company logo or tagline, for example.
Banner usage in CS+
|
Component |
Usage |
Placement |
User action |
|
Banner |
Anywhere on a website, when there is a need to grab the user's attention and create a strong visual impact. |
Anywhere on the grid |
Encourages further exploration of the website or directs the user to a specific call-to-action, such as signing up for a service or making a purchase. |
Desktop - Anatomy
Structure
Full background banner on desktop
Split view banner on desktop
|
1. |
Image background |
On the full-width version, the background image has an opacity mask with 50% transparency applied on top.
If negative=false, then#FFFFFF; If negative=true, then#212833.
The half and third layout versions don't have an opacity mask. |
|
2. |
Content |
Banner content, vertically aligned and horizontally left aligned. |
|
3. |
Pill |
The pill component is used to identify the category of information highlighted on the banner.
This component is optional. |
|
4. |
Headline |
Banner headline/title. |
|
5. |
Paragraph |
Small paragraph/sub-title. |
|
6. |
Call to action |
There can be one (primary), two (primary on the left and secondary on the right) or none.
If negative=true, then we must use the negative version of the buttons. We can never display more than two buttons.
This component is optional. |
|
7. |
Content background |
Background of the content section on the half and third layout versions. |
Sizes and Spaces
Sizes and spacing for desktop, on the full-background version
Sizes and spacing for desktop, on the half layout version
Sizes and spacing for desktop, on the third layout version
Mobile - Anatomy
Structure
Full background banner on mobile
Split view banner on mobile
|
1. |
Pill |
The pill component is used to identify the category of information highlighted on the banner.
This component is optional. |
|
2. |
Headline |
Banner headline/title. |
|
3. |
Paragraph |
Small paragraph/sub-title. |
|
4. |
Call to Action |
There can be one (primary), two (primary on the left and secondary on the right) or none.
If negative=true, then we must use the negative version of the buttons. We can never display more than two buttons.
This component is optional. |
|
5. |
Image background |
On the full-width version, the background image has an opacity mask with 50% transparency applied on top.
If negative=false, then #FFFFFF; If negative=true, then #212833.
The half and third layout versions don't have an opacity mask. |
|
6. |
Content background |
Background of the content section on the third layout version. |
Sizes and Spaces
Sizes and spacing for mobile, on the full layout version
Sizes and spacing for mobile, on the third layout version
Properties
|
Property |
Value |
Description |
|
Device |
desktop mobile |
Changes the design to the desktop or mobile view |
|
Layout |
full half third |
Picks the layout of the Content and Image |
|
Actions |
none one two |
An array of maximum 2 actions |
|
Reverse |
true false |
Reverses the position of the Image and the Content |
|
Negative |
true false |
Changes the colours to a black background (#212833) and white elements |
Behaviour
Responsiveness
Banner adapting to reference breakpoints
Max-width on each breakpoint
|
Component |
Extra-large >1366px |
Large 1366px |
Medium 1024px |
Small 768px |
Extra-small 428px |
|
Banner |
100% |
100% |
100% |
100% |
100% |
|
Banner content |
50% |
50% |
100% |
100% |
100% |
Note: The max-width % is relative to the content div where the banner is placed.
Min-height on each breakpoint
|
Component |
Extra-large >1366px |
Large 1366px |
Medium 1024px |
Small 768px |
Extra-small 428px |
|
Banner |
460px |
460px |
460px |
460px |
460px |
|
Image background |
n/a |
n/a |
n/a |
n/a |
30vh |
Note: On the mobile third layout version, the image background's height is fixed at 30vh.
Guidelines
Use concice, scannable language that's easy to read and understand.
When chosing the background, consider the focal point of the image to avoid the text area.
Don't apply different styles.
Don't hide mandatory elements.
Avoid lengthy text, to ensure a concise and visually appealing design that effectively captures the viewer's attention and delivers the intended message quickly.