Blueprint Overview

Blueprint Overview

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, 157 variants.
accordionLightning 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
avatarLightning Component
Responsive
Adaptive
Prototype
base
Checkmark
initials
Checkmark
badgesLightning Component
Responsive
Adaptive
Prototype
base
Checkmark
brand-band
Responsive
Adaptive
Prototype
base
Checkmark
breadcrumbsLightning Component
Responsive
Adaptive
Prototype
base
builder-header
Responsive
Adaptive
Prototype
base
toolbar
button-groupsLightning Component
Responsive
Adaptive
Prototype
base
Checkmark
list
Checkmark
row
Checkmark
button-iconsLightning 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
buttonsLightning Component
Responsive
Adaptive
Prototype
base
Checkmark
stateful
Checkmark
with-icon
Checkmark
cardsLightning Component
Responsive
Adaptive
Prototype
base
Checkmark
einstein
Checkmark
wrapper
Checkmark
carouselLightning Component
Responsive
Adaptive
Prototype
base
Checkmark
chat
Responsive
Adaptive
Prototype
base
Checkmark
past
Checkmark
checkboxLightning Component
Responsive
Adaptive
Prototype
base
Checkmark
form-element
Checkmark
checkbox-button
Responsive
Adaptive
Prototype
base
Checkmark
checkbox-button-groupLightning 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
comboboxLightning Component
Responsive
Adaptive
Prototype
base
Checkmark
grouped
Checkmark
inline-listbox
Checkmark
multi-entity
Checkmark
multi-entity
Checkmark
readonly
Checkmark
data-tablesLightning Component
Responsive
Adaptive
Prototype
advanced
Checkmark
base
Checkmark
hidden-header
Checkmark
inline-edit
Checkmark
responsive
Checkmark
datepickersLightning Component
Responsive
Adaptive
Prototype
base
range
datetime-pickerLightning 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-picklistLightning Component
Responsive
Adaptive
Prototype
base
Checkmark
dynamic-iconsLightning 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-selectorLightning 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
iconsLightning Component
Responsive
Adaptive
Prototype
action
base
custom
doctype
standard
illustration
Responsive
Adaptive
Prototype
base
inputLightning 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
menusLightning 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
pathLightning Component
Responsive
Adaptive
Prototype
base
picklist
Responsive
Adaptive
Prototype
base
pillsLightning Component
Responsive
Adaptive
Prototype
base
listbox-of-pill-options
popovers
Responsive
Adaptive
Prototype
base
error
feature
panels
walkthrough
warning
progress-barLightning Component
Responsive
Adaptive
Prototype
base
Checkmark
vertical
Checkmark
progress-indicatorLightning 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-groupLightning Component
Responsive
Adaptive
Prototype
base
Checkmark
radio-groupLightning 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
selectLightning Component
Responsive
Adaptive
Prototype
base
Checkmark
setup-assistant
Responsive
Adaptive
Prototype
base
Checkmark
sliderLightning Component
Responsive
Adaptive
Prototype
base
Checkmark
spinnersLightning Component
Responsive
Adaptive
Prototype
base
Checkmark
split-view
Responsive
Adaptive
Prototype
base
Checkmark
summary-detail
Responsive
Adaptive
Prototype
base
Checkmark
tabsLightning Component
Responsive
Adaptive
Prototype
base
Checkmark
mobile-stack
Checkmark
sub-tabs
Checkmark
textareaLightning Component
Responsive
Adaptive
Prototype
base
Checkmark
tilesLightning 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
treesLightning Component
Responsive
Adaptive
Prototype
base
base
trial-bar
Responsive
Adaptive
Prototype
header
vertical-navigationLightning 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