Banner

• 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