Components › Utilities

Themes

Themes apply a set of styles to an area. They apply a combination of colors for backgrounds, text, and borders.

BoxBox › DefaultBox › SmallBox › X-SmallBox › Xx-SmallBoxdev ready

Preview

Code

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

A box theme applies spacing, a border, and rounded corners to areas ofcontent. Three padding settings are available. You can also add a color theme to your box.

ColorColor › DefaultColor › ShadeColor › TextureColordev ready

Preview

Code

<div class="slds-box slds-theme--default">
  <p>This is a
    <strong>default</strong> theme and here is a <a href="javascript:void(0);">link</a>.</p>
</div>

Use a color theme to apply color to the background and text. Some color themes apply a background image or texture.

Color themes can only be used in addition to box themes, toasts and alerts.

Component Overview

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-box
Applied to:

parent element

Outcome:

Provides 1rem base padding and borders

Required:

No, optional element or modifier

Comments:

--

.slds-box--x-small
Applied to:

.slds-box

Outcome:

Changes padding to .5rem

Required:

No, optional element or modifier

Comments:

--

.slds-box--small
Applied to:

.slds-box

Outcome:

Changes padding to .75rem

Required:

No, optional element or modifier

Comments:

--

.slds-theme--default
Applied to:

.slds-box

Outcome:

Sets the background color to white

Required:

No, optional element or modifier

Comments:

Use in conjunction with .slds-box

.slds-theme--shade
Applied to:

.slds-box

Outcome:

Sets a light gray background color

Required:

No, optional element or modifier

Comments:

Use in conjunction with .slds-box

.slds-theme--alert-texture
Applied to:

Outcome:

Adds striped background

Required:

No, optional element or modifier

Comments:

Added to any .slds-theme--* class to give it the striped look