Component Blueprints

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 85 blueprints, 178 variants.
AccordionLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Checkmark
Activity Timeline
Responsive
Adaptive
Styling Hooks
Prototype
Base
Alert
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Checkmark
App Launcher
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
AvatarLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Checkmark
Initials
Checkmark
Checkmark
Avatar Group
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Grouped
Checkmark
BadgesLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Checkmark
Brand Band
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
BreadcrumbsLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Builder Header
Responsive
Adaptive
Styling Hooks
Prototype
Base
Toolbar
Button GroupsLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
List
Checkmark
Row
Checkmark
Button IconsLightning Component
Responsive
Adaptive
Styling Hooks
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
Styling Hooks
Prototype
Base
Checkmark
Checkmark
Dual Stateful
Checkmark
Checkmark
Stateful
Checkmark
Checkmark
With Icon
Checkmark
Checkmark
CardsLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Einstein
Checkmark
Wrapper
Checkmark
CarouselLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Chat
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Past
Checkmark
CheckboxLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Form Element
Checkmark
Checkbox ButtonLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Checkbox Button Group
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Checkbox ToggleLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Color PickerLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Custom Only
Predefined Only
Swatches Only
ComboboxLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Autocomplete
Checkmark
Base
Checkmark
Deprecated Inline Listbox
Checkmark
Deprecated Multi Entity
Checkmark
Deprecated Readonly
Checkmark
Dialog
Checkmark
Grouped
Checkmark
Listbox
Checkmark
Listbox
Checkmark
Listbox
Checkmark
Counter
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Data TablesLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Advanced
Checkmark
Base
Checkmark
Hidden Header
Checkmark
Inline Edit
Checkmark
Responsive
Checkmark
Checkmark
DatepickersLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Range
Datetime PickerLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Docked Composer
Responsive
Adaptive
Styling Hooks
Prototype
Base
Listbox
Docked Form Footer
Responsive
Adaptive
Styling Hooks
Prototype
Base
Docked Utility Bar
Responsive
Adaptive
Styling Hooks
Prototype
Base
Drop Zone
Responsive
Adaptive
Styling Hooks
Prototype
Base
Dueling PicklistLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Listbox
Dynamic IconsLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Ellie
Eq
Global Action Help
Checkmark
Score
Strength
Trend
Typing
Waffle
Dynamic Menu
Responsive
Adaptive
Styling Hooks
Prototype
Base
Expandable Section
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Expression
Responsive
Adaptive
Styling Hooks
Prototype
Base
Custom Logic
Filters
Formula
Feeds
Responsive
Adaptive
Styling Hooks
Prototype
Base
Post
File SelectorLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Image
Checkmark
Integrated
Checkmark
Files
Responsive
Adaptive
Styling Hooks
Prototype
Base
Form ElementLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Address
Checkmark
Base
Checkmark
Compound
Checkmark
Horizontal
Checkmark
Listbox
Checkmark
Record Detail
Checkmark
Stacked
Checkmark
Global Header
Responsive
Adaptive
Styling Hooks
Prototype
Base
Listbox
Global Navigation
Responsive
Adaptive
Styling Hooks
Prototype
Navigation Bar
Navigation Tab Bar
IconsLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Action
Checkmark
Checkmark
Base
Checkmark
Checkmark
Custom
Checkmark
Checkmark
Doctype
Checkmark
Checkmark
Standard
Checkmark
Checkmark
Illustration
Responsive
Adaptive
Styling Hooks
Prototype
Base
InputLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Base
Checkmark
List Builder
Responsive
Adaptive
Styling Hooks
Prototype
Base
LookupsLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Autocomplete
Base
Grouped
Listbox
MapLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
MenusLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Dropdown
Listbox
Modals
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Checkmark
Notifications
Responsive
Adaptive
Styling Hooks
Prototype
Base
Page Headers
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Object Home
Checkmark
Record Home
Checkmark
Record Home Vertical
Checkmark
Related List
Checkmark
Panels
Responsive
Adaptive
Styling Hooks
Prototype
Base
Filtering
Path
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
PicklistLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
PillsLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Listbox Of Pill Options
Checkmark
Popovers
Responsive
Adaptive
Styling Hooks
Prototype
Base
Error
Feature
Listbox
Panels
Prompt
Walkthrough
Warning
Progress BarLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Vertical
Checkmark
Progress IndicatorLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Vertical
Checkmark
Progress RingLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Checkmark
Prompt
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Publishers
Responsive
Adaptive
Styling Hooks
Prototype
Base
Comment
Radio Button GroupLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Radio GroupLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Rich Text EditorLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Scoped Notifications
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Scoped TabsLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Select
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Setup Assistant
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
SliderLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
SpinnersLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Split View
Responsive
Adaptive
Styling Hooks
Prototype
Base
Summary Detail
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
TabsLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Checkmark
Mobile Stack
Checkmark
Checkmark
Sub Tabs
Checkmark
Checkmark
TextareaLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
TilesLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
TimepickerLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Toast
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Checkmark
TooltipsLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Tree GridLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
TreesLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
Base
Checkmark
Trial Bar
Responsive
Adaptive
Styling Hooks
Prototype
Header
Vertical NavigationLightning Component
Responsive
Adaptive
Styling Hooks
Prototype
List
Checkmark
Radio Group
Checkmark
Vertical Tabs
Responsive
Adaptive
Styling Hooks
Prototype
Base
Visual Picker
Responsive
Adaptive
Styling Hooks
Prototype
Coverable Content
Checkmark
Link
Checkmark
Non Coverable Content
Checkmark
Vertical
Checkmark
Welcome Mat
Responsive
Adaptive
Styling Hooks
Prototype
Base
Info Only
Splash
Trailhead Connected