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.
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.