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.

Latest Updates

Page last edited:
Show all details
Edit page