Utilities

Box

A box theme applies spacing, a border, and rounded corners to areas of content.

About Box#

Three padding settings are available. You can also add a color theme to your box.

Base#

This is a regular-sized box.

<div class="slds-box">
  <p>This is a regular-sized box.</p>
</div>

Examples#

Small#

This is a small box.

<div class="slds-box slds-box_small">
  <p>This is a small box.</p>
</div>

X-Small#

This is an extra-small box.

<div class="slds-box slds-box_x-small">
  <p>This is an extra-small box.</p>
</div>

XX-Small#

This is an extra-extra-small box.

<div class="slds-box slds-box_xx-small">
  <p>This is an extra-extra-small box.</p>
</div>

Overview of CSS Classes#

Selector.slds-box
Summary

Provides 1rem base padding and borders

Restrict*
ModifierTrue

Box Utility Release Notes