Callout Block

The Callout block can be used to highlight a specific program or project. The block includes a title, text, optional call to action button, and optional image.

Additionally by using the Callout block focus style you can create illustrated lists with a standard size image that could be used for profiles, publications, and other groups of similar information.

Best practices

• Image size is 640px x 480px. Image dimension is 4x3.
• Keep text concise. Try to not have the text longer than the image is high.
• Try to use the block to complement the overall page design.

Settings

• Style: button, no button, focus
• Theme: blue, orange
• Image: the position of the image in the block: first, last, none
• Alt Text: Text that describes the image contents. Remember that all images need to have alt text.
• Photo Credit: text field to provide photography rights information (optional)

 

• Button Settings (double-click on button text to edit)
• Title: text description of button (optional)
• URL: link to a page
• Target: load the page in the current window/tab or a new window/tab

This component has multiple elements. Be sure to select the element you want to apply settings to. Selected elements are indicated by the blue highlight. Click the up arrow to select element layer above.

 

Focus Style

The focus style of the callout block is designed to help standardize the layout of a collection of information with images (or an "illustrated list"). The Focus style is most suitable for a list of profile-type images and bios but can be used for any content that needs to be displayed in a similar way. 

The image size for the focus style Callout block is 290px x 400px.

 

updated February 20, 2024