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 

1. Dragging over a container component and applying the “notebox” class to the “CSS Class” property of the container.
2. 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

1. Dragging over a container component and applying the “notebox” class to the “CSS Class” property of the container.
   
2. 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