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