Narrow promo

The narrow promo is a visual promotion component designed to appear as a compact full-width banner across the page, and used to promote awards, events or other highlighted content.

It combines a small leading image, central text, and an optional call-to-action button.

The text is restricted to 180 characters to ensure this component is used as intended as a highlight - it is not intended for use with large blocks of text.

This component is designed to be used sparingly, ideally to split up large bodies of text or other larger blocks. It should not be overused within a single page, and certainly not stacked one above the other.

The component is used with the fade-in function to add the component as it scrolls into view.

Key features

• full width banner
• on mobile / narrow screens, the cta (if used) will appear below the feature text
• leading image (required)
• short featured text (required)
• call to action button (optional)
• optional background colour (drop down list of 12 options from the UoD palette)
• optional custom background colour (overrides standard colours) entered as a 6-digit hexadecimal code (without the leading hash symbol, this is added by the code)
• option for black or white text for optimum contrast with the background colour used
• if no colour options are selected, the default is a black background with white text

Image guidance

• To maintain the compact shape of this component, the image height is restricted to a maximum of 150px, so it is not necessary to use large image files 
• On wide screens, the image is vertically positioned centrally to extend above and below the banner height
• On mobile / narrow screens, the image is shown extending above the component
• All images must be optimised using TinyJPG before uploading to T4

Examples - TEF Gold award and Ramadan: