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="a-link a-link--jump" href="#"><span class="a-link__text">Call-to-action link</span></a>
</li>
</ul>
</div>Use cases
Wells should be used to feature content or specific call to actions. They should be used sparingly and ideally 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), which should be 35 characters including spaces or less
- Succinct text including bullets and numbered lists
- Links
Behavior
Wells are full width. At breakpoints 600px and under there are slight padding adjustments to maximize real estate on smaller displays.