Skip to main content

Callout Content Module

Best Practices

  • The callout content module is designed to call out 2 or 3 related ideas, such as courses for undergraduates and graduates, or 2 or 3 key resources. If you have more than 3 related ideas to call out, you should use a call to action module instead. The call to action can send people to a page where you can break down the related ideas in more detail.
  • The first headline should be what the content in the boxes have in common ("courses," or "resources").
  • The individual callout box headlines should be what distinguishes the content from each other ("undergraduate," "graduate").
  • Give the user a bit more detail in the blurb, but save the in-depth information for the page you link to.
  • Avoid repeating link text in the callout boxes ("learn more," etc.). See example link text.
  • Choose a background image that will still look good when covered by the semi-transparent callout boxes. See the callout content image library.

To create a new callout content module:

  1. From the New Content menu, click Modules->Callout Content. The module will be placed in the _modules folder by default. You can create mutiple sub-folders within _modules as needed (similar to images and files). To create multiple instances of this module, copy the module and rename it. Edit each module separately.
  2. Click Edit to bring up the edit screen.
  3. Complete these fields:
    1. Block name: This will default to "callout-content". Change it to something that describes the module. 
    2. Headline: White, all caps text, outside of blue boxes (will be over image directly)
    3. Callout Box: 2-3 Semi-transparent blue boxes. Use green + to add a box, red X to delete and arrows to change order.
      • Headline (white, all caps):
        • Maximum 25 characters
      • Blurb (single text area with sentence case):
        • Brief is better. Approximately 25 words = 4 lines for 2 boxes.
        • Keep it simple: No formatting is available in this section, including paragraphs
      • Button Text (white, all caps link text, underlined):
        • Note: Formatted as link text, not a button
        • Maximum 30 characters
      • Link Type: Choose internal or external
      • Internal/ External Link: Select your internal link or enter your external link
    4. Background > Image 
      • 1200 x 410 pixels.
      • This is a background image that will be covered by semi-transparent text boxes. Landscapes and abstract images work well but people do not.
      • See the callout content image library.

Examples

Callout Content with 2 boxes

Two Text Boxes

HEADLINE: All caps, white text, outside of the two or three boxes. CALLOUT BOX HEADLINE: All caps inside the boxes. BLURB: Sentence case, no formatting. BUTTON TEXT: All caps underlined text.

Callout Content

Image

1200 x 410 pixel background image. Boxes are semi-transparent dark blue.

Working with images

Callout Content with 3 boxes

Three Text Boxes

HEADLINE: All caps, white text, outside of the two or three boxes. CALLOUT BOX HEADLINE: All caps inside the boxes. BLURB: Sentence case, no formatting. BUTTON TEXT: All caps underlined text.

Callout Content

Image

1200 x 410 pixel background image. Boxes are semi-transparent dark blue.

Working with images

Third Box

Be careful with the amount of text you use in the boxes. Too much can be difficult for users to scan.

Writing for the Web


What Not to Do

Text problems:

There is too much text in this module.

  • The blurb and link text is too long. The module is stretched vertically, warping the background image.
  • The text in the boxes is uneven. The module has a lot of wasted space.

Callout Content

Two or Three Text Boxes

This box has too much text. It looks very uneven when you compare it to the other boxes in this module. Having one set of text much, much longer than the others creates a large amount of unused space. If you can't find a way to shorten a large amount of text, then you should try moving the longer text out to a different module. If you try to keep the text boxes fairly close in length, you won't have an issue with unused space. But the text can still be difficult to read if all of the text boxes are long. Just use this space to highlight an idea and drive traffic to a page with more content on it.

Similarly, you don't want your button text to be overly long. The goal is for it to be short and informative.

Image

1200 x 410 pixel background image. Boxes are semi-transparent dark blue.

Working with images

Third Box

Be careful with the amount of text you use in the boxes. Too much can be difficult for users to scan.

Writing for the Web

Image problems:

This is not a good background image.

  • This person is obscured by the text boxes. Landscapes make good background images - people and groups of people do not.
  • The image should not be text dependant. Avoiding text in images is a general best practice, but it is an even more obvious issue in a background image that has floating text.
  • Avoid light/ white images. Since the Initial Headline text of the module is white, you need a darker background for contrast.
  • See the callout content image library.

Callout Content

Two or Three Text Boxes

HEADLINE: All caps, white text, outside of the two or three boxes. CALLOUT BOX HEADLINE: All caps inside the boxes. BLURB: Sentence case, no formatting. BUTTON TEXT: All caps underlined text.

Callout Content

Image

1200 x 410 pixel background image. Boxes are semi-transparent dark blue.

Working with images