Skip to main content

hero banner

Callouts

Callouts are stylized groupings of scannable text.

Usage, Best Practice, and Accessibility

Example

Gold Left Line Callout

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

Lighter Gray Callout

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

Gold Border Callout

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

Gold Top Line Callout

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

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.

Callout with photo

Northrop

Lighter Gray Callout

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

Northrop

Gold Border Callout

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

Northrop

Gold Line Callout

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

UMN campus aerial

Lighter Gray Callout

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

Horizontal Callout

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

Learn more

Agricultural research

Overlay Callouts

campus

Gold Callout

To add, type overlay-callout in CSS Class box. This default appears in black. Overlay

 

campus
 

Gold Bar Callout

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

 

Usage

There are two options for adding Folwell callouts to a page.

Note: Callouts that include images currently cannot be configured in the WYSIWYG editor due to a bug in Drupal. Use the Paragraph option outlined below for callouts with images.

Option 1: WYSIWYG (Folwell CKEditor)

Click the callout icon Folwell callout icon in the WYSIWYG toolbar. A “Callout Style” window will appear with a variety of available options. Select the desired option and click OK.

Folwell callout style wysiwyg

  1. Add a callout
    • Callout style:
      • Grey Background - a basic callout with a light gray background color
      • Gold Background - a basic callout with a gold background color
      • Maroon Background - a basic callout with a maroon background color
      • Gold Border - a callout with a gold border on all sides
      • Gold Top Line - a callout with a gold top border
      • Gold Left Line - a callout with a gold left border
    • Callout Width: This determines the width of the callout. Available options are:
      • Full - the full width of the content area
      • 50% - half the width of the content area
      • 3% - one third the width of the content area
      • 25% - one quarter the width of the content area
    • Callout Float: Select whether the callout should be aligned to the left or right side of the content area.
  2. A group of callout fields will appear. Add the header content to the header field and all other content to the text field.

Option 2: Paragraph

To use callouts on your pages, add a Paragraph field to your content type that includes the Folwell callouts paragraph type.

  1. Go to your content type (structure/content types/”name of your content type”).
  2. Under the Manage Fields tab click the Add field button.

    Folwell add filed screenshot

  3. Add a new field type, Paragraph, add the Callouts label, and click the “save and continue” button.

    Folwell callout field screenshot

  4. On the next screen, click Save field settings.
  5. Under the reference type, click default as a reference method and select Folwell Callout under paragraph types.

    Folwell callout paragraph screenshot

  6. Click to save settings.
  7. Go to your content type and click the Manage Display tab and change the default Callouts label to Hidden. (Note: this screen does not appear in Drupal Lite sites. Simply click "Save" on the screen that comes up and you will have enabled callouts.)

    Folwell manage display screenshot

  8. Callouts should be available in your content type.

Adding callout content

  1. Add content (content/add content/”name of your content type”).
  2. Click the Add Folwell Callout button.

    Add Folwell callout screenshot

  3. Add the Callout Image (optional). Browse existing images in the Media Library or upload a new image.

    Add Folwell callout image screenshot

  4. Enter Callout Text.

    callout text screen example

  5. Folwell callout style dropdown

    Choose the Callout Style.
    • Grey Background - a basic callout with a light gray background color
    • Gold Background - a basic callout with a gold background color
    • Maroon Background - a basic callout with a maroon background color
    • Gold Border - a callout with a gold border on all sides
    • Gold Top Line - a callout with a gold top border
    • Gold Left Line - a callout with a gold left border
    • Horizontal Gold - a horizontal callout with a photo on the right and a gold callout background on the left.
    • Horizontal Maroon - a horizontal callout with a photo on the right and a maroon callout background on the left.
    • Overlay Gold Bar - a white callout area overlaying an image, positioned on the left side with a short gold bar at the top.
    • Overlay Gold - a gold callout area overlaying an image, positioned on the left side.
    • Overlay Maroon- a maroon callout area overlaying an image, positioned on the left side.
  6. Click the save button and the callout should be added to your page.

Notes about callouts using paragraphs

Callouts created using paragraphs will be the same width as the container they’re in on the page. It’s not possible to change the width of callouts created using paragraphs.

Using the “C” button in the WYSIWYG when adding callouts using paragraphs may produce an undesirable callout effect and is not recommended.

Best Practice

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

Find Best Practices for Images

Accessibility

  • The callouts, as designed for the Folwell theme, are fully accessible.
  • Choose an image overlay color carefully. The color you use should complement your image colors.
  • Be sure to use the appropriate heading tag for your callouts.