| Category | Value |
|---|---|
| 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 |
| Field | Description |
|---|---|
| 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
Select Container from the Component type drop down list and click the Add new Component or Add another Component button.
Provide a logical Heading for this grouping of components that you are going to add to the Container.
Check Hide heading if you do not want the Heading to be visible on the page.
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.
Select a Background color if desired.
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.