Boxed Content

Implementing Boxed Content creates an outlined block of content with the heading color you choose. There are four heading color options: blue, light blue, black and gray. If no color is specified, the header will be clear.

Difficulty: 2 out of 5 stars

Notes about implementing Boxed Content

• Place your header text into an h3
• Wrap the content for the block within a div
• Wrap the header and the div within another div. This div receives class="boxed" plus other classes separated with spaces. The classes this div has will determine the placement and look of the box
  • boxed: Declares that this is boxed content. Present in all cases
  • boxed-left: Floats the box to the left of the page
  • boxed-clearLeft: In the event of multiple boxed content (as in the examples) drops the box beneath the other floated box on the left
  • boxed-Right: Floats the box to the right of the page
  • boxed-clearRight: In the event of multiple boxed content (as in the examples) drops the box beneath the other floated box on the right
  • boxed-blue: Makes the header color blue
  • boxed-lightBlue: Makes the header color light blue
  • boxed-black: Makes the header color black
  • boxed-gray: Makes the header color gray

Why use Boxed Content?

Including boxed content on a page is useful when you have one or more sets of supplemental content that are relevant to but different from the main content of the page. For example, consider the type of content that appears in sidebars within magazine articles.

If you use a colored heading, Boxed Content can also bring attention to the content in the box, as the is attracted to saturated color. Using Boxed Content may also allow you to fit all content on one page.