Border Box Snippet

The border box, gray text box, and blue text box snippets wrap content in a visual box with a slim border on all sides.

The blue text box and gray text box snippets add a light background color in addition to the border. 

When to use the border box snippet

Use the border box, gray text box, or blue text box snippet to bring attention to essential page content.

Snippet View
Published View

Usability guidance

The border box snippet looks the best when used within a column snippet or float box snippet.

It's best not to overuse or nest border boxes as their visual weight on the page will lose value.

Implementation

  1. Open a page in Modern Campus CMS and enter editing mode.
  2. Place your cursor where you would like to place a border box, gray text box, or blue text box.
  3. From the toolbar, select the snippet icon  Snippet icon , which resembles a puzzle piece.
  4. From the list of snippets, select the Border Box, Gray Text Box, or Blue Text Box snippet.
  5. Add your content by replacing the sample text content.
  6. Save and preview.

 

Border Box

Donec sollicitudin molestie malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar.

Blue Text Box

Donec sollicitudin molestie malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar.

Gray Text Box

Donec sollicitudin molestie malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar.