| id |
title |
description |
summary |
artifact_type |
domain |
topic |
content_format |
complexity |
audience |
tasks |
refs |
tags |
keywords |
| slds.guidance.blueprints |
SLDS Blueprints Index |
Complete index of SLDS blueprints by category with Lightning component mapping |
Index of SLDS blueprints across 9 categories (Actions, Input, Layout, Navigation, Display, Data, Feedback, Overlay, Complex Components). Covers when to use blueprints vs Lightning Base Components. |
index |
blueprints |
blueprints |
structured |
intermediate |
|
|
| slds.guidance.development |
| slds.guidance.design |
| slds.guidance.icons |
|
| blueprints |
| components |
| html |
| css |
| implementation |
|
| SLDS blueprints |
| component implementation |
| HTML structure |
| CSS classes |
| Lightning components |
| custom components |
|
SLDS Blueprints Index
Overview
Blueprints provide HTML structure, CSS classes, ARIA requirements, and code examples for each SLDS component. Each blueprint includes:
- HTML structure: Element hierarchy and required markup
- CSS classes: Root, element, modifier, size, and state classes
- Styling hooks: CSS custom properties for theming
- Accessibility: ARIA attributes, keyboard patterns, screen reader guidance
- Code examples: Usage examples for variants
- Lightning component mapping: Corresponding LWC when available
Use blueprints when building custom HTML/CSS, targeting non-Salesforce platforms, or when no Lightning Base Component exists.
Use Lightning Base Components when working within Salesforce (LWC, Aura, Visualforce) — they handle accessibility, events, and framework integration automatically.
Blueprints by Category
Actions
| Blueprint |
Description |
Lightning Component |
| Buttons |
Action triggers with text labels |
lightning-button |
| Button Icons |
Icon-only action triggers |
lightning-button-icon |
| Button Groups |
Related buttons in a row |
lightning-button-group |
| Docked Utility Bar |
Persistent bottom utility panel |
N/A |
Input
Form controls for user input and data entry.
| Blueprint |
Description |
Lightning Component |
| Checkbox |
Binary selection control |
lightning-checkbox |
| Checkbox Button |
Checkbox styled as a button |
lightning-checkbox-button |
| Checkbox Button Group |
Set of checkbox buttons in a fieldset |
lightning-checkbox-group |
| Checkbox Toggle |
Toggle-style checkbox |
lightning-input (type="checkbox-button") |
| Combobox |
Text input with dropdown list |
lightning-combobox |
| Counter |
Number input with increment/decrement controls |
N/A |
| Datepickers |
Calendar date selection |
lightning-input (type="date") |
| Datetime Picker |
Combined date and time selection |
lightning-input (type="datetime") |
| Dueling Picklist |
Multi-select with two lists |
lightning-dual-listbox |
| Expression |
Formula builder interface |
N/A |
| File Selector |
File upload with drag-and-drop |
lightning-file-upload |
| Form Element |
Wrapper for form inputs |
N/A |
| Input |
Text/number input |
lightning-input |
| Lookups |
Search and select from a dataset |
lightning-record-picker |
| Picklist |
Dropdown from predefined options |
lightning-combobox |
| Radio Group |
Single selection from exclusive options |
lightning-radio-group |
| Radio Button Group |
Radio buttons in a styled group |
lightning-radio-group |
| Rich Text Editor |
Text editor with formatting toolbar |
lightning-input-rich-text |
| Select |
Native dropdown selection |
lightning-combobox |
| Slider |
Numeric range input via draggable handle |
lightning-slider |
| Textarea |
Multi-line text input |
lightning-textarea |
| Timepicker |
Time selection interface |
lightning-input (type="time") |
| Visual Picker |
Visual tile-based selection |
lightning-radio-group (with tiles) |
Layout
Components for organizing and structuring content.
| Blueprint |
Description |
Lightning Component |
| Accordion |
Collapsible stacked sections |
lightning-accordion |
| Brand Band |
Visual header with branding |
N/A |
| Builder Header |
Header for app builder interfaces |
N/A |
| Cards |
Container with header/body/footer |
lightning-card |
| Carousel |
Slideshow with navigation controls |
lightning-carousel |
| Docked Form Footer |
Fixed bottom footer for form actions |
N/A |
| Expandable Section |
Collapsible content block |
N/A |
| Page Headers |
Page title, metadata, and actions |
lightning-record-view-form |
| Panels |
Structured side or overlay container |
N/A |
| Split View |
Resizable two-pane layout |
N/A |
| Summary Detail |
Collapsible key-value layout |
N/A |
| Tiles |
Card-like grid content items |
lightning-tile |
Navigation
Components for navigation and wayfinding.
| Blueprint |
Description |
Lightning Component |
| App Launcher |
Grid for app discovery |
N/A |
| Breadcrumbs |
Hierarchical location trail |
lightning-breadcrumbs |
| Dynamic Menu |
Contextual menu in popover |
N/A |
| Global Header |
Primary application header |
N/A |
| Global Navigation |
Main navigation bar |
lightning-navigation |
| Menus |
Contextual action lists |
lightning-menu-item |
| Path |
Linear process stage indicator |
lightning-path |
| Scoped Tabs |
Tabs scoped to a context |
lightning-tabset |
| Tabs |
Switchable content panels |
lightning-tabset |
| Trees |
Hierarchical list |
lightning-tree |
| Vertical Navigation |
Vertical nav menu |
lightning-vertical-navigation |
| Vertical Tabs |
Vertical tab interface |
lightning-vertical-navigation |
Display
| Blueprint |
Description |
Lightning Component |
| Activity Timeline |
Chronological event list |
lightning-activity-timeline |
| Avatar |
User or entity image placeholder |
lightning-avatar |
| Avatar Group |
Stacked avatar collection |
N/A |
| Badges |
Small status label |
lightning-badge |
| Dynamic Icons |
Animated contextual icons |
N/A |
| Files |
File attachment card |
N/A |
| Icons |
SVG icons from SLDS sprite |
lightning-icon |
| Illustration |
Empty/error state graphic |
N/A |
| Pills |
Removable tag or filter token |
lightning-pill |
Data
Components for displaying structured data.
| Blueprint |
Description |
Lightning Component |
| Data Tables |
Sortable tabular data |
lightning-datatable |
| Tree Grid |
Hierarchical data table |
lightning-tree-grid |
Feedback
Components for communicating status and feedback.
| Blueprint |
Description |
Lightning Component |
| Alert |
Page-level status banner |
N/A |
| Notifications |
System notification messages |
N/A |
| Progress Bar |
Linear completion indicator |
lightning-progress-bar |
| Progress Indicator |
Multi-step process tracker |
lightning-progress-indicator |
| Progress Ring |
Circular progress indicator |
lightning-progress-ring |
| Scoped Notifications |
Notification scoped to a container |
N/A |
| Spinners |
Loading state indicator |
lightning-spinner |
| Toast |
Temporary notification message |
N/A |
| Trial Bar |
Trial status and call-to-action bar |
N/A |
Overlay
Components that appear above the main interface.
| Blueprint |
Description |
Lightning Component |
| Docked Composer |
Bottom-docked content creation panel |
N/A |
| Modals |
Blocking dialog overlay |
N/A |
| Popovers |
Contextual overlay anchored to trigger |
N/A |
| Prompt |
Confirmation or input dialog |
N/A |
| Tooltips |
Hover-triggered label |
N/A |
| Welcome Mat |
Onboarding introduction overlay |
N/A |
Complex Components
Advanced components with rich functionality.
| Blueprint |
Description |
Lightning Component |
| Chat |
Chronological chat message display |
N/A |
| Color Picker |
Color selection with hex/swatch input |
N/A |
| Drop Zone |
Drag-and-drop target area |
N/A |
| Feeds |
Chronological activity feed |
N/A |
| List Builder |
Drag-and-drop list ordering |
N/A |
| Map |
Interactive map display |
lightning-map |
| Publishers |
Content creation panel |
N/A |
| Setup Assistant |
Guided onboarding checklist |
N/A |
Framework Notes
- LWC / Aura: Prefer the mapped Lightning component when listed — it handles accessibility and events.
- React / Vue / Angular / plain HTML: Use the blueprint HTML structure and CSS classes directly.
- Customization: Apply styling hooks (CSS custom properties) to theme components without overriding base styles.
