Skip to main content

Callout Content Module

Best Practices

  • The callout content module is designed to call out 2 to 4 related ideas, such as courses for undergraduates and graduates, or 2 or 3 key resources. If you have more than 4 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. The image library was developed with 2-3 boxes on a homepage template in mind. If you are using 4 boxes and/or a different template, be sure to test your module on a variety of screen sizes.

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 multiple 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. Top material: Optional text displayed outside of blue boxes (will be over image directly - plan image accordingly)
      • Headline: White, all caps text,
      • Headline Break: As Headline, indented
      • Blurb: Smaller sentence case, white
      • Button Text: (All caps link text in a yellow box):
      • Link Type: Choose internal or external
      • Internal/ External Link: Select your internal link or enter your external link
    3. Callout Boxes: 2-4 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 Options: Choose Image or White Background
      • Image:
        • 1200 x 410 pixels for homepage template with 2-3 boxes. If you are using 4 boxes, a large amount of text, or on a different template, be sure to test your module on a variety of screen sizes.
        • 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.
      • White Background: Image selection disabled. All white text in top material will be changed to dark text.

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
Headline Break

Blurb Text is available above the Callout 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

Callout Content with white background

Text above the Callout Boxes will automatically be made darker

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

Spacing

Although there is no background image, that space is still taken up by whitespace. Plan your content above and below the module accordingly. Remember that you can have WYSIWYG content that isn't in a module.

WYSIWYG Formatting

Callout Content with 4 boxes

Four Text Boxes

Be careful not to put too much text in the boxes.

Callout Content

Image Size

The standard 1200 x 410 pixel background image is designed for 2 or 3 boxes.

Working with images

Taller Module

Moving to four boxes usually results in an overall taller module.

Writing for the Web

Test Image

Make sure you test your image on multiple screen sizes to make sure it displays well.

Image Library


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 dependent. 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