How To: Use Containers

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:

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

Row_container_data_input.png

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:

Containers_in_containers_logo.png

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

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: 

Containers_background.png

Vertical Padding

Controls the amount of space above and below the contents:

Container_vertical_padding.png

Horizontal padding

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

Container_horizonal_padding.png

Alignment

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

Container_alignment.png

Justification

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

Container_Justify.png

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:

Vertical_space_between.png

Horizontal space between items

Items may shift to another row if enough space is added as padding:

Container_horizontal_space_between_.png

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.

Row_container_scrolling.gif

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.

Column_container.png

 


If you have any questions about containers or the content builder, contact the Help Desk at support@joinlane.com and we will be happy to help!

Was this article helpful?
0 out of 0 found this helpful