Equal Height Callouts

The Folwell Equal Height Callouts component allows users to insert callouts of the same or different types into a fixed-height row, ensuring that all callouts share the same height.

 

Examples

Usage

The Folwell Equal Height Callouts component allows users to insert callouts of the same or different types into a fixed-height row, ensuring that all callouts share the same height.

Equal Height Callouts are created using the Folwell Components content block.

Add Equal Height Callouts to a page

  1. From Layout Builder, select + Add Block.

    A screenshot of a mouse cursor on an "Add Block" button.

  2. In the right-sidebar menu, select + Create content block

    create content block displayed in white text on a dark gray background

  3. Select Folwell Component

    Folwell component label displayed in white text on a dark gray background
  4. Populate the Title (required, though displaying title is optional), then select Folwell Folwell Equal Height Callouts from the Folwell Component List dropdown menu.
A dropdown menu with a mouse cursor selecting the "Add Folwell Equal Height Callouts" item

  1. In the Configure block window, populate the Title with your desired text, then Populate the Callout Title section with your desired callout title. 
    Note: the Title adds a title to the content block while the Callout Title will add a title to its respective callout.

    Configure Block window with Title and Callout Title input boxes.
  2. From here, users may insert a variety of callouts that include, but are not limited to: image callouts, text callouts, combinations of both, etc. Please see the Folwell Callouts documentation for more information.
  3. In this example, the user will add an image callout with text alongside other text-based callouts.
    To add an image, select     Add Media
Maroon-color button with a label reading: "Add media"
  1.  Select and upload an image from your device, or choose from one of the images available in the Media Library, then select the Insert Selected button.
Window displaying an image insert dialogue box and a media library input box to filter through images listed in a grid format.

  1. Optionally add a Callout Link if your image and/or title is meant to be linked to other content, then add text you wish to have displayed in your callout in the Callout Text input box. You may also select Callout Style from the Callout Style dropdown menu (see Folwell Callout styles on the Folwell Design System website) 

    An input box for a hyperlink and an input box for descriptive text.

  2. To add another Callout, select the Add Folwell Callout button, then repeat steps 5 through 10 as neede

    Maroon-color button with a label reading: "Add Folwell Callout"
  3. Select Add Block to insert the Equal Height Callout block to your page. A preview will be visible in Layout Builder.
  4. Select Save Layout button.
Best Practice
  • A callout should have a header and descriptive text that clearly explains its purpose.
  • Callouts are placed near the content that the callout information is related to.
  • Callout text is unique in your content. If a callout is removed, then the content is missing important information.
  • Use headings that set clear expectations about the callout's purpose.
  • Prioritize information so the most need-to-know information comes first.
  • Limit the amount of text you put in a callout—the shorter it is, the more likely it will be read.
  • Content should be concise and scannable.
  • A callout may also include a clear call to action in the form of a link or button. To reduce confusion, avoid multiple call-to-action buttons or links.
  • Ensure image used has alternative text to meet current accessibility standards
Accessibility
  • The callouts, as designed for the Folwell theme, are fully accessible.
  • Be sure to use the appropriate heading tag for your callouts.
  • Ensure images used in callouts contain alternative text