The Box component is a specialized container. It allows you to highlight content, set a timer to display or hide content, and move a Column Control component.
If you'd like to draw attention to a particular piece of content on a page, you can place it in a box that has a colour background or a border. For example:
You can use a box to display content that's only relevant for a brief period of time. By setting active times for the box, the content will be visible when it's relevant and will be hidden when it's no longer relevant. For example:
You cannot move the Column Control component. However, you can move a Box that contains a Column Control. For example:
If your content is temporary and you want to hide it after a certain date, you'll need to set the box active times:
During the active times, all the content in the box will be visible on your live page.
Outside the active times, you'll see a warning message in AEM edit mode: "Time range constraints are not met and this content will not be visible outside of Author's Edit Mode."
If you need to add a Column Control to a page, it's best practice to add a Box and then add a Column Control to the Box. Here's how to do it:
Later on, if you wish to move the Column Control elsewhere on the page, you can do so by moving the Box.
Follow our Design recommendations. This way, the box and its content will be accessible to people with colour blindness.
You'll also need to ensure that all content inside the box meets accessibility requirements:
If the page has a white background, choose light grey or light burgundy for the box.
Alternatively, you can leave the background set to None and check the box beside Show border:
Choose the light accent colour for the box (e.g. light purple) or choose light grey.
Choose a white background for the box:
Choose a light grey or white background for the box:
Only check the box beside Show border if you have a white box on a white or light grey background.
© Concordia University
