Virginia Tech® home

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
  1. Drag over a container component
  2. Under "Title and Options" tab, scroll down to the CSS Styles input box.  Add the following style:
    border:solid 1px #ccc;
  3. Under the "Common CSS Properties" tab, add the following to the Padding input box:
    20px
  4. 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. 

An example from an article from news.vt.edu.
In the example above a container with the appropriate CSS styles applied created a "highlight" effect to make the container stand out.