Content with background

The content with background component allows for the creation of a container for multiple additional components on a page and can be used to group other components and apply a common style or layout. The content with background component is very similar to the container component, but comes with a heading included by default for faster authoring and is better utilized for more pre-defined spacing and stacked layouts with images. Available in Figma under the “Container” component.

When to use

To create a common layout of grouped components
To add border or background color to grouped components to highlight important information or actions on a page
For layouts utilizing stacked images

When not to use

For layouts that need more variable padding, consider using the container component instead
Overuse of the component can overwhelm users and dilute the important information on a page

Anatomy

Background color and border options:
- white background color
- bright blue 10% background color
- gray 2 background color
- off-white background color
- decorative solid border with white background
Graphic: optional to include icon / illustration / image
Corner radius: 0px, 12px
Heading: there should always be a heading and use H2 or H3 and limit to a maximum of 2 lines. Option to add 1rem or 2rem of padding to top or bottom
Paragraph/Subhead text: additional text is optional
Call to actions: call to actions are optional, there can also be multiple if needed

Demos & variations

Bright blue 10% background

Use for higher priority content and calls to action.

Heading 2 - heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Button label

Off-white background

Use as alternative to bright blue 10% background.

Heading 2 - heading 3

Button label

Gray 2 background

Use for supplemental or related content or calls to action.

Heading 2 - heading 3

Button label

Decorative solid border

Use for member content or calls to action.

Heading 2 - heading 3

Button label

Layout configurations

2 content blocks within single container

Heading 2 - heading 3

Button label

Heading 2 - heading 3

Button label

50 / 50

Heading 2 - heading 3

Button label

Heading 2 - heading 3

Button label

33 / 33 / 33

Heading 2 - heading 3

Button label

Heading 2 - heading 3

Button label

Heading 2 - heading 3

Button label

25 / 25 / 25 / 25

Heading 2 - heading 3

Button label

Heading 2 - heading 3

Button label

Heading 2 - heading 3

Button label

Heading 2 - heading 3

Button label

Vertical border

Optional left or right border to help separate 2 or more messages that are in-line with each other. The border is always hidden in mobile and has the option to also hide in tablet. Only difference between left or right is a personal style or authoring preference.

Heading 2 - heading 3

Button label

Heading 2 - heading 3

Button label

Stacked layout with graphic

Use for stacked layouts with images, icons and illustrations.

Heading 2 - heading 3

Button label

Heading 2 - heading 3

Button label

Additional layout configurations

There are additional column configurations if a content with background component is used within the column grid component.

Content with background

When to use

When not to use

Anatomy

Demos & variations

Bright blue 10% background

Heading 2 - heading 3

Off-white background

Heading 2 - heading 3

Gray 2 background

Heading 2 - heading 3

Decorative solid border

Heading 2 - heading 3

Layout configurations

2 content blocks within single container

Heading 2 - heading 3

Heading 2 - heading 3

50 / 50

Heading 2 - heading 3

Heading 2 - heading 3

33 / 33 / 33

Heading 2 - heading 3

Heading 2 - heading 3

Heading 2 - heading 3

25 / 25 / 25 / 25

Heading 2 - heading 3

Heading 2 - heading 3

Heading 2 - heading 3

Heading 2 - heading 3

Vertical border

Heading 2 - heading 3

Heading 2 - heading 3

Stacked layout with graphic

Heading 2 - heading 3

Heading 2 - heading 3

Additional layout configurations

Related elements