Container Highlight Boxes: How-To
This use of the container component is used to bring attention to content. Examples include commonly used numbers or IDs, notices, or important topics that require a heading, short description and a call-to-action link.
In the above example, a highlight box was used to bring attention to the Office of Postdoctoral Affairs description.
General Highlight Box
This can be created by
- Dragging over a container component and applying the “notebox” class to the “CSS Class” property of the container.
- Within the container, add a text and call-to-action element. Text will be formatted with the paragraph <p> tag. Call-to-action link component will be used to create the button using the following styling:
- Dark
- Filled
- Text-Uppercase
- Center alignment
Topic Highlight
This can be created by
- Dragging over a container component and applying the “notebox” class to the “CSS Class” property of the container.
- Within the container, add a text and call-to-action element. Heading text will be formatted with the Heading 3 <h3> tag and the description paragraph text will be formatted with the paragraph <p> tag. Call-to-action link component will be used to create the button using the following styling:
- Dark
- Filled
- Text-Uppercase
- Right alignment
- Drag over a container component
- Under "Title and Options" tab, scroll down to the CSS Styles input box. Add the following style:
border:solid 1px #ccc; - Under the "Common CSS Properties" tab, add the following to the Padding input box:
20px - Left-click the "checkmark" icon to accept your changes.
You can now add a text component, call-to-action button component, etc. to the Container and the applicable style will be applied to the container component.