Callouts—Maroon and Gold
Along with the Folwell component criteria, the best practice and accessibility information included with each component was considered in the design and development phase.
To see the feedback and any changes to the design below, please see this component request on the feedback page.
Callouts are stylized groupings of scannable text.
Usage information will be added when this component is available in Drupal 8.
- A callout should have a header and descriptive text that clearly explains its purpose.
- Callouts are placed near the content that the callout information is related to.
- Callout text is unique in your content. If a callout is removed, then the content is missing important information.
- Use headings that set clear expectations about the callout's purpose.
- Prioritize information so the most need-to-know information comes first.
- Limit the amount of text you put in a callout—the shorter it is, the more likely it will be read.
- Content should be concise and scannable.
- A callout may also include a clear call to action in the form of a link or button. To reduce confusion, avoid multiple call to action buttons or links.
- Choose a position and size for your overlay callout that does not obstruct important parts of your image (e.g., a face).
- The callouts, as designed for the Folwell theme, are fully accessible.
- Be sure to use the appropriate heading tag for your callouts.