Mastering SLDS: A Guide to the Most Used LWC SLDS Examples

Posted bysalesforceforfresherPosted inSalesforce, Top PostTags:

Salesforce Lightning Design System (SLDS) is a comprehensive set of guidelines and resources provided by Salesforce for designing and building user interfaces that are visually appealing and consistent with the Salesforce Lightning Experience. SLDS provides a framework of reusable components, cascading style sheets (CSS), and design tokens that make it easy to create responsive, accessible, and beautiful user interfaces. In this blog, we will explore some of the most commonly used SLDS examples that can help you enhance your Salesforce Lightning applications.

Buttons and Icons:

Buttons and icons are essential elements of any user interface. SLDS provides a wide range of button styles and icons that you can use to create intuitive and interactive user experiences. For example, you can use the SLDS button styles like “slds-button”, “slds-button_neutral”, or “slds-button_brand” to create different types of buttons with varying colors and styles. Additionally, you can leverage the SLDS icon library to include meaningful icons alongside your buttons for improved usability.

Buttons :
<button class="slds-button slds-button_brand">Submit</button>
<button class="slds-button slds-button_neutral">Cancel</button>
view raw salesforce-slds hosted with ❤ by GitHub
Icons :
<li class="site-icon-width-container slds-m-bottom_x-large">
<figure>
<span class="slds-icon_container null slds-icon__svg--default">
<svg class="slds-icon slds-icon-text-default test-class" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#all"></use>
</svg>
</span>
<figcaption class="slds-p-top_x-small slds-text-body_small icon-figcaption">all</figcaption>
</figure>
</li>
<li class="site-icon-width-container slds-m-bottom_x-large">
<figure>
<span class="slds-icon_container null slds-icon__svg--default">
<svg class="slds-icon slds-icon_large" aria-hidden="true">
<use xlink:href="/assets/icons/doctype-sprite/svg/symbols.svg#csv"></use>
</svg>
</span>
<figcaption class="slds-p-top_x-small slds-text-body_small icon-figcaption">csv</figcaption>
</figure>
</li>
<li class="site-icon-width-container slds-m-bottom_x-large">
<figure>
<span class="slds-icon_container slds-icon-standard-account">
<svg class="slds-icon slds-icon_large" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
</svg>
</span>
<figcaption class="slds-p-top_x-small slds-text-body_small icon-figcaption">account</figcaption>
</figure>
</li>
<li class="site-icon-width-container slds-m-bottom_x-large">
<figure>
<span class="slds-icon_container slds-icon-action-delete slds-icon_container_circle">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#delete"></use>
</svg>
</span>
<figcaption class="slds-p-top_x-small slds-text-body_small icon-figcaption">delete</figcaption>
</figure>
</li>
view raw slds-icon hosted with ❤ by GitHub

Grid System:

SLDS offers a responsive grid system that allows you to create consistent layouts for your Salesforce Lightning applications. The grid system is based on a 12-column layout, making it easy to divide the screen into multiple sections. You can use SLDS classes like “slds-grid” and “slds-col” to create responsive grids that adapt to different screen sizes and orientations.

<div class="slds-grid slds-gutters">
<div class="slds-col slds-size_2-of-3">
<span>Column 1</span>
</div>
<div class="slds-col slds-size_1-of-3">
<span>Column 2</span>
</div>
</div>
view raw slds-grid hosted with ❤ by GitHub

Cards:

Cards are commonly used to display information or groups of related data in a visually appealing manner. SLDS provides a card component that allows you to present content in a structured and organized way. With SLDS, you can easily create cards with headers, titles, bodies, footers, and various styling options. You can customize the card’s appearance by using SLDS classes such as “slds-card” and “slds-card__header”.

<article class="slds-card">
<div class="slds-card__header slds-grid">
<header class="slds-media slds-media_center slds-has-flexi-truncate">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-account" title="account">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
</svg>
<span class="slds-assistive-text">Card Header</span>
</span>
</div>
<div class="slds-media__body">
<h2 class="slds-card__header-title">
<a href="#" class="slds-card__header-link slds-truncate" title="Accounts">
<span>Accounts</span>
</a>
</h2>
</div>
<div class="slds-no-flex">
<button class="slds-button slds-button_neutral">New</button>
</div>
</header>
</div>
<div class="slds-card__body slds-card__body_inner">Your card body is here</div>
<footer class="slds-card__footer">
<a class="slds-card__footer-action" href="#">Card Footer <span class="slds-assistive-text">Accounts</span></a>
</footer>
</article>
view raw slds-card hosted with ❤ by GitHub

Modals and Popovers:

Modals and popovers are useful components for displaying additional information or performing specific actions without navigating away from the current page. SLDS offers modal and popover components that can be easily integrated into your Salesforce Lightning applications. By using SLDS classes like “slds-modal” and “slds-popover”, you can create overlay-based UI elements that enhance user interactions.

Modals :
<div class="slds-modal__container">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse">
<svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
</svg>
<span class="slds-assistive-text">Cancel and close</span>
</button>
<div class="slds-modal__header">
<h1 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Header</h1>
</div>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<p>
Modals and popovers are useful components for displaying additional information or performing specific actions without navigating away from the current page. SLDS offers modal and popover components that can be easily integrated into your Salesforce Lightning applications. By using SLDS classes like "slds-modal" and "slds-popover", you can create overlay-based UI elements that enhance user interactions.
</p>
<p>
Modals and popovers are useful components for displaying additional information or performing specific actions without navigating away from the current page. SLDS offers modal and popover components that can be easily integrated into your Salesforce Lightning applications. By using SLDS classes like "slds-modal" and "slds-popover", you can create overlay-based UI elements that enhance user interactions.
</p>
</div>
<div class="slds-modal__footer">
<button class="slds-button slds-button_neutral" aria-label="Cancel and close">Cancel</button>
<button class="slds-button slds-button_brand">Save</button>
</div>
</div>
view raw slds-modals hosted with ❤ by GitHub
Popovers :
<section aria-describedby="dialog-body-id-115" aria-labelledby="dialog-heading-id-120" class="slds-popover slds-nubbin_left slds-popover_medium" role="dialog">
<button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
</svg>
<span class="slds-assistive-text">Close dialog</span>
</button>
<div class="slds-popover__body" id="dialog-body-id-115">
<div class="slds-media">
<div class="slds-media__body">
<header class="slds-popover__header">
<h2 class="slds-text-heading_small" id="dialog-heading-id-120">Header title</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</section>
view raw slds-Popovers hosted with ❤ by GitHub
Another Example :
<template>
<div>
<button class="slds-button slds-button_brand" onclick={openModal}>Open Modal</button>
<div class={modalClass}>
<div class="slds-modal__container">
<div class="slds-modal__header">
<h2 class="slds-text-heading_medium">Modal Header</h2>
</div>
<div class="slds-modal__content">
<p>This is the content of the modal.</p>
</div>
<div class="slds-modal__footer">
<button class="slds-button slds-button_neutral" onclick={closeModal}>Close</button>
<button class="slds-button slds-button_brand">Save</button>
</div>
</div>
</div>
</div>
</template>
view raw slds-Modals_an_Popovers .html hosted with ❤ by GitHub
import { LightningElement, track } from 'lwc';
export default class MyComponent extends LightningElement {
@track modalClass = 'slds-modal';
openModal() {
this.modalClass += ' slds-fade-in-open';
}
closeModal() {
this.modalClass = 'slds-modal';
}
}
view raw slds-Modals and Popovers .js hosted with ❤ by GitHub

Forms and Input Fields:

Forms and input fields are crucial components for collecting user data and enabling data entry. SLDS provides a set of styling classes that allow you to create consistent and visually appealing forms. Whether it’s checkboxes, radio buttons, picklists, or text fields, SLDS offers comprehensive guidelines for designing and aligning form elements in a user-friendly manner.

<template>
<!-- Card component -->
<div class="slds-card">
<div class="slds-card__body slds-p-around_medium">
<!-- Form element -->
<form class="slds-form">
<!-- First Name field -->
<div class="slds-form-element">
<label class="slds-form-element__label">First Name</label>
<div class="slds-form-element__control">
<input type="text" class="slds-input" placeholder="Enter your first name">
</div>
</div>
<!-- Last Name field -->
<div class="slds-form-element">
<label class="slds-form-element__label">Last Name</label>
<div class="slds-form-element__control">
<input type="text" class="slds-input" placeholder="Enter your last name">
</div>
</div>
<!-- Email field -->
<div class="slds-form-element">
<label class="slds-form-element__label">Email</label>
<div class="slds-form-element__control">
<input type="email" class="slds-input" placeholder="Enter your email address">
</div>
</div>
<!-- Role selection -->
<div class="slds-form-element">
<label class="slds-form-element__label">Role</label>
<div class="slds-form-element__control">
<select class="slds-select">
<option>Select a role</option>
<option>Admin</option>
<option>User</option>
</select>
</div>
</div>
<!-- Terms and Conditions checkbox -->
<div class="slds-form-element">
<div class="slds-checkbox">
<input type="checkbox" id="agree" class="slds-checkbox__input">
<label class="slds-checkbox__label" for="agree">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label">I agree to the terms and conditions</span>
</label>
</div>
</div>
<!-- Newsletter subscription checkbox -->
<div class="slds-form-element">
<div class="slds-checkbox">
<input type="checkbox" id="subscribe" class="slds-checkbox__input">
<label class="slds-checkbox__label" for="subscribe">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label">Subscribe to newsletter</span>
</label>
</div>
</div>
<!-- Gender selection radio buttons -->
<div class="slds-form-element">
<div class="slds-radio">
<input type="radio" id="male" class="slds-radio__input" name="gender">
<label class="slds-radio__label" for="male">
<span class="slds-radio_faux"></span>
<span class="slds-form-element__label">Male</span>
</label>
</div>
<div class="slds-radio">
<input type="radio" id="female" class="slds-radio__input" name="gender">
<label class="slds-radio__label" for="female">
<span class="slds-radio_faux"></span>
<span class="slds-form-element__label">Female</span>
</label>
</div>
</div>
<!-- Submit button -->
<div class="slds-form-element">
<button class="slds-button slds-button_neutral" type="submit">Submit</button>
</div>
</form>
</div>
</div>
</template>
view raw Forms and Input Fields hosted with ❤ by GitHub

Data Tables:

Data tables are frequently used to present large sets of data in a tabular format. SLDS provides styling guidelines and classes to create responsive and accessible data tables. You can easily customize the appearance of the tables, apply sorting, filtering, and pagination features, and ensure that the tables are accessible to users with disabilities.

<template>
<!-- Card component -->
<div class="slds-card">
<div class="slds-card__body slds-p-around_medium">
<!-- Table component -->
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<!-- Table header -->
<thead>
<tr class="slds-text-title_caps">
<th scope="col">
<div class="slds-truncate" title="Name">Name</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Email">Email</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Role">Role</div>
</th>
</tr>
</thead>
<!-- Table body -->
<tbody>
<tr>
<td data-label="Name">Shubham</td>
<td data-label="Email">shubham@example.com</td>
<td data-label="Role">Admin</td>
</tr>
<tr>
<td data-label="Name">Vaishnav</td>
<td data-label="Email">Vaishnav@example.com</td>
<td data-label="Role">User</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
view raw Data Tables hosted with ❤ by GitHub

Badges and Labels:

Badges and labels are small visual elements that provide additional information or context to users. SLDS offers classes for creating badges and labels with different colors and styles.

<template>
<!-- Card component -->
<div class="slds-card">
<div class="slds-grid slds-wrap">
<!-- New badge -->
<div class="slds-col slds-large-size_1-of-12 slds-medium-size_1-of-12 slds-size_1-of-12">
<span class="slds-badge slds-badge_lightest">New</span>
</div>
<!-- High Priority badge -->
<div class="slds-col slds-large-size_1-of-12 slds-medium-size_1-of-12 slds-size_1-of-12">
<span class="slds-badge slds-theme_warning">High Priority</span>
</div>
<!-- Completed label -->
<div class="slds-col slds-large-size_1-of-12 slds-medium-size_1-of-12 slds-size_1-of-12">
<span class="slds-badge">Completed</span>
</div>
<!-- Approved label -->
<div class="slds-col slds-large-size_1-of-12 slds-medium-size_1-of-12 slds-size_1-of-12">
<span class="slds-badge slds-theme_success">Approved</span>
</div>
</div>
</div>
</template>
view raw Badges and Labels hosted with ❤ by GitHub

Toast Notifications:

Toast notifications are non-intrusive messages that provide feedback or alerts to users. SLDS provides classes for creating toast notifications with various styles and icons.

<template>
<lightning-button variant="brand" label="Show Toast" onclick={showToast}></lightning-button>
</template>
view raw Success Toast Notifications .html hosted with ❤ by GitHub
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class ToastExample extends LightningElement {
showToast() {
const event = new ShowToastEvent({
title: 'Success!',
message: 'The toast message goes here.',
variant: 'success',
mode: 'dismissable'
});
this.dispatchEvent(event);
}
}
view raw Success Toast Notifications .js hosted with ❤ by GitHub
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class ToastExample extends LightningElement {
showToast() {
const event = new ShowToastEvent({
title: 'Access Denied',
message: 'The toast message goes here.',
variant: 'Base',
mode: 'dismissable'
});
this.dispatchEvent(event);
}
}
view raw Base Toast Notifications .js hosted with ❤ by GitHub
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class ToastExample extends LightningElement {
showToast() {
const event = new ShowToastEvent({
title: 'Alert',
message: 'The toast message goes here.',
variant: 'Warning',
mode: 'dismissable'
});
this.dispatchEvent(event);
}
}
view raw Warning Toast Notifications .js hosted with ❤ by GitHub
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class ToastExample extends LightningElement {
showToast() {
const event = new ShowToastEvent({
title: 'Error',
message: 'The toast message goes here.',
variant: 'Error',
mode: 'dismissable'
});
this.dispatchEvent(event);
}
}
view raw Error Toast Notifications .js hosted with ❤ by GitHub

Tabs:

Tabs are a common UI element used to organize content into multiple sections. SLDS provides classes for creating tab navigation with different styles and layouts.

Vertical Tabs :
<template>
<lightning-tabset variant="vertical"> <!-- Container for the tabs -->
<lightning-tab label="Tab 1" value="1"> <!-- First tab -->
<p>This is the content of Tab 1.</p>
</lightning-tab>
<lightning-tab label="Tab 2" value="2"> <!-- Second tab -->
<p>This is the content of Tab 2.</p>
</lightning-tab>
<lightning-tab label="Tab 3" value="3"> <!-- Third tab -->
<p>This is the content of Tab 3.</p>
</lightning-tab>
</lightning-tabset>
</template>
view raw slds-tabs hosted with ❤ by GitHub
Horizontal Tabs :
<template>
<lightning-card title="Tab Example"> <!-- Lightning card component -->
<div class="slds-tabs_default"> <!-- Container for the tabs -->
<lightning-tabset variant="default"> <!-- Tabset component -->
<lightning-tab label="Tab 1" value="1"> <!-- First tab -->
<p>This is the content of Tab 1.</p>
</lightning-tab>
<lightning-tab label="Tab 2" value="2"> <!-- Second tab -->
<p>This is the content of Tab 2.</p>
</lightning-tab>
<lightning-tab label="Tab 3" value="3"> <!-- Third tab -->
<p>This is the content of Tab 3.</p>
</lightning-tab>
</lightning-tabset>
</div>
</lightning-card>
</template>
view raw Horizontal Tabs hosted with ❤ by GitHub

Spinner:

spinner is a visual component used in Salesforce Lightning to indicate that a process or action is in progress. It consists of a rotating animation with a circular shape. The spinner is commonly used to provide feedback to users while a task is being executed or when data is being loaded. Its purpose is to enhance the user experience by conveying that the system is working on a task and to prevent users from perceiving delays as errors.

<template>
<!-- Button to show the spinner -->
<lightning-button label="Show Spinner" onclick={handleButtonClick}></lightning-button>
<!-- Spinner component, displayed when isLoading is true -->
<lightning-spinner if:true={isLoading} alternative-text="Loading"></lightning-spinner>
<!-- Content that is displayed when isLoading is false -->
<div if:false={isLoading}>
<!-- Your content here -->
</div>
</template>
view raw spinner.html hosted with ❤ by GitHub
import { LightningElement, track } from 'lwc';
export default class MyComponent extends LightningElement {
// Boolean variable to track if the spinner should be shown or not
@track isLoading = false;
// Method triggered when the button is clicked
handleButtonClick() {
// Set isLoading to true to display the spinner
this.isLoading = true;
// Simulating a delay before hiding the spinner
setTimeout(() => {
// Set isLoading back to false to hide the spinner
this.isLoading = false;
}, 2000);
}
}
view raw spinner.js hosted with ❤ by GitHub

Here we come to the end of our blog:

Salesforce Lightning Design System (SLDS) offers a wide range of components and styles to build visually appealing and user-friendly interfaces. In this blog, we explored ten commonly used SLDS examples, including buttons and icons, the grid system, cards, modals and popovers, forms and input fields, data tables, badges and labels, toast notifications, tabs, and progress indicators. By utilizing these examples and adhering to SLDS best practices, you can create cohesive and engaging experiences within your Salesforce Lightning applications.

#SLDS #Salesforce #LightningDesignSystem #UIdevelopment #FrontEndDevelopment #UserInterface #WebDesign #CSS #DesignSystem #UserExperience #UXDesign #WebDevelopment #SalesforceDevelopment #VisualDesign #UIUX #FrontEnd #WebDesignTips #Coding #DevelopmentTips #HTML #CSS3 #salesforceforfresehr #shubhamvsnv #shubhamvaishnav #forfresehr

Leave a comment