EvoToolkit - v3.7.2 (Changelog)


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.



Luke Harrison

Table of contents




A standard box object by itself doesn't do much, and typically would only be used in combination with modifiers.

Hello, I'm a box
<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.

I'm fixed to the top of the viewport.
I'm fixed to the bottom of the viewport.
<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>