Content Container

The content container snippet restricts website copy from spanning the full width and adds design elements.

Additionally, it allows you to add branded slashes and apply background color. Using the content container snippet can enhance readability, and cultivate a focused and aesthetically pleasing user experience.

The content container snippet can be particularly helpful on our universal templates with no left navigation when viewing on a desktop because it can narrow the reading screen width to 67%. Studies have shown that an optimal line length for readability is generally around 50-75 characters per line. Content that spans the full width of the screen can result in lines that are too long, making it difficult for readers to track their place as they move from one line to the next.

Request Access

If would like access to use the content container snippet, please email Aimee Halstenson at aimee.halstenson@UND.edu.

Usage Guidelines

• Snippet is best used on web pages without left navigation. In most cases, pages without left navigation are index pages.
• Index pages without left navigation can resemble landing pages, but contain useful breadcrumbs and _contact include files.
• Pages without left navigation must use the _contact include files (appear at the bottom of the page).
• Container snippet should be used sparingly. Too many slashes, designs and color bands on a page are not desirable to users.
• Be sure that there are no spaces between container snippets on your page. To eliminate spaces, place your cursor on the outside of the snippet (far right hand side) and hit delete.
  • If using two background colors one after another, there should not be a white band appearing between them.
• Snippet padding and margins should be adjusted to meet your page content. Watch for content overlapping slashes/designs or too much space in between content and design elements.

How to Add the Content Container Snippet

• Place content container snippet on your page.
• In the white content box, add website copy and/or snippets.
• Set content container parameters based on the design you are trying to achieve. All parameters are optional:
  • Snippet width
  • Content width
  • Margins and padding
  • Slashes
  • Background color

Content Container Examples

Here are some examples of how the content container snippet can be applied:

Strategic Programming & Initiatives

• Full-width, universal template page.
• The intro section uses the container snippet at 67% width. Font is centered.
• Green slashes are used throughout page to break up white space. Slashes alternate between left and right side of the screen.

Social Science B.S.

• Program finder template.
• The Flexible Online Social Science Degree section has the light gray arrows background applied with 67% width and top and bottom padding.
• Please note this page was built in the program finder template and all design component used on this page are not available on other templates. For example, the courses section is exclusive to the program finder template and cannot be used in any other template.