Use boxouts to contain text that is ancillary to the page’s content. That is, content that supports the rest of the page’s message without being directly related. For example, on a page that describes URI’s excellent location, a boxout might include links to area attractions or a map.
Overview
Here’s an example boxout:
Expeditions
Each year, we conduct more than a dozen expeditions around the world. In pursuit of our research goals, teams travel to some of the remotest regions and endure some of the harshest conditions on the planet.
Learn MoreBoxouts can contain other components, like buttons, lists, and images. They can also be floated to the left or right of other page content. Floated boxouts are narrower, taking up about a third of the page width on desktop browsers.
Adding a Boxout
On sites using the Block Editor, boxouts () can be added from the block library, under the Component Library section. Boxout content can be edited directly.
On sites using the older Visual Editor, boxouts can be added by choosing the Boxout pictograph () from the editor’s toolbar. Use the editor dialogue to add content and adjust options. To edit the boxout later, double-click the boxout preview to show the editor dialogue again.
Technical Details
Boxouts can be implemented with the shortcode cl-boxout
.
[cl-boxout title="A Great Title"]The body text, html, or other shortcodes[/cl-boxout]
Boxouts can contain nested shortcodes, like buttons.
Attributes
title
(string) (optional)
The text for a title
(default value: none)
float
(string) (optional) (values: left
, right
)
Set to float the boxout either left or right
(default value: none)
class
(string) (optional)
Set custom CSS class(es)
(default value: none)