What are Containers?
Containers are a type of content block that holds other types of content blocks, with some options to control the space around and between the contents.
What types of content can a container hold?
Containers can hold:
- Data Input fields
Containers can be used to create columns, which reduces scrolling and creates a more user-friendly layout. This example uses containers to create two columns of data input fields in an interactive form:
Containers within containers
Containers can be placed inside other containers to create a variety of visual effects. By placing Containers inside a Container, we can create neat rows of icons, links, images, etc and control the padding and spacing between the items.
💡 See also: How To: Types of Pins
This example uses containers to display a background image, as well as logos and links in the foreground:
How are Containers different from Feeds or Lists?
Containers contain only the items explicitly placed inside them. Feeds and Lists automatically add or remove items as they become live or expire.
- A Container with three content links always shows those three links
- A User Notices Feed will show all live Notices, and remove expired Notices.
- A Section Content List will show the contents of a Section, as Pages are added or removed from the Section.
A Container content block allows you to control how the contents are arranged in a number of different ways. It can automatically arrange things into rows and columns depending on the number of items being added.
Background image and color
The container can have a background image and a background color.
- Cover stretches the background image to fill the container,
- Contain retains the background image original dimensions and resizes it to fit inside the container.
In the example below, the background image covers the entire container so the blue background color is not visible:
Controls the amount of space above and below the contents:
Controls the amount of space between the side of the screen and the contents:
When the container items are arranged vertically, they can be aligned left, right, centered, evenly spaced vertically, or justified:
When container items are arranged horizontally, they can be justified left, right, centered, evenly spaced vertically, or justified:
Vertical and horizontal spacing between items
These options control the spacing between the contents of the container. The space is added equally, although items may shift if enough padding is added.
Vertical space between items:
Horizontal space between items
Items may shift to another row if enough space is added as padding:
Row containers arrange items horizontally.
- When Scroll Horizontally is enabled, the container items are arranged evenly in a row with a scroll bar if the number of items is longer than the width of the screen.
- When Scroll Horizontally is not enabled, the items flow into another row.
- Vertical and Horizontal padding adds space above and below, or left and right of the container items.
Column containers arrange items vertically. There are fewer options in this type of container since the user can keep scrolling down to see all the items.
If you have any questions about containers or the content builder, contact the Help Desk at firstname.lastname@example.org and we will be happy to help!