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