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, 168 variants.
| Accordion | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Activity Timeline | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Alert | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| App Launcher | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Avatar | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base | ||||
| Initials |
| Avatar Group | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base | ||||
| Grouped |
| Badges | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Brand Band | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Breadcrumbs | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Builder Header | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base | ||||
| Toolbar |
| Button Groups | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base | ||||
| List | ||||
| Row |
| Button Icons | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base | ||||
| Bordered Filled Container | ||||
| Bordered Inverse | ||||
| Bordered Transparent Container | ||||
| Brand | ||||
| Inverse | ||||
| Stateful | ||||
| Transparent Container |
| Buttons | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base | ||||
| Dual Stateful | ||||
| Stateful | ||||
| With Icon |
| Cards | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base | ||||
| Einstein | ||||
| Wrapper |
| Carousel | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Chat | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base | ||||
| Past |
| Checkbox | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base | ||||
| Form Element |
| Checkbox Button | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Checkbox Button Group | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Checkbox Toggle | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Color Picker | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base | ||||
| Custom Only | ||||
| Predefined Only | ||||
| Swatches Only |
| Combobox | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Autocomplete | ||||
| Base | ||||
| Deprecated Inline Listbox | ||||
| Deprecated Multi Entity | ||||
| Deprecated Readonly | ||||
| Dialog | ||||
| Grouped |
| Counter | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Data Tables | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Advanced | ||||
| Base | ||||
| Hidden Header | ||||
| Inline Edit | ||||
| Responsive |
| Datepickers | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base | ||||
| Range |
| Datetime Picker | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Docked Composer | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| 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 Picklist | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Dynamic Icons | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Ellie | ||||
| Eq | ||||
| Global Action Help | ||||
| Score | ||||
| Strength | ||||
| Trend | ||||
| Typing | ||||
| Waffle |
| Dynamic Menu | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Expandable Section | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Expression | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base | ||||
| Custom Logic | ||||
| Filters | ||||
| Formula |
| Feeds | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base | ||||
| Post |
| File Selector | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base | ||||
| Image | ||||
| Integrated |
| Files | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Form Element | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Address | ||||
| Base | ||||
| Compound | ||||
| Horizontal | ||||
| Record Detail | ||||
| Stacked |
| Global Header | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Global Navigation | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Navigation Bar | ||||
| Navigation Tab Bar |
| Icons | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Action | ||||
| Base | ||||
| Custom | ||||
| Doctype | ||||
| Standard |
| Illustration | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Input | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base | ||||
| Base |
| List Builder | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Lookups | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Autocomplete | ||||
| Base | ||||
| Grouped |
| Map | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Menus | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Dropdown |
| Modals | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Notifications | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Page Headers | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base | ||||
| Object Home | ||||
| Record Home | ||||
| Record Home Vertical | ||||
| Related List |
| Panels | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base | ||||
| Filtering |
| Path | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Picklist | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Pills | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base | ||||
| Listbox Of Pill Options |
| Popovers | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base | ||||
| Error | ||||
| Feature | ||||
| Panels | ||||
| Prompt | ||||
| Walkthrough | ||||
| Warning |
| Progress Bar | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base | ||||
| Vertical |
| Progress Indicator | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base | ||||
| Vertical |
| Progress Ring | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Prompt | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Publishers | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base | ||||
| Comment |
| Radio Button Group | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Radio Group | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Rich Text Editor | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Scoped Notifications | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Scoped Tabs | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Select | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Setup Assistant | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Slider | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Spinners | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Split View | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Summary Detail | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Tabs | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base | ||||
| Mobile Stack | ||||
| Sub Tabs |
| Textarea | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Tiles | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Timepicker | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Toast | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Tooltips | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Tree Grid | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Trees | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Trial Bar | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Header |
| Vertical Navigation | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| List | ||||
| Radio Group |
| Vertical Tabs | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base |
| Visual Picker | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Coverable Content | ||||
| Link | ||||
| Non Coverable Content | ||||
| Vertical |
| Welcome Mat | Responsive | Adaptive | Styling Hooks | Prototype |
|---|---|---|---|---|
| Base | ||||
| Info Only | ||||
| Splash | ||||
| Trailhead Connected |