Digital Design System

Fact Box: Left Peeking

A simple outlined box intended to delineate factual information, similar to a content quote but stating information not already found on the page.

Keep the amount of text simple. It should not distract from the main content. At all times, the main content should be the visual priority on the page.

You may place this in a left or main column, but please remember to keep a visual balance on the page.

Fact Box Design

<div class="float-xl-left left-peeking">
    <aside class="wtw-fact-box">
        <p class="heading-5 mt-2">Here is text for section title</p>
        <p class="mb-0 pb-0 mt-xs-2">Here's paragraph content that you can lorem ipsum dolor sit amet. And here's <a href="#">a link</a> and more content that you can lorem ipsum dolor sit amet.</p>
    </aside>
</div>

Do not use a Fact Box unless one of the following is true:

  • This content is a pure “aside” – it is not directly related to the main content
  • The content must be visually offset and the use of horizontal divider lines will not suffice
  • Legal reason to visually offset content
  • The content is not already stated on the page. If the content was already stated on the page, you would use a content quote
  • You have ruled out the use of a people quote or content quote

The wrapper tag for this is an <aside> tag which notes to the screenreader that this content is not a part of, but separate from/related to, the main content. Therefore this must not be used for anything that is part of the main content flow.

While there are no other specific accessibility considerations for the fact box wrapper, all other accessibility rules apply. Use semantic HTML markup (e.g. use p tags, ul or li to list content – do not place within a div tag only).

  • Use on: capabilities, insights
  • Not the same as a content callout or people quote
  • Limit use; generally only 1-2 per page maximum
  • You can use any typographic HTML (unordered/ordered lists, sentences)
  • Do not use photography or other imagery inside this module. This is intended for text-only. If you’d like to incorporate an icon, use the Icon + Text Module.
  • Remember to use proper, semantic HTML markup.
  • Use consistent padding on the fact boxes – use the HTML already provided. Do not change this.
  • It is a good idea to label the fact box with a header of some sort for context for the user.

Fact boxes are a way to distinguish content that must be offset from the rest of the main content.

You should not use this module to promote products, services and solutions, as those are best served by using other modules designed for them: carousel, content matrix (Large), Content Matrix (Small), or Products Module.