Icon & Text Banner

Use Cases:

• Highlight an important link or chunk of information to help it stand apart from the standard page text.
• Provide visual signposts to help users locate, identify, and understand content.
• Give users a clear call to action, which should be the most important link on the page.
• Communicate university-specific information—for example, use a mortarboard icon on a banner to accompany commencement information.
• Highlight callout information such as accolades and statistics.

Guidelines:

• Guidelines for fields:
  • Icon—When you add the banner, it will include a default icon. You can replace the default with an icon from the icon library that makes sense with your text. More information on the Icon Library and Guidelines
  • Heading—Describe what this piece of information is about; try to use words that are at least slightly different from the link. Use short words, aiming for 30 characters or fewer.
  • Paragraph text—Introduce users to this component’s purpose or provide context to unblock any barriers that would prevent them from clicking the CTA. Aim for 25 words or fewer.

Avoid:

• Do not place more than one icon and text banner per page.
• Avoid long (many-lettered) words in the heading field.
• At mobile sizes, more than three lines of text may take up the entire screen, causing the text to wrap too far past the bottom of the icon.
• Do not choose an icon that doesn’t relate to your text content.
• Do not use this pattern as the sole visual focal point of a page.
• Do not alter existing icons or create new ones.

Accessibility:

• Custom icons are designed to be accessible according to WCAG 2.1 AA standards
• Include descriptive alt text for icons in the Label field

Dependencies:

• Icon
• CTA link