Resources for... William & Mary
William & Mary W&M menu close William & Mary

Callout Row

The callout row offers three elements — a prominent title, text, and up to three linked buttons. All of the elements are centered within the row, and can be used in a variety of combinations.

Rows are available to specified users that have received the required training, consultation and approval of their Cascade Manager.
Suggested Uses
  • Highlight featured programs, resources, etc.
  • Feature a big idea or announcement
  • Recreate right-column widgets
Create a New Row
  • Select your rows storage folder — this is likely labeled _rows or similar. If you don't have one yet, build one now.
  • From the top menu, select Add Content > Rows > Callout.
Available Fields & Options
  • Page Name: Required field; this is your row's file name in Cascade; customize the default name of row-callout
  • Title: Required field; used as a section header for screen readers and should be meaningful.
  • Show Title?
    • If unchecked: The title is used by screen readers, but not visually displayed.
    • If checked: The title is prominently displayed at the top of the row.
  • Row Theme: Select Image or one of the available colors as the row's default theme. Elements within the row will be color-coordinated and optimized for design and accessibility. When placing the row on a page, an alternate theme can be selected for that page.
  • Background Image: Required when you select the Image theme. Use the file chooser to select an image uploaded to Cascade. A transparent black overlay is automatically applied to the image to ensure the readability of row text. 
    • Recommended dimensions: 1920 x 482 pixels
    • Minimum image width: 1500 pixels
    • Image height is variable to accommodate row content across display sizes.
    • The image will be auto-cropped equally on each side to fit smaller display sizes — the focus of your image should be near center to avoid being cropped out of view on smaller devices.
  • Text: Option to add simple text that appears below the Title (if displayed) and above the optional buttons. Text appears center justified and can include links, bold and italics.
  • Buttons: Up to three buttons that appear centered in the row. Use the +/- buttons to add/remove buttons. Use the up/down arrows to reorder the buttons. Note: buttons appear side by side on wider displays, and stacked vertically on smaller displays.
  • Link Text: Customize the text to appear on each button. The size of each button is pre-set and will accommodate approximately 20 characters. Preview your row to ensure your text fits on the button before publishing.
  • Internal Link: Use to link the button to an available Cascade asset.
  • External Link: Use to link the button to an asset not available within Cascade.
Updating Row Content
  • To update the content of a row, edit and publish the row file. 
  • You do not need to publish the pages displaying the row.
  • If a row is unpublished or deleted, it will no longer appear on any live pages.

Tip: If you move or rename a row file, you will then need to publish any pages displaying the row. Not sure which pages are using the row? Check for relationships to the row.

Example Callout Rows

Below, we offer sample rows to demonstrate a selection of suggested uses and best practices.

Apply Now

Nulla porttitor efficitur est quis cursus. Curabitur tristique id tortor ut volutpat. Nam ut dolor eleifend, interdum libero quis, dictum eros. Quisque dictum eu ante iaculis euismod. Donec dapibus, lectus non sodales congue, metus enim aliquam augue, ut blandit est leo nec erat.

Apply Now

Nulla porttitor efficitur est quis cursus. Curabitur tristique id tortor ut volutpat. Nam ut dolor eleifend, interdum libero quis, dictum eros. Quisque dictum eu ante iaculis euismod. Donec dapibus, lectus non sodales congue, metus enim aliquam augue, ut blandit est leo nec erat.

Apply Now

Nulla porttitor efficitur est quis cursus. Curabitur tristique id tortor ut volutpat. Nam ut dolor eleifend, interdum libero quis, dictum eros. Quisque dictum eu ante iaculis euismod. Donec dapibus, lectus non sodales congue, metus enim aliquam augue, ut blandit est leo nec erat.

Where could your journey at W&M take you?

About the Office

As part of University Communications, University Web & Design offers an array of services in support of university-level communications. From our collaborative planning and management, to concept, design, writing and communications strategy, your work will be supported by our team of dedicated communication specialists.