Skip to main content

hero banner

Callouts—Maroon and Gold

In Progress

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.

See Feedback

About Callouts

Callouts are stylized groupings of scannable text.

Example

Maroon Callout

Lorem ipsum dolor sit amet, finibus consectetur adipiscing. Sed massa lectus, feugiat eu turpis finibus Sede, ultrices fermentum elit Sed.

Gold Callout

Lorem ipsum dolor sit amet, finibus consectetur adipiscing. Sed massa lectus, feugiat eu turpis finibus Sede, ultrices fermentum elit Sed.

 

Usage

Usage information will be added when this component is available in Drupal 8.

Best Practices

  • 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).

Accessibility

  • The callouts, as designed for the Folwell theme, are fully accessible.
  • Be sure to use the appropriate heading tag for your callouts.