Component overview
The Content Block component is the primary building block of our website. Content Blocks can include both images and text and can span from 3 to 12 columns, or 1/4 to full-width of your webpage.
- Content Blocks can be used on all page types.
- Content Blocks come in three types:
- Feature Content Blocks: Feature Content Blocks require either an image or a video embed. Media displays next to content in a Feature content Block.
- Feature-Embed Content Blocks: The feature embed option allows you to place two embeds (e.g., video) next to each other. You may use background color or place in a Panel component with background color.
- Standard Content Block: Images are optional and videos are not supported in a Standard Content Block. Images display above the text in a Standard Content Block.
- Standard Content Blocks can have various widths: Standard Content Blocks can be set to span from 3 to 12 columns across the 12 column page grid. Content Blocks summing up to 12 or less will display on the same row unless they are placed in different panels.
- Feature Content Blocks are always 12 columns.
- Content Blocks use a WYSIWYG: ContentBlocks contain a WYSIWYG for editing your body copy, giving you a great deal of control over formatting your content.
- You may use different background colors on the Content Block component: Content Blocks can have a silver, dark gray or blue background color applied.
- Content Blocks may need additional spacing: Content Blocks allow you to add additional spacing at the bottom but not at the top. If your Content Block looks a little to close to the content above it, you can place it in a Panel for additional space.
- The Content Block title field uses H-tag options: Make sure you select the appropriate tag based on the Panel's position on your page.
- Images in Content Blocks need descriptive alt-text.
- Videos embedded in Feature Content Blocks must have human-generated captions.
The required image size for Content Block components is 586 x 440 px.
CB: UNIT NAME - Purpose
- Example: CB: ALUMNI - Start A Chapter
Example Content Block components
Standard Content Blocks
In Standard Content Blocks, images display above the headline and text. Standard Content Blocks can be any width, from 3 columns to the full 12 columns.
4-column content block
This content block is four columns, or 1/3 of a row.
Left-aligned content block
Text in your content blocks can be left aligned or centered.
Content block with no background
Content blocks can have blue, silver or dark grey backgrounds, or they can have no background at all.
12-column content block
A 12-column content block spans an entire row. Note that your images will scale up in size with your content block, so make sure to preview your content and ensure your images are high-resolution.
Content Blocks in Panel
Content Blocks are often placed in a Panel to give greater flexibility in styling.
6-column content block
This Content Block doesn't have a background color applied to it. The Panel has a dark gray background that includes the content blocks.
Content Block with Background
Content Blocks in a Panel can have a background color applied that differs from the Panel background.
Content Blocks with no images
Content Blocks are often used for text-only content. While Content Blocks can easily be used for paragraph-based text, they can also be used to create visual interest for navigation elements or short snippets of text.
4-column content block
Here is an example of a four-column content block with no images.
8-column content block
Here is an example of a eight-column content block with no images.
7-column content block
Here is an example of a seven-column content block with no images.
5-column content block
Here is an example of a five-column content block with no images.
Feature Content Block
A Feature Content Block requires a media element -- either an image or a video. The media element displays next to the Content Block. You can select whether the media appears to the right or the left of the text.
Just like Standard Content Blocks, Feature Content Blocks can have background colors applied, can have text left or center aligned and can be placed in panels.
Feature Content Blocks must be 12 columns.
Feature Content Block with Video
This Feature Content Block is using an embedded video as a media element.
Feature Content Blocks also allow for styled lists of links.
Feature-Embed Content Block
The Content Block below is a Feature-Embed Content Block, displaying two video embeds. In a Feature-Embed Content Block, your videos can display titles from the embed component, but the Content Block will not display a title or body copy.
This video has a title