A simple undecorated object pattern which allows you to box off content. Takes inspiration from the island object first detailed in this article.
Note: Some examples feature light grey backgrounds so it's easier to see what's going on. In the toolkit itself, these are transparent.
A standard box object by itself doesn't do much, and typically would only be used in combination with modifiers.
<div class='o-box'>Hello, I'm a box</div>
A list of modifiers for the box component, allowing you to change its appearance to fit a variety of roles and scenarios.
Modifiers can typically be combined to achieve the desired appearance, unless stated otherwise.
When active, these modifiers will fix a box to either the top or bottom of the viewport and keep it in place as the user scrolls. These are useful for bringing maximum attention to a box, as the user isn't likely to miss it.
By default, examples aren't shown. Click the button below to toggle them.
<button class="c-button js-toggle-fixed">Toggle Fixed Boxes</button> <div class="o-box o-box--fixed-top u-theme-primary u-hide">I'm fixed to the top of the viewport.</div> <div class="o-box o-box--fixed-bottom u-theme-pop u-hide">I'm fixed to the bottom of the viewport.</div>