Salesforce Lightning Design System

https://v1.lightningdesignsystem.com
Admin
Salesforce Lightning Design System is a design system providing ready-to-use components, design...
Tokens:588,944
Snippets:10,253
Trust Score:9.8
Update:2 months ago
Show doc for...
Tokens:
Raw
### Setup Illustration

Source: https://v1.lightningdesignsystem.com/components/illustration

Small illustration for the Setup state.

```html
<div class="slds-illustration slds-illustration_small">
  <svg class="slds-illustration__svg" viewBox="0 0 396 245" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <rect x="77" y="47" width="20" height="28"></rect>
```

--------------------------------

### Setup Action Button

Source: https://v1.lightningdesignsystem.com/components/global-header?variant=base

Standard setup action button for the global header.

```html
<ul class="slds-global-actions">
  <li class="slds-global-actions__item">
    <div class="slds-dropdown-trigger slds-dropdown-trigger_click">
      <button class="slds-button slds-button_icon slds-button_icon slds-button_icon-container slds-button_icon-small slds-global-actions__setup slds-global-actions__item-action" aria-haspopup="true" title="Setup">
```

--------------------------------

### Setup Action Button

Source: https://v1.lightningdesignsystem.com/components/global-header

Standard setup action button implementation for the global header.

```html
<ul class="slds-global-actions">
  <li class="slds-global-actions__item">
    <div class="slds-dropdown-trigger slds-dropdown-trigger_click">
      <button class="slds-button slds-button_icon slds-button_icon_icon slds-button_icon-container slds-button_icon-small slds-global-actions__setup slds-global-actions__item-action" aria-haspopup="true" title="Setup">
```

--------------------------------

### Install DesignSystem via CocoaPods

Source: https://v1.lightningdesignsystem.com/platforms/ios

Commands to install CocoaPods, initialize the project, add the dependency, and install the library.

```bash
$ sudo gem install cocoapods
```

```bash
$ pod init
```

```bash
pod 'DesignSystem'
```

```bash
$ pod install
```

--------------------------------

### Setup Assistant HTML Structure

Source: https://v1.lightningdesignsystem.com/components/setup-assistant

Basic HTML structure for the Setup Assistant component using SLDS classes.

```html
<section class="slds-card">
  <header class="slds-theme_shade slds-p-around_medium slds-m-bottom_small">
    <div>
      <div class="slds-grid slds-grid_align-spread slds-p-bottom_x-small" id="progress-bar-label-id-3">
```

--------------------------------

### Example package.json

Source: https://v1.lightningdesignsystem.com/platforms/heroku

A sample package.json file with 'server.js' as the entry point.

```json
{
  "name": "demo_slds_heroku",
  "version": "0.0.0",
  "description": "demo_slds_heroku",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
```

--------------------------------

### Setup Assistant Hub Structure

Source: https://v1.lightningdesignsystem.com/components/setup-assistant

The HTML structure for a setup assistant step within a hub configuration, utilizing summary details.

```html
<ol class="slds-setup-assistant">
  <li class="slds-setup-assistant__item">
    <article class="slds-setup-assistant__step">
      <div class="slds-summary-detail">
```

--------------------------------

### Base Setup Assistant HTML Structure

Source: https://v1.lightningdesignsystem.com/components/setup-assistant

The foundational HTML structure for a Setup Assistant list item using the slds-setup-assistant class.

```html
<ol class="slds-setup-assistant">
  <li class="slds-setup-assistant__item">
    <article class="slds-setup-assistant__step">
      <div class="slds-setup-assistant__step-summary">
```

--------------------------------

### Install Express Dependency

Source: https://v1.lightningdesignsystem.com/platforms/heroku

Install the Express.js framework as a project dependency using npm.

```bash
$ npm install express --save
```

--------------------------------

### 6-Column Grid Sizing

Source: https://v1.lightningdesignsystem.com/utilities/grid

Example of using 6-column grid sizing classes.

```html
<div class="slds-grid slds-wrap">
  <div class="slds-col slds-size_1-of-6">
    <span>1/6</span>
  </div>
```

--------------------------------

### 12-Column Grid Sizing

Source: https://v1.lightningdesignsystem.com/utilities/grid

Example of using 12-column grid sizing classes to define layout proportions.

```html
<div class="slds-grid slds-wrap">
  <div class="slds-col slds-size_1-of-12">
    <span>1</span>
  </div>
```

--------------------------------

### Create Project Directory and Navigate

Source: https://v1.lightningdesignsystem.com/platforms/heroku

Use these commands to create a new directory for your project and change into it.

```bash
$ mkdir demo_slds_heroku
$ cd demo_slds_heroku
```

--------------------------------

### Initialize npm Project

Source: https://v1.lightningdesignsystem.com/platforms/heroku

Initialize a new npm project. Ensure the entry point is set to 'server.js'.

```bash
$ npm init
```

--------------------------------

### Location Compound Fieldset Example

Source: https://v1.lightningdesignsystem.com/components/form-element?variant=address

Example of a compound fieldset specifically for location inputs.

```html
<fieldset class="slds-form-element slds-form-element_compound">
  <legend class="slds-form-element__legend slds-form-element__label">Location</legend>
  <div class="slds-form-element__control">
    <div class="slds-form-element__row">
```

--------------------------------

### Dark Micro Setup Popover HTML

Source: https://v1.lightningdesignsystem.com/components/popovers?variant=error

Displays a dark-themed popover for micro setup scenarios.

```html
<section aria-describedby="dialog-body-id-48" aria-labelledby="dialog-heading-id-3" class="slds-popover slds-popover_dark slds-nubbin_left" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close slds-button_icon-inverse" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
```

--------------------------------

### Create Server File

Source: https://v1.lightningdesignsystem.com/platforms/heroku

Create the 'server.js' file in the root of your project.

```bash
$ touch server.js
```

--------------------------------

### Implement Chat Started Bookend

Source: https://v1.lightningdesignsystem.com/components/chat?variant=base

Use this HTML structure to display a chat session start indicator.

```html
<div class="slds-chat-bookend">
  <span class="slds-icon_container slds-icon-utility-chat slds-chat-icon">
    <svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chat"></use>
```

--------------------------------

### Dark Micro Setup Alternate Popover HTML

Source: https://v1.lightningdesignsystem.com/components/popovers?variant=error

Displays an alternate dark-themed popover for micro setup scenarios.

```html
<section aria-describedby="dialog-body-id-51" aria-labelledby="dialog-heading-id-3" class="slds-popover slds-popover_dark slds-nubbin_left" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close slds-button_icon-inverse" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
```

--------------------------------

### Web Component Markup Example

Source: https://v1.lightningdesignsystem.com/platforms/lightning/styling-hooks

Example of HTML markup including a custom web component 'fancy-container' and its child elements.

```html
…
  <div class="slds-card__body slds-card__body_inner">
    <fancy-greeting>Hello!</fancy-greeting>
    <p>
      Astro is your friendly guide to everything at Salesforce and helps
      you become the best at anything you want to do. Warm and
      welcoming, they encourage the Salesforce community to achieve
      their goals through trying new things, asking questions, and
      having fun. Curious and always wanting to learn.
    </p>
    <!-- Our new web component -->
    <fancy-container>
      <div class="slds-badge special">Curious</div>
      <div class="slds-badge">Traveler</div>
      <div class="slds-badge">Welcoming</div>
    </fancy-container>
  </div>
…
```

--------------------------------

### Use Icons in Swift

Source: https://v1.lightningdesignsystem.com/platforms/ios

Examples for retrieving Action, Custom, Standard, and Utility icons with optional color and size parameters.

```swift
let icon = UIImage.sldsActionIcon(.addContact, withSize: SLDSSquareIconLarge)

let iconWithColor = UIImage.sldsActionIcon(.addContact, with: UIColor.black, andBGColor: UIColor.white, andSize: SLDSSquareIconLarge)
```

```swift
let icon = UIImage.sldsCustomIcon(.custom1, withSize: SLDSSquareIconLarge)

let iconWithColor = UIImage.sldCustomIcon(.custom1, with: UIColor.black, andBGColor: UIColor.white, andSize: SLDSSquareIconLarge)
```

```swift
let icon = UIImage.sldsStandardIcon(.account, withSize: SLDSSquareIconLarge)

let iconWithColor = UIImage.sldsStandardIcon(.account, with: UIColor.black, andBGColor: UIColor.white, andSize: SLDSSquareIconLarge)
```

```swift
let icon = UIImage.sldsUtilityIcon(.addContact, withSize: SLDSSquareIconLarge)

let iconWithColor = UIImage.sldsUtilityIcon(.addContact, with: UIColor.black, andBGColor: UIColor.white, andSize: SLDSSquareIconLarge)
```

--------------------------------

### Toast Markup Example

Source: https://v1.lightningdesignsystem.com/guidelines/messaging/components/toasts

This is a basic markup example for a toast component. It includes a close button and demonstrates how to structure the content.

```html
<div class="slds-notify slds-notify_toast slds-theme_success" role="status">
  <div class="slds-notify__content">
    <h2 class="slds-text- காணலாம்">Your {{recordType}} {{recordName}} was {{pastTenseAction}}.</h2>
  </div>
</div>
```

--------------------------------

### Create Public Directory and Index HTML

Source: https://v1.lightningdesignsystem.com/platforms/heroku

Create the 'public' directory and an 'index.html' file within it.

```bash
$ mkdir public
$ touch public/index.html
```

--------------------------------

### Implement Help and Training Action

Source: https://v1.lightningdesignsystem.com/components/global-header?variant=base

Use this button structure to trigger the help and training menu.

```html
<ul class="slds-global-actions">
  <li class="slds-global-actions__item">
    <div class="slds-dropdown-trigger slds-dropdown-trigger_click">
      <button class="slds-button slds-button_icon slds-button_icon slds-button_icon-container slds-button_icon-small slds-global-actions__help slds-global-actions__item-action" aria-haspopup="true" title="Help and Training">
```

--------------------------------

### Initialize Git Repository

Source: https://v1.lightningdesignsystem.com/platforms/heroku

This command initializes a new Git repository in your project's root directory. This is a prerequisite for version control and deployment.

```bash
$ git init
```

--------------------------------

### Find Token Sass Example

Source: https://v1.lightningdesignsystem.com/design-tokens

Example of how to find a design token using Sass. This snippet demonstrates the basic structure for querying tokens within a Sass environment.

```Sass
Submit your search query
```

--------------------------------

### Implement Open Menu State

Source: https://v1.lightningdesignsystem.com/components/trial-bar

HTML structure for the trial header in an open menu state, wrapped in a demo container.

```html
<div class="demo-only" style="height:240px">
  <div class="slds-trial-header slds-grid">
    <div class="slds-grid">
      <button class="slds-button slds-m-right_small">Take the salesforce tour</button>

```

--------------------------------

### Lightning Base Component Example

Source: https://v1.lightningdesignsystem.com/accessibility/color-contrast/migration-guide

This is an example of a custom Lightning web component that uses a base component. No action is required as base components automatically implement SLDS 1 blueprints and receive color updates.

```html
<!-- Markup -->
<template>
  <lightning-button>Save</lightning-button>
</template>
```

--------------------------------

### Example App Layout with Cards

Source: https://v1.lightningdesignsystem.com/platforms/lightning/styling-hooks

Demonstrates a basic application layout using SLDS grid and card components to display character information.

```html
<div class="app slds-grid slds-gutters">
  <section className="slds-col slds-size_1-of-1 slds-medium-size_1-of-2 slds-m-bottom_large section section-astro">
    <article class="slds-card">
      <div class="slds-card__header">
        <header>
          <h3 class="slds-card__header-title slds-text-heading_large">
            Astro
          </h3>
        </header>
      </div>
      <div class="slds-card__body slds-card__body_inner">
        <p>
          Astro is your friendly guide to everything at Salesforce and helps
          you become the best at anything you want to do. Warm and
          welcoming, they encourage the Salesforce community to achieve
          their goals through trying new things, asking questions, and
          having fun. Curious and always wanting to learn.
        </p>
        <div class="slds-badge special">Curious</div>
        <div class="slds-badge">Traveler</div>
        <div class="slds-badge">Welcoming</div>
      </div>
    </article>
  </section>
  <section className="slds-col slds-size_1-of-1 slds-medium-size_1-of-2 slds-m-bottom_large section section-codey">
    <article class="slds-card">
      <div class="slds-card__header">
        <header>
          <h3 class="slds-card__header-title slds-text-heading_large">
            Codey
          </h3>
        </header>
      </div>
      <div class="slds-card__body slds-card__body_inner">
        <p>
          It’s hard not to notice Codey—he’s the bear tackling projects and
          getting his paws dirty, all while having a great time. Codey is a
          maker and a builder. Whether it’s coding an app on Salesforce, or
          pouring lattes as a ‘Bearista’, Codey isn’t afraid to get noticed
          or dive in to get things done.
        </p>
        <div class="slds-badge">Builder</div>
        <div class="slds-badge">Fearless</div>
        <div class="slds-badge">Hugger</div>
      </div>
    </article>
  </section>
</div>
```

--------------------------------

### 12-Column Grid Support

Source: https://v1.lightningdesignsystem.com/utilities/grid

Example of a grid container supporting up to 12 columns.

```html
<div class="slds-grid">
  <div class="slds-col">
    <span>1</span>
  </div>
```

--------------------------------

### Implement Responsive Layouts

Source: https://v1.lightningdesignsystem.com/utilities/grid

Apply mobile-first responsive sizing by prefixing classes with breakpoint names like slds-large-size.

```html
<div class="slds-grid slds-wrap">
  <div class="slds-col slds-size_1-of-1 slds-large-size_8-of-12">
    <span>1</span>
  </div>
```
Tokens:
Raw