Container

Containers allow you to functionally separate components on the page by providing a heading and background color for the components contained within.

CategoryValue
May contain Accordion, Article grid, Calendar, Call to action, Component grid, Event list, Image, Image with call to action, Links, Snippet, Slideshow, Text, Two column split, Video
May be placed in Content region, Region 2, Region 3, Two column split
FieldDescription
Heading Larger text, color dependent upon Background color.  In the examples below, "Sample container #1".
Hide heading Unchecked (default) for visible Heading or checked to hide.
Background color None (default), gold, light gray, steel blue, warm brown or warm gray
Content The field into which the Container's components will be added.  See permitted components in the previous table.

How to add a Container

  1. Select Container from the Component type drop down list and click the Add new Component or Add another Component button.

  2. Provide a logical Heading for this grouping of components that you are going to add to the Container.

  3. Check Hide heading if you do not want the Heading to be visible on the page.

  4. You can specify a unique name for the container in the Anchor tag box to allow deep links to jump to the top of the container.

  5. Select a Background color if desired.

  6. Add desired components to Content.

Things worth mentioning

  • When Hide heading is checked, while not visible, the Heading is still detectable by screen readers.

  • Components within a Container will silently adjust their heading tag levels to improve accessibility.

  • For these reasons, if you have a logical grouping of components, you should place them within a Container even if you do not want a visible heading or background color.

  • Using the Anchor tag field allows links to automatically jump to the specified Container.  These deep links can occur on other pages as well as on the same page as the Container.  Some URL fields in the CMS may not allow relative URLs with the Anchor tag in which case you will need to supply the full URL.  (i.e. https://wmich.edu/web/container#anchor-tag-example instead of just web/container#anchor-tag-example)

  • The Anchor tag field will automatically convert the entered text to lowercase, convert some characters to hyphens and prevent other characters.  The resulting text is what should be used when adding the Anchor tag to the end of a URL.

Examples

This is an example of two Container components in a Two column split component.  The first Container has a Heading of Sample container #1, Background color of steel blue and a Text component added to its Content.  The second Container has a Heading of Sample container #2, but it is not visible because Hide heading is checked.  It has a Background color of warm gray and a Call to action component added to its Content.

Sample container #1

This is a Text component inside a Container.

Sample container #2

This is a Call to action title

This Call to action component has additional text provided here.

Back to the flexible page guide