Billboard
We use billboards to present the most important messaging/action to the user. Billboard is our main promotional molecule and therefore should only be used once on a page, at the top.
The srcSet prop is optional, and allows you to provide the image at other sizes, eg. for high
pixel density (retina) screens. If a srcSet is not specified, the default image will be used for
all devices / screen sizes.
Instructions for designers:
Images for the billboard are created on a 1200px x 720px canvas.
Due to the way images resize and get cropped, we aim to keep the focus of any content to the left hand side of the image. In order to support both standard and retina displays, we export two images for build, one at full size and another at 50%.
Join online courses and learn new skills
Endless possibilities
Unlock new opportunities with unlimited access to hundreds of online short courses for a year.
Implementation
| Name | Description | Default |
|---|---|---|
| src* | string | - |
| srcSet | This param relies on the imageWidth prop to be set dynamically to work. If hardcoded, the other varients won't showstring | - |
| imageWidth* | string | - |
| imageHeight* | string | - |
| hasHiddenImageOnSmallScreens | boolean | - |
| imageContainerClassNameOverrides | string | - |