The hero spans across the full width of the page and showcases a powerful visual or message. It's designed to capture the user's attention and make a solid first impression, often serving as an introduction to the website's content or brand.
Hero usage in CS+
|
Component |
Usage |
Placement |
User action |
|---|---|---|---|
|
Hero |
On a website, when there is a need to grab the user's attention and create a strong visual impact, such as on a homepage or landing page. |
At the top of the page. |
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. |
|
Similar components |
Usage |
Placement |
User action |
|---|---|---|---|
|
Same as above. |
Anywhere on the grid. |
Same as above. |
Anatomy
Structure
Hero structure map. The structure of the hero is the same for all screen sizes.
|
1. |
Hero container |
The container where all of the hero's atoms will live. |
|
2. |
Hero background |
Hero background (imagery or video) - it is mandatory to apply an opacity mask with 50% transparency on top of the background, in the colour #212833. |
|
3. |
Hero content |
Content div where the headline, title and CTAs will live. |
|
4. |
Hero headline |
Hero headline (we recommend a maximum of 35 characters, for best practice). |
|
5. |
Hero description |
A small paragraph of text (we recommend a maximum of approx. 140 characters, for best practice). This element is optional. |
|
6. |
Call to action |
Hero calls to action - there can be a minimum of zero and a maximum of two calls to action. |
|
7. |
Scroll text |
Hero's scroll hint - this component is optional. |
Sizes and Spaces
Sizes and spaces for desktop
Sizes and spaces for tablet
Sizes and spaces for mobile
Properties
|
Property |
Value |
Description |
|---|---|---|
|
Device |
desktop tablet mobile |
Changes the design to the desktop, tablet or mobile view |
|
Description |
true false |
Will display or hide the description paragraph |
|
Actions |
none one two |
An array of maximum 2 actions |
|
ScrollText |
true false |
Will display or hide the scroll hint component |
Behaviour
Responsiveness
Hero responsiveness behaviour
Max-width on each breakpoint
|
Component |
Extra-large >1366px |
Large 1366px |
Medium 1024px |
Small 768px |
Extra-small 428px |
|---|---|---|---|---|---|
|
Hero |
100% |
100% |
100% |
100% |
100% |
|
Hero content |
8 columns |
8 columns |
100% |
100% |
100% |
Note: The 8-column width is relative to the 12-column grid that's applied to the hero on the desktop version.
Max-height on each breakpoint
|
Component |
Extra-large >1366px |
Large 1366px |
Medium 1024px |
Small 768px |
Extra-small 428px |
|
Hero |
100% |
100% |
100% |
100% |
100% |
|
Hero content |
70% |
70% |
70% |
70% |
70% |
Guidelines
✅ Do
Use concice, scannable language that's easy to read and understand.
⛔️ Don't
Don't apply more than two calls to action.
⛔️ Don't
Never remove the opacity mask on top of the background.
⛔️ Don't
Don't apply different sizes or styles.
⚠️ Caution
Avoid lengthy text, to ensure a concise and visually appealing design that effectively captures the viewer's attention and delivers the intended message quickly.