One column content (1col) panels

ACU has the following Content panels that include just one column of content (copy).

1. Content 1col half width
2. Content 1col with image
3. Content 1col with image (left)
4. Content 1col with video

Usage

Use a single column Content panel when there is content or space for only one column for textual content (copy).

Content 1col half width

Use this component when there is a need for just one or two paragraphs under a heading within a single column spanning across half a page on desktop view. The other half of the page would be filled by another piece semi-related content within another UI component or left empty.

Definition

Related UI components

See also Quicklinks & Key facts.

Example in action

Content 1col with image

Use this component when there is a need for one column of copy (textual content) on the left and an image on the right.

Definition

Code

Example in action

Content 1col with image (left)

Use this component when there is a need for one column of copy (textual content) on the right and an image on the left (reversal of the above panel).

Definition

Example in action

Code

Content 1col with video

Use this component when there is a need for one column of copy (textual content) on the left and a video on the right column.

Definition

Code

Example in action

Two column content (2col) panels

ACU has the following content panels that include two columns of textual content (copy).

1. Content 2col
2. Content 2col (images)
3. Content 2col with panel
4. Content 2col with panel (long copy)

Usage

Use a Two column content (2col) panels when there is a need for textual content (copy) within two columns or blocks.

Content 2col

Use this component when there is a need for textual content (copy) side by side in two columns.

Definition

Code

Example in action

Content 2col (images)

Use this component when there is a need for textual content (copy) aligned vertically under each of two images appearing side by side in two columns.

Definition

Code

Example in action

Content 2col with panel

Use this component to break up a page with a $purple--100 horizonal panel using an image (left) and two content columns (right).

Definition

This component utilies a horizontal panel, with $purple--100 background color, upon which sits a portrait orientated image on the left and two columns of textual content on the right. The top quarter of the image vertically breaks out beyond the panel so that the image's top quarter has a $white background.

Code

Content 2col with panel (long copy)

Use this component to break up a page with a $purple--100 horizonal panel and there is longer content (copy) to present than the 'Content 2col with panel' componet supports.

The content is related but different enough to present in these two separate blocks.

Definition

This component utilies a large portrait orientated image (right) and two content blocks aligned vertically one above the other on the left. The top content block is presented above and outside of the purple panel in line with the height of the image. The bottom content block is situated within the $purple--100 panel on its left. The purple panel takes up the bottom half of the component.

Code

Example in action

Three column content (3col) panels

ACU has the following content panels that include three columns of textual content.

1. Content 3col
2. Content 3col (images)
3. Content 3col (image & panel)
4. Content 3col (image, panel, stats)
5. Content 3col (feature text & tabs)

Usage

Use a three column content panel when there is a need or space for three columns or blocks of textual content (copy) across a page.

Content 3col

Use a Content 3col panel when there is a need for textual content (copy) within three columns across the page. This component works best if each column is made up of one or two concise paragraphs followed by a call-to-action button.

Definition

Code

Example in action

Content 3col (images)

Use this component when there is a need for textual content (copy) aligned vertically under each of three images appearing side by side in three columns.

Definition

Code

Content 3col (image & panel)

The Content 3col (image & panel) is used to present longer copy supported by a prominent image, and two columns of text copy with a call-to-actions with a purple panel.

Definition

This component is made up of:

1. Portrait image (left)
2. Heading 3 with a paragraph, introducing the component's subject matter, on the right on a $white background.
3. The lower two thirds of the component is made up of a $purple--100 full width background panel.
4. The bottom half of the portrait image occupies the top left side of the $purple--100 horizontal panel.
5. Supporting text copy is presented on the right within two colums. Each column has a heading 3, copy and a Call-to-action at the bottom.
6. The $purple--100 panel is completed with an ACU (brand) panel cut-out on the bottom right corner.

Code

Example in action

Content 3col (image, panel, stats)

The Content 3col (image, panel, stats) should be used when presenting content of a statistical or factural nature supported by a prominent image, text copy and call-to-actions.

Definition

This component is made up of:

1. Portrait image (left)
2. Heading 3 with statistical information or a shortlist of facts (numbers and single line imformation) on the right on a $white background.
3. The lower two thirds of the component is made up of a $purple--100 full width background panel.
4. The bottom half of the portrait image occupies the top left side of the $purple--100 horizontal panel.
5. Supporting text copy is presented on the right within two colums. Each column has a heading 3, copy and a Call-to-action at the bottom.
6. The $purple--100 panel is completed with an ACU (brand) panel cut-out on the bottom right corner.

Code

Example in action

Content 3col (feature text & tabs)

Use this component to break up a page with a large landscape image spanning across the page, overlayed on the bottom of the image by a block of featured copy on a small, purple, highlight panel and tabs holding two columns of supportive copy to the right.

Definition

Example in action

Code

Four column content (4col) panels

ACU has the following Content panels that present content within four columns across a page.

1. Content 4col
2. Content 4col (images)

Usage

Use a four column content panel when there is a need or space for four columns of textual content (copy) across a page in one row. A second row of columns may be added as well making two rows of four columns.

Content 4col

Use a Content 3col panel when there is a need for textual content (copy) within four columns across the page. Four is the maximium number of columns we have to span across a page. However, a second row of columns may be added to make two rows of four columns each.

Definition

Code

Alternative UI components

• Tiles

Example in action

Content 4col (images)

Use this component when there is a need for textual content (copy) aligned vertically under each of four images appearing side by side in four columns in one row. Four is the maximium number of columns we have to span across a page in one row. However, a second row of columns may be added to make two rows of four columns.

Definition

Code

Related UI module

• Related content (cards)