Lightning Design System Considerations

Using Utility Classes in Base Components

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

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

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

<!-- 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>

<!-- 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.

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 for descriptions of the classes. For information about using JavaScript to toggle markup see Dynamically Showing or Hiding Markup.

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.

<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>