Component overview
The Banner component offers an alternative, full-width header option, with a background image, overlay color, main content field, and a secondary text field for buttons, short text or other featured information.
- Banners should be used primarily on Section Fronts: Banners are designed to be used on Section Fronts, but may be used on Section Detail, Profile Detail and Degree Detail page schemas.
- Banners may be used as alternative headers: Banners may be used as headers on Section Fronts because there is an H1 option for the title field.
- Banners may be used without content: Banners may be used with a title only and no body copy.
- The component flexes to the size of the text used: Consider how much text you are using and how that will affect the overall size and appearance of the Banner component.
- Consider the background image you select: It should match the purpose of the content within the Banner component.
- Background image size: The background image must be 1200x500px.
- You may use different color overlays on the Banner component: The Banner component allows for blue or gray color overlays. Think about how your color choices convey information and may look on different devices (e.g., mobile, desktop).
- You cannot grayscale the background image: Be mindful of how your text looks with the selected image and overlay color because you cannot grayscale the background image (see Callout component for that option).
- Use H-tags properly: The Banner component does allow for H1 tag use. Please do not introduce a second H1 on a Section Detail page by using a banner.
- Alt-text must be included with the background image: Although the Banner component uses a background image, users must include an approved alt-text for the image.
The required image size for Banner components is 1200 x 500 px.
BANNER: UNIT NAME - Purpose.
- Example: BANNER: JOUR - Future Students
Example Banner components
Example #1
Banner, with blue overlay and main description text
Example #2
Banner, with gray overlay and main description text
Example #3
Banner, with blue overlay, main description and left description text
Example #4
Banner, with gray overlay, main description and left description text