Generic Block: 3 Columns

The display mode defaults to the standard display. Select a different display mode to change the look and feel of the component.

Although you can use all the column fields in any of the displays, the fields in parentheses are the recommended fields to use for the intended effect.

• Standard (Image, Title, Body):
  • Has no borders around the columns, so mimics a traditional 3-column layout.
  • Good for longer columns of text.
• Featured CTAs (Image, Title, Body, Link):
  • Includes a border.
  • Visual focus is on the calls to action, which stand out from the rest of the content with a bold background.
• Related Links (Title, Body, CTA):
  • Designed specifically to highlight links to related content.
  • Best when used with a clear title, a short description of why users should visit the link, and a clear call to action.
  • Warning: description is italicized, so keep very short to avoid accessibility issues.

There is a border around each column for the featured CTAs and related link displays, making them ideal for short blocks of information.

Background Color defaults to “Light (white).”

Select “Dark (gray)” to add a slight gray tint behind the entire component.

The header style defaults to visually normal, but you can also choose to have it display much smaller.

Enter an optional section header. It will be a heading 2 and display above the columns.

Provide more context by entering it in Intro. It will appear below any section header but above the image blocks.

Enter a title. It will appear under the eyebrow and above the body of the image block as a heading 3. Use Title URL if you want to link the title to another page.

If you want the title to be an active link, enter a URL. This is a look-up field.

• To link to a node on our site, begin typing its title and select it from the drop-down list that appears.
• To link to anything else, add the full URL, including https://.

Note: Titles that are linked are styled differently from those that aren't. If you are using the title field in multiple columns, we recommend being consistent in their use — make all titles links or none — so it doesn't look like an error.

You can also add links in the Body, or as a call-to-action (CTA) link at the bottom of the column.

The subtitle appears under the title as smaller text, and looks different from the body text.

The body field is a limited WYSIWYG editor.

You can style text with:

• headings (start with a “Heading 4” if you used Title, and a ”Heading 3” if you didn't.)
• bolding and italics
• lists

You can also add links and special characters, as well as mark up text in non-English languages..

When you add an image, it will appear at the top of the column, spanning the width of the content area.

Enter an image that is at least 572 pixels wide by 320 pixels tall.

Click Image to open an Add Media dialog box. See Images for detailed instructions.

Enter a YouTube or Vimeo URL. You must also add a fallback image to Image.

The video entry will display at the top of a column. Users will see your fallback image with a play button superimposed. When they click the button, the video will open in an overlay.

See Videos for more information and video standards.

Enter a call to action.

• URL: Enter a URL.
  • If the page is on our site, begin typing the title and select the correct page from the drop-down list.
  • If the page is not on our site, enter the full URL
• Link Text: Enter a short call to action.
  • Keep it short – just a few words.
  • Include a verb.

See Links for more information about calls to action.