Containers
Last updated: September 8, 2015 at 19:03 pm

On our sites, content may be placed into visual containers to help users recognize blocks of related items. Below are the approved visual styles for these content containers.


Visual example of the element:


What problem does this element or pattern solve?
It is sometimes advisable to visually separate various blocks of content so users can quickly see information which belongs together. This addresses the Universal Design Principles of Proximity and Chunking. Using consistent styling for these containers allows us to maintain adherence to the grid, provides a unified look for the same types of page content, and presents an organized and welcoming page design for users.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web, Desktop App, Tablet App, Smartphone App

An example of this element or pattern in production:


Detailed specifications

Specifications To Consider

  • Define the approved shapes for your containers. Will they have square or rounded corners? Will your site present content in circle containers?
  • Do you permit nested containers? In other words, can a box contain another box?
  • Define any special effects such as shadows or borders. Be sure to specify the precise CSS settings to ensure consistency.
  • If the containers have borders, are those borders on the interior, center, or exterior of the content box? (This is important for developers, otherwise two containers that are exactly the same numerical dimensions may appear to be different sizes.)
  • Define your permissible colors. Are all containers white/gray or do you permit colors?
  • Are reverse containers permitted (dark containers with white text)? If so, is there a minimum type size within reverse containers to ensure legibility? Reminder: Always check for WCAG compliance.

Sample Content

FULL WIDTH CONTAINERS

Use for detail charts, notes, etc. Never for main body copy.

  • Shape: Rectangle
  • Stroke: Solid, 1px, YourCompany Medium Gray
  • Fill/Background: YourCompany Light Gray

INNER CONTAINERS

Use inside full width containers for quotes, prices, and photos.

  • Shape: Rounded Rectangle
  • Corner Radius: 8px
  • Stroke: None
  • Fill/Background: #FFFFFF (White)
  • Max Width: 45%


Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository

http://www.yourcompany.com/developmentassets



Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
modules, blocks
Related elements within this Style Framework:


Owners and governance
UX or design 0wner
John Designowner
Email: design.owner@yourcompany.com
Business or marketing owner
Mary Businessowner
Email: business.owner@yourcompany.com
Development owner
Mike Devowner
Email: development.owner@yourcompany.com


Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)


Comments & Questions

One Comment

Leave a Reply