The site is not yet optimised for mobile viewing. Please view on screens wider than 768px like your desktop screen.

Content panels

Content panels are used to lay out content on a page in enticing and scannable blocks.

ACU has many Content panels varying in terms of content (copy) column or block structure ('1col', '2col', '3col', '4col') and component combinations (e.g. image or video). Most content panels are full width panels.

On ACU Sitecore (CMS) sites, Content panels are usually applied on landing pages as opposed to content pages - see Page samples

Best practice

  • If placing Content panels one after another down a page, alternate them by their horizontal orientation. E.g. left image panel followed by a right image panel. This should entice the user to keep scanning down the page.
    • ACU Sitecore sites should use only one Content Panel per landing page.
  • Use the $sand coloured variants on ACU Research pages.
  • For shorter, content promoting a single topic, use a Promo panel UI.

Alternative UI components

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

Content 1col half width

Related UI components

See also Quicklinks & Key facts.

Example in action

Content 1col half width (see introduction)

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

Content 1col with image right

Code

Left column
  • Headings
  • paragraph
  • standalone text link
Right column
  • Image

Forthcoming...

Forthcoming...

Example in action

Content 1col with image (see 'Begin your future')

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

Content 1col with image left

Example in action

Content 1col with image (right) (see 'Location')

Code

Left column
  • Image
Right column
  • Headings
  • paragraph
  • standalone text link

Forthcoming...

Forthcoming...


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

Content 1col with video

Code

Left column
  • Headings
  • paragraph
  • standalone text link
Right column
  • Video

Forthcoming...

Forthcoming...

Example in action

Content 1col with image (right) (see 'Location')

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

Content 2col

Code

Heading
  • Optional
Two columns
  • border-top: $red--100
  • Sub-heading
  • copy
  • cta--boss

Forthcoming...

Forthcoming...

Example in action

Content 2col (see 'Facilities')

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

Content 2col (images)

Code

Heading
  • Optional
Two columns
  • border-top: $red--100
  • Landscape image on each coloumn
  • sub-heading
  • copy
  • cta--boss

Forthcoming...

Forthcoming...

Example in action

Content 2col (images) (see 'Exercise your body...')

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.

2col-panel

Code

Image
  • Portrait
Two columns
  • $purple--100 panel
  • border-top: $red--100
  • sub-heading
  • copy
  • cta--worker

Forthcoming...

Forthcoming...


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.

Content 2col with panel (long copy)

Code

1st column
  • Heading
  • copy
  • standalone-text-link
2nd content block (column)
  • Heading
  • copy
  • standalone-text-link
Image
  • portrait
Horizontal panel
  • full width
  • $purple--100 panel
  • cut-out shape bottom left

Forthcoming...

Forthcoming...

Example in action

Content 2col with panel (long copy) (see 'Our people')

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

Content 3col

Code

Heading
  • Optional
3 content columns
  • border-top: $red--100
  • sub-heading
  • copy
  • cta--boss

Forthcoming...

Forthcoming...

Example in action

Content 3col (see 'Discover more')

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

Content 3col (images)

Code

Heading
  • Optional
Each (of three) columns
  • border-top: $red--100
  • landscape image
  • sub-heading
  • copy
  • cta--boss

Forthcoming...

Forthcoming...


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

Content 3col (image & panel)

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

Image
  • Portrait (left)
  • bottom two-thirds overlays panel.
1st content block (column)
  • border-top: $red--100
  • landscape image
  • sub-heading
  • copy
  • cta--boss
Two content blocks (columns)
  • 2 columns on right side of panel
  • border-top: $red--100
  • heading 3
  • supporting copy
  • cta--boss
Horizontal panel
  • full width background
  • cut-out shape bottom right corner

Forthcoming...

Forthcoming...

There is also $sand coloured panel version mainly used for ACU Research pages:

  • The lower two thirds of the panel has a $sand full width background.

Example in action

Content 3col (image & panel) (see 'Research institutes')

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

Content 3col (image, panel, stats)

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

Image
  • Portrait (left)
  • bottom two-thirds overlays panel.
Statistical content block (column)
  • Heading 3
  • shortlist of facts (numbers or single line imformation)
  • standalone text link
Two content blocks (columns)
  • 2 columns on right side of panel
  • border-top: $red--100
  • heading 3
  • supporting copy
  • cta--worker
Horizontal panel
  • full width background
  • cut-out shape bottom right corner

Forthcoming...

Forthcoming...

Example in action

Content 3col (image, panel, stats) (see 'We are achieving great things')

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

Content 3col (feature text and tabs)

Example in action

Content 3col (feature text & tabs) (see 'Let us assist your journey')

Code

Image
  • Landscape (full width)
Featured column
  • $purple--100 panel with top right cut-out shape
  • overlays the bottom of image by a third
  • heading
  • copy
Tabs with two column content
  • Tabs overlay bottom quarter of image
  • sub-heading
  • supporting copy
  • standalone-text-link

Forthcoming...

Forthcoming...

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

Content 4col

Code

Heading
  • optional
Four content blocks in columns
  • border-top: $red--100
  • Sub-headings
  • copy
  • cta--boss

Forthcoming...

Forthcoming...

Alternative UI components

Example in action

Content 4col (see 'You might also like')

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

Content 4col (images

Code

Heading
  • optional
Four content blocks in columns
  • border-top: $red--100
  • image (landscape)
  • heading
  • sub-headings
  • copy
  • cta--boss

Forthcoming...

Forthcoming...

Related UI module