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 have a default icon. You can replace it with an icon from the icon library that makes sense with your text. If you have additional questions about icon usage, visit our Icon Guidelines page.
  • 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.

Accessiblity:

• Include descriptive alt text for icons in the Label field

Dependencies:

• Icon
• CTA link