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
Banner, with blue overlay and main description text
Banner, with gray overlay and main description text
Banner, with blue overlay, main description and left description text
Banner, with gray overlay, main description and left description text
Have questions? Need website assistance?
Email us at: cms@unr.edu