Boxouts

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 More

Boxouts 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 (Boxout block editor icon) 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 (Boxout WYSIWYG toolbar icon) 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: leftright)

Set to float the boxout either left or right

(default value: none)

class

(string) (optional)

Set custom CSS class(es)

(default value: none)