afv-library/skills/applying-slds/guidance/utilities/box.md

id	title	description	summary	artifact_type	domain	topic	content_format	complexity	audience	tasks	refs	tags	keywords
slds.guidance.utilities.box	Box Utilities	SLDS box utility classes for containers with padding and borders	Utilities for creating styled containers with padding, borders, and interactive states. Use with theme utilities for semantic colors.	reference	utilities	box	structured	intermediate	implementer	implement	slds.guidance.utilities slds.guidance.overview.utilities slds.guidance.utilities.themes slds.guidance.utilities.borders slds.guidance.utilities.padding	utilities box containers padding borders	slds-box slds-box_xx-small slds-box_x-small slds-box_small slds-box_link container padding

Box Utilities

Utilities for creating styled containers with consistent padding, borders, and interactive states.

Core Classes

Class	Purpose
slds-box	Creates a container with 16px padding, rounded corners, and subtle border
slds-box_xx-small	Container with 4px padding for compact layouts
slds-box_x-small	Container with 8px padding for small content areas
slds-box_small	Container with 12px padding for slightly reduced spacing
slds-box_link	Makes box clickable with hover/focus states and accent border

Related Utilities

• Themes Utilities - For background colors and semantic theming (success, error, warning, info), see Themes Utilities
• Borders Utilities - For directional borders, see Borders Utilities
• Spacing Utilities - For padding control, see Padding Utilities

Common Patterns

Basic Container

<!-- Standard box container with default 16px padding -->
<div class="slds-box">
  <h3 class="slds-text-heading_small">Container Title</h3>
  <p>Content with consistent padding and subtle border styling.</p>
</div>

Themed Notification Box

<!-- Success notification with semantic colors (see themes.md for theme utilities) -->
<div class="slds-box slds-theme_success">
  <div class="slds-media">
    <div class="slds-media__figure">
      <span class="slds-icon_container">
        <svg class="slds-icon slds-icon_small">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#success"></use>
        </svg>
      </span>
    </div>
    <div class="slds-media__body">
      <p>Operation completed successfully.</p>
    </div>
  </div>
</div>

Interactive Box Link

<!-- Clickable box that navigates to detail view -->
<a href="/record/detail" class="slds-box slds-box_link">
  <h3 class="slds-text-heading_small">Account Name</h3>
  <dl class="slds-list_horizontal slds-wrap">
    <dt class="slds-item_label">Type:</dt>
    <dd class="slds-item_detail">Customer</dd>
    <dt class="slds-item_label">Revenue:</dt>
    <dd class="slds-item_detail">$1.2M</dd>
  </dl>
</a>

Compact Info Card

<!-- Small padding variant for dense layouts (see themes.md for theme utilities) -->
<div class="slds-box slds-box_x-small slds-theme_shade">
  <div class="slds-grid slds-grid_align-spread">
    <span class="slds-text-body_small">Last Updated</span>
    <span class="slds-text-body_small">2 hours ago</span>
  </div>
</div>

Error Message Box

<!-- Error state with semantic styling (see themes.md for theme utilities) -->
<div class="slds-box slds-theme_error" role="alert">
  <h3 class="slds-text-heading_small">Validation Error</h3>
  <ul class="slds-list_dotted">
    <li>Email address is required</li>
    <li>Phone number format is invalid</li>
  </ul>
</div>

Best Practices

✅ Use slds-box for consistent container styling across components ✅ Combine box utilities with theme utilities (see Themes Utilities) for semantic state communication ✅ Use slds-box_link for entire containers that are clickable ✅ Combine size variants with theme classes for flexible layouts ✅ Apply role="alert" to error and warning themed boxes for accessibility

❌ Don't nest multiple slds-box containers without purpose ❌ Don't apply slds-box_link to non-interactive elements ❌ Don't override box padding with inline styles - use the size variants instead