---
schema_version: "1"
id: ac0220871c7888dfab2263b4a8f6eb22bf67917d253f8d6107bad16e879751ed
title: Lightning Design System Considerations
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/slds/lightning-base-slds.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/lightning-base-slds.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 1149f56c0b22196371b673d18c366221166c6cd933dc823080b31a8c47a01b3d
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# Lightning Design System Considerations

Although the base components provide Salesforce Lightning Design System styling out-of-the-box, you may still want to write some CSS depending on your requirements.

If you're using the components outside of the Salesforce mobile app and Lightning Experience, such as in standalone apps and Lightning Out, extend `force:slds` to apply Lightning Design System styling to your components. Here are several guidelines for using Lightning Design System in base components.

## Using Utility Classes in Base Components

Lightning Design System utility classes are the fundamentals of your component's visual design and promote reusability, such as for alignments, grid, spacing, and typography. Most base components inherits a `class` attribute, so you can add a utility class or custom class to the outer element of the components. For example, you can apply a spacing utility class to `lightning:button`.

```nolang
<lightning:button name="submit" label="Submit" class="slds-m-around_medium"/>
```

The class you add is appended to the base classes that the component includes automatically, resulting in the following rendered element.

```html
<button class="slds-button slds-button_neutral slds-m-around_medium"    
        type="button" name="submit">Submit</button>
```

Similarly, you can create a custom class by adding it to the CSS resource in the component bundle and pass it into the `class` attribute.

```nolang
<lightning:badge label="My badge" class="myCustomClass"/>
```

You have the flexibility to customize the components at a granular level beyond the CSS scaffolding we provide. Let’s look at the `lightning:card` component, where you can create your own body markup. You can apply the `slds-p-horizontal_small` or `slds-card__body_inner` class in the body markup to add padding around the body.

```nolang
<!-- lightning:card example using slds-p-horizontal_small class -->
<lightning:card>
  <aura:set attribute="title">My Account</aura:set>
  <aura:set attribute="footer">Footer</aura:set>
  <aura:set attribute="actions">
    <lightning:button label="New"/>
  </aura:set>
  <p class="slds-p-horizontal_small">
    Card Body
  </p>
  </lightning:card>
```

```nolang
<!-- lightning:card example using slds-card__body_inner -->
<lightning:card>
    <aura:set attribute="title">My Account</aura:set>
    <aura:set attribute="footer">Footer</aura:set>
    <aura:set attribute="actions">
      <lightning:button label="New"/>
    </aura:set>
    <div class="slds-card__body_inner">
      Card Body
    </div>
</lightning:card>  
```

## Block-Element-Modifier (BEM) Notation

CSS class names that are used by base components match the Block-Element-Modifier (BEM) notation that Salesforce Lightning Design System uses. Starting in LWC API version 61.0, class names that previously contained a double dash now use a single underscore in place of the double dash. For example, a CSS class that used to be `slds-p-around--small` is now `slds-p-around_small`. If you have custom CSS in your components that reference an SLDS class that contains a double dash, update your selectors to use a single underscore. See [Lightning Design System FAQ](https://www.lightningdesignsystem.com/resources/faq/#what-css-syntax-does-the-salesforce-lightning-design-system-use-where-did-the-double-hyphenations-go-why-are-their-underscores-in-your-css-classes).

## Applying Custom Component Styling

Sometimes the utility classes aren’t enough and you want to add custom styling in your component bundle. You saw earlier that you can create a custom class and pass it into the `class` attribute. We recommend that you create a class instead of targeting a class name you don’t own, since those classes might change anytime. For example, don’t try to target `.slds-input` or `.lightningInput`, as they are CSS classes that are available by default in base components. You can also consider using tokens to ensure that your design is consistent across your components. Specify values in the token bundle and reuse them in your components’ CSS resources.

## Showing and Hiding with Visibility Classes

Lightning Design System utility classes include visibility classes that enable you to show and hide elements. These classes are designed as show/hide pairs that you add and remove, or toggle, with JavaScript. Apply only one class at a time. See [Lightning Design System: Utilities: Visibility](https://www.lightningdesignsystem.com/utilities/visibility/) for descriptions of the classes. For information about using JavaScript to toggle markup see [Dynamically Showing or Hiding Markup](https://developer.salesforce.com/docs/platform/aura-platform/js-cb/js-cb-show-hide-markup.md).

## Using the Grid for Layout

`lightning:layout` is your answer for a flexible grid system. You can achieve a simple layout by enclosing `lightning:layoutItem` components within `lightning:layout`, which creates a `div` container with the `slds-grid` class. To apply additional Lightning Design System grid classes, specify any combination of the `lightning:layout` attributes. For example, specify `verticalAlign="stretch"` to append the `slds-grid_vertical-stretch` class. You can apply Lightning Design System grid classes to the component using the `horizontalAlign`, `verticalAlign`, and `pullToBoundary` attributes. However, not all grid classes are available through these attributes. To provide additional grid classes, use the `class` attribute. The following grid classes can be added using the `class` attribute.

-   `.slds-grid_frame`
-   `.slds-grid_vertical`
-   `.slds-grid_reverse`
-   `.slds-grid_vertical-reverse`
-   `.slds-grid_pull-padded-x-small`
-   `.slds-grid_pull-padded-xx-small`
-   `.slds-grid_pull-padded-xxx-small`

This example adds the `slds-grid_reverse` class to the `slds-grid` class to reverse the horizontal visual flow of the grid columns.

```nolang
<lightning:layout horizontalAlign="space" class="slds-grid_reverse">
   <lightning:layoutItem padding="around-small">
     <!-- more markup here -->
   </lightning:layoutItem>
   <!-- more lightning:layoutItem components here -->
</lightning:layout>
```

For more information, see [Lightning Design System: Utilities: Grid](https://www.lightningdesignsystem.com/components/utilities/grid/).

**See Also**  


-   [Styling Apps](https://developer.salesforce.com/docs/platform/aura-platform/apps/apps-css.md)
-   [Styling with Design Tokens and Styling Hooks](https://developer.salesforce.com/docs/platform/aura-platform/tokens/tokens-intro.md)