This is an advanced component reserved for use by the UCS Web team. AEM authors may update existing Grid Containers but should not create new ones.
Grid Container component
The Grid Container enables you to do four things:
- Insert a grid of a predefined width for a section of content to live within.
- Group multiple components together so you can move or reference them as a single piece of content.
- Add a background tint or image to highlight a section of content on a page.
- Set a timer to automatically show or hide content.
Component(s) you might want to use with this one:
| Style | |
|---|---|
| Container type: Choose from the following grid widths |
|
| Background |
|
| Spacing (desktop) | |
Margin: This is the amount of space, in pixels, above and below the Grid Container. Padding: This is the amount of space, in pixels, inside the Grid Container. The pixel values below are available for both the Top and Bottom margins and the Top and Bottom paddings.
|
|
| Spacing (mobile) | |
| The pixel values selected for desktop are by default inherited on mobile. If you select large spacing values for desktop, be sure to select smaller values for mobile.
|
|
| Additional class | |
| Class name | DO NOT USE – reserved for the UCS Web team |
Background image tab
This option is rarely used. Reserved for the UCS Web team.
Active times tab
Hours option (rarely used)
Displays the grid's content for a specified duration on a specified day of the week:
- Click Add Item.
- Set a Day of the week.
- Set the Start and End times.
- Click the red circle to cancel the active times; this means your grid will always be visible.
Date range option (commonly used)
Displays the grid's content for a specified duration over a specified range of days:
- Click Add Item.
- Set the Start and End days and times.
- Click the red circle to cancel the active times; this means your grid will always be visible.
Guidelines
IMPORTANT: The Grid Container component is only to be used on the Full browser window template.
- The UCS Web team will set up your Grid Container component in most cases when laying out pages that use the Full browser window template.
- If the background colour is a tint, for accessibility purposes, hyperlinks are black with an underline.
- When the background colour is a primary colour, set the text colour to white.
Dos
- Do use a timed Grid Container to feature content with an expiry date, such as a promotional campaign, deadline or cyclical reminders.
- Do use a timed Grid Container to hide content temporarily from the live site; sometimes this is preferable to deleting the content.
Don'ts
- Don't use the Grid Container component on a template that is not the Full browser window template. The Full browser window template is the only template that does not come with a preset grid; this is why the Grid Container component was developed.
- Don't ‘nest’ a Grid Container inside a Grid Container.
- Avoid using both Active Hours and Active Times; this could result in your content not appearing correctly at the right time.
- Don't choose colour combinations that are not accessible (i.e., a primary background colour with black text).
Black text on a primary colour is not accessible.
Helpful tips & "gotchas"
- A good starting point is to use 60px of top and bottom padding for desktop and 40px of top and bottom padding for mobile.
- To hide a Grid Container, just set both the Start and End days to the day before; the time doesn't matter.
- If the Date range of a Grid Container is in the past, AEM will display the Grid Container component with a yellow band to indicate the content will not be visible on the live page.
Need support?
The Web team is here to help.