Callout Section

Callout sections are a flexible way to visually highlight content on your page and/or promote specific content in order to help your users navigate your site.

Callout sections are similar to CTA buttons in that they are a way to prominently feature content for users and can direct them to take action. They have more customization options than CTA buttons and can include an image for visual emphasis. This paragraph type can be placed in the body region and/or below content region on Landing Pages and Inside Pages.

Anatomy of a callout section:

A single callout section can feature one to three callout items, and each callout item consists of four major parts (all optional):

Title
Image
Supporting text
Click-through URL

If you want to feature more than three callout items you can stack multiple callout sections on top of one another (see the Arts page for an example).

Below is an example of a callout section in action:

This is the callout section title

Callout Item 1

This is the callout item caption. You can add text formatting such as bold, italics, underline, and links. The caption text is optional for each individual callout item.

Callout Item 2: no caption or link

This is a callout item with a caption but no title. When adding a link to a callout item please remember to use the internal link format to link to any page on oxy.edu (view the tutorial on links for details). For links to external sites you can use the URL.

Other examples of callout sections:

Instructions for adding a Callout Section to the body region (not full-width):

Navigate to the oxy.edu page where you want to add the Callout Section and click "Edit."
Scroll down to the "body paragraphs" section beneath the body field. (Follow these instructions for adding a callout section to the below content region)
Select "Callout section" from the paragraph type drop-down.
Click the "Add new Paragraph" button.
If desired, enter a Paragraph Title. This will appear as large text above the entire callout section.
Click "Add Callout item"
Add an optional title for your callout item. This text will appear just below the image and above the caption text for the callout item.
Select "Browse" to upload an optional image for your callout item.
- Important: you must crop your image to 387x220 before uploading it to the callout section paragraph.
- You should give your image a descriptive title in order to make it easy to find in the image library. We recommend including your department name, a description of the image, and the image dimensions in the file name, e.g. Web-Help_Callout-Tutorial_387x220
Add optional CTA caption text in the text editor.
Add an optional link for your callout item. For internal links on oxy.edu use the format node/nnnnn (using the node ID for the page you want to link to). For external links you can use the page URL.
To add additional callout items, click "Add Callout item" and repeat steps 7-10. You can add up to three callout items per callout section paragraph.
Once you have finished adding all of your callout items click "Save."

Instructions for adding a Callout Section to the below content region (full-width):

Navigate to the oxy.edu page where you want to add the Callout Section and click "Edit."
Scroll down to the "Below Content" tab just beneath the body paragraphs section.
Select "Callout section" from the paragraph type drop-down.
Click the "Add new Section" button.
Follow steps 5-12 from the body region instructions above.