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 can a container hold?
• Containers within containers
• How are containers different from feeds and lists?
• Container
• Row Container
• Column Container
  
  
  

What can a container hold?

Containers can hold:

• Links
• Images
• Text
• 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.

Background images

Containers allow you to display a background image, with text or links in the foreground, as shown in this example:

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.
  
  
  

Container Block

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.

Resize Mode

• 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: 

Vertical Padding

Controls the amount of space above and below the contents:

Horizontal padding

Controls the amount of space between the side of the screen and the contents:

Alignment

When the container items are arranged vertically, they can be aligned left, right, centered, evenly spaced vertically, or justified:

Justification

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 Container

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 Container

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 or need additional help, contact VTS Activate Support at support@activate.vts.com and we will be happy to advise.