Blueprint Overview - Lightning Design System

Jump to Navigation

Component blueprints are framework agnostic, accessible HTML and CSS used to create components in conjunction with our implementation guidelines. For more details, check out the glossary on the FAQ page.

Showing 83 blueprints, 156 variants.

accordion Lightning Component	Responsive	Adaptive	Prototype
base	Checkmark

activity-timeline	Responsive	Adaptive	Prototype
base

alert	Responsive	Adaptive	Prototype
base	Checkmark

app-launcher	Responsive	Adaptive	Prototype
base	Checkmark

avatar Lightning Component	Responsive	Adaptive	Prototype
base	Checkmark
initials	Checkmark

badges Lightning Component	Responsive	Adaptive	Prototype
base	Checkmark

brand-band	Responsive	Adaptive	Prototype
base	Checkmark

breadcrumbs Lightning Component	Responsive	Adaptive	Prototype
base

builder-header	Responsive	Adaptive	Prototype
base
toolbar

button-groups Lightning Component	Responsive	Adaptive	Prototype
base	Checkmark
list	Checkmark
row	Checkmark

button-icons Lightning Component	Responsive	Adaptive	Prototype
base	Checkmark
bordered-filled-container	Checkmark
bordered-inverse	Checkmark
bordered-transparent-container	Checkmark
brand	Checkmark
inverse	Checkmark
stateful	Checkmark
transparent-container	Checkmark

buttons Lightning Component	Responsive	Adaptive	Prototype
base	Checkmark
stateful	Checkmark
with-icon	Checkmark

cards Lightning Component	Responsive	Adaptive	Prototype
base	Checkmark
einstein	Checkmark
wrapper	Checkmark

carousel Lightning Component	Responsive	Adaptive	Prototype
base	Checkmark

chat	Responsive	Adaptive	Prototype
base	Checkmark
past	Checkmark

checkbox Lightning Component	Responsive	Adaptive	Prototype
base	Checkmark
form-element	Checkmark

checkbox-button	Responsive	Adaptive	Prototype
base	Checkmark

checkbox-button-group Lightning Component	Responsive	Adaptive	Prototype
base	Checkmark

checkbox-toggle	Responsive	Adaptive	Prototype
base	Checkmark

color-picker	Responsive	Adaptive	Prototype
base
custom-only
predefined-only
swatches-only

combobox Lightning Component	Responsive	Adaptive	Prototype
base		Checkmark
grouped		Checkmark
inline-listbox		Checkmark
multi-entity		Checkmark
multi-entity		Checkmark
readonly		Checkmark

data-tables Lightning Component	Responsive	Adaptive	Prototype
advanced		Checkmark
base		Checkmark
hidden-header		Checkmark
inline-edit		Checkmark
responsive		Checkmark

datepickers Lightning Component	Responsive	Adaptive	Prototype
base
range

datetime-picker Lightning Component	Responsive	Adaptive	Prototype
base

docked-composer	Responsive	Adaptive	Prototype
base

docked-form-footer	Responsive	Adaptive	Prototype
base

docked-utility-bar	Responsive	Adaptive	Prototype
base

drop-zone	Responsive	Adaptive	Prototype
base

dueling-picklist Lightning Component	Responsive	Adaptive	Prototype
base			Checkmark

dynamic-icons Lightning Component	Responsive	Adaptive	Prototype
ellie
eq
global-action-help
score
strength
trend
typing
waffle

dynamic-menu	Responsive	Adaptive	Prototype
base

expandable-section	Responsive	Adaptive	Prototype
base	Checkmark

expression	Responsive	Adaptive	Prototype
base
custom-logic
filters
formula

feeds	Responsive	Adaptive	Prototype
base
post

file-selector Lightning Component	Responsive	Adaptive	Prototype
base	Checkmark
image	Checkmark
integrated	Checkmark

files	Responsive	Adaptive	Prototype
base

form-element	Responsive	Adaptive	Prototype
base	Checkmark
compound	Checkmark

global-header	Responsive	Adaptive	Prototype
base

global-navigation	Responsive	Adaptive	Prototype
navigation-bar
navigation-tab-bar

icons Lightning Component	Responsive	Adaptive	Prototype
action
base
custom
doctype
standard

illustration	Responsive	Adaptive	Prototype
base

input Lightning Component	Responsive	Adaptive	Prototype
base	Checkmark

list-builder	Responsive	Adaptive	Prototype
base

lookups	Responsive	Adaptive	Prototype
base
grouped
multi-entity

map	Responsive	Adaptive	Prototype
base

menus Lightning Component	Responsive	Adaptive	Prototype
dropdown

modals	Responsive	Adaptive	Prototype
base		Checkmark
base		Checkmark

notifications	Responsive	Adaptive	Prototype
base

page-headers	Responsive	Adaptive	Prototype
base		Checkmark
object-home		Checkmark
record-home		Checkmark
record-home-vertical		Checkmark
related-list		Checkmark

panels	Responsive	Adaptive	Prototype
base
filtering

path Lightning Component	Responsive	Adaptive	Prototype
base

picklist	Responsive	Adaptive	Prototype
base

pills Lightning Component	Responsive	Adaptive	Prototype
base
listbox-of-pill-options

popovers	Responsive	Adaptive	Prototype
base
error
feature
panels
walkthrough
warning

progress-bar Lightning Component	Responsive	Adaptive	Prototype
base	Checkmark
vertical	Checkmark

progress-indicator Lightning Component	Responsive	Adaptive	Prototype
base	Checkmark
vertical	Checkmark

progress-ring	Responsive	Adaptive	Prototype
base	Checkmark

prompt	Responsive	Adaptive	Prototype
base	Checkmark

publishers	Responsive	Adaptive	Prototype
base
comment

radio-button-group Lightning Component	Responsive	Adaptive	Prototype
base	Checkmark

radio-group Lightning Component	Responsive	Adaptive	Prototype
base

rich-text-editor	Responsive	Adaptive	Prototype
base

scoped-notifications	Responsive	Adaptive	Prototype
base	Checkmark

scoped-tabs	Responsive	Adaptive	Prototype
base

select Lightning Component	Responsive	Adaptive	Prototype
base	Checkmark

setup-assistant	Responsive	Adaptive	Prototype
base	Checkmark

slider Lightning Component	Responsive	Adaptive	Prototype
base	Checkmark

spinners Lightning Component	Responsive	Adaptive	Prototype
base	Checkmark

split-view	Responsive	Adaptive	Prototype
base			Checkmark

summary-detail	Responsive	Adaptive	Prototype
base	Checkmark

tabs Lightning Component	Responsive	Adaptive	Prototype
base		Checkmark
mobile-stack		Checkmark
sub-tabs		Checkmark

textarea Lightning Component	Responsive	Adaptive	Prototype
base	Checkmark

tiles Lightning Component	Responsive	Adaptive	Prototype
base	Checkmark

timepicker	Responsive	Adaptive	Prototype
base

toast	Responsive	Adaptive	Prototype
base	Checkmark

tooltips	Responsive	Adaptive	Prototype
base

tree-grid	Responsive	Adaptive	Prototype
base

trees Lightning Component	Responsive	Adaptive	Prototype
base

trial-bar	Responsive	Adaptive	Prototype
header

vertical-navigation Lightning Component	Responsive	Adaptive	Prototype
list	Checkmark
radio-group	Checkmark

vertical-tabs	Responsive	Adaptive	Prototype
base

visual-picker	Responsive	Adaptive	Prototype
coverable-content	Checkmark
link	Checkmark
non-coverable-content	Checkmark
vertical	Checkmark

welcome-mat	Responsive	Adaptive	Prototype
base
trailhead-connected