Featured content

Wells

Wells are used to highlight specific information within a designated section of a page. This breaks up the flow of content on the page and helps to emphasize and set apart the content that is included. They are generally used on browse, learn, and document detail pages.

Types

Well

Heading

Lorem ipsum dolor sit amet, ei ius adhuc inani iudico, labitur instructior ex pri. Cu pri inani constituto, cum aeque noster commodo.

HTML code snippet

<div class="o-well">
    <p class="h3">Heading</p>
    <p>
Lorem ipsum dolor sit amet, ei ius adhuc inani iudico, labitur instructior ex pri. Cu pri inani constituto, cum aeque noster commodo.
    </p>

<ul class="m-list m-list__links">
    <li class="m-list_item">
        <a class="m-list_link" href="#">Call-to-action link</a>
    </li>
</ul>
</div>

Specs

  • Border: 1px, Gray 40 (#b4b5b6)
  • Background color: Gray 5 (#f7f7f7)
  • Padding at breakpoints 601+: 30 (top), 30 (right) 30 (bottom), 30 (left)
  • Padding at breakpoints 600 and below: 30 (top), 15 (right), 30 (bottom), 15 (left)

  • Single column content only.

Inkwell DEPRECATED

The inkwell was originally developed for use on the cf.gov home page, but was not implemented.

Inkwell modifier

This is a tagline inside an inkwell.

Lorem ipsum dolor sit amet, ei ius adhuc inani iudico, labitur instructior ex pri. Cu pri inani constituto, cum aeque noster commodo cu. Example link.

HTML code snippet

<div class="o-well o-well__inkwell">
    <p class="h4">Inkwell modifier</p>

    <div class="a-tagline a-tagline__xlarge">
        <span class="u-usa-flag"></span>
        <div class="a-tagline_text">
          This is a tagline inside an inkwell.
        </div>
    </div>

    <p>
        Lorem ipsum dolor sit amet, ei ius adhuc inani iudico, labitur
        instructior ex pri. Cu pri inani constituto, cum aeque noster commodo
        cu. <a href="#">Example link</a>.
    </p>
</div>

Use cases

Grey wells should be used to feature content or specific calls to action. They will help visually set apart the content within it, so use sparingly to draw attention to that content.

Ideally, content within a well should not take up more than a third of page content.

Guidelines

Wells should generally be text-based. If content must include imagery or videos, use the featured content module instead.

Examples of types of content to include:

  • Headings (H2 - H5). Headings should be as succinct as possible and 35 characters or less (including spaces)
  • Text (including bullets and numbered lists). Text should be succinct.
  • Links

Behavior

Wells are full width. At breakpoints 600px and under there are slight padding adjustments to maximize real estate on smaller displays.

Edit page