mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-08-06 15:59:59 +08:00
214 lines
9.0 KiB
Markdown
214 lines
9.0 KiB
Markdown
---
|
|
id: slds.guidance.blueprints
|
|
title: SLDS Blueprints Index
|
|
description: Complete index of SLDS blueprints by category with Lightning component mapping
|
|
summary: "Index of SLDS blueprints across 9 categories (Actions, Input, Layout, Navigation, Display, Data, Feedback, Overlay, Complex Components). Covers when to use blueprints vs Lightning Base Components."
|
|
|
|
artifact_type: index
|
|
domain: blueprints
|
|
topic: blueprints
|
|
|
|
content_format: structured
|
|
complexity: intermediate
|
|
audience: [implementer]
|
|
|
|
tasks: [choose, learn]
|
|
|
|
refs:
|
|
- slds.guidance.development
|
|
- slds.guidance.design
|
|
- slds.guidance.icons
|
|
|
|
tags: [blueprints, components, html, css, implementation]
|
|
keywords: [SLDS blueprints, component implementation, HTML structure, CSS classes, Lightning components, custom components]
|
|
---
|
|
|
|
# SLDS Blueprints Index
|
|
|
|
## Overview
|
|
|
|
Blueprints provide HTML structure, CSS classes, ARIA requirements, and code examples for each SLDS component. Each blueprint includes:
|
|
|
|
- **HTML structure**: Element hierarchy and required markup
|
|
- **CSS classes**: Root, element, modifier, size, and state classes
|
|
- **Styling hooks**: CSS custom properties for theming
|
|
- **Accessibility**: ARIA attributes, keyboard patterns, screen reader guidance
|
|
- **Code examples**: Usage examples for variants
|
|
- **Lightning component mapping**: Corresponding LWC when available
|
|
|
|
**Use blueprints** when building custom HTML/CSS, targeting non-Salesforce platforms, or when no Lightning Base Component exists.
|
|
|
|
**Use Lightning Base Components** when working within Salesforce (LWC, Aura, Visualforce) — they handle accessibility, events, and framework integration automatically.
|
|
|
|
---
|
|
|
|
## Blueprints by Category
|
|
|
|
### Actions
|
|
|
|
| Blueprint | Description | Lightning Component |
|
|
|-----------|-------------|---------------------|
|
|
| **Buttons** | Action triggers with text labels | `lightning-button` |
|
|
| **Button Icons** | Icon-only action triggers | `lightning-button-icon` |
|
|
| **Button Groups** | Related buttons in a row | `lightning-button-group` |
|
|
| **Docked Utility Bar** | Persistent bottom utility panel | N/A |
|
|
|
|
---
|
|
|
|
### Input
|
|
|
|
Form controls for user input and data entry.
|
|
|
|
| Blueprint | Description | Lightning Component |
|
|
|-----------|-------------|---------------------|
|
|
| **Checkbox** | Binary selection control | `lightning-checkbox` |
|
|
| **Checkbox Button** | Checkbox styled as a button | `lightning-checkbox-button` |
|
|
| **Checkbox Button Group** | Set of checkbox buttons in a fieldset | `lightning-checkbox-group` |
|
|
| **Checkbox Toggle** | Toggle-style checkbox | `lightning-input` (type="checkbox-button") |
|
|
| **Combobox** | Text input with dropdown list | `lightning-combobox` |
|
|
| **Counter** | Number input with increment/decrement controls | N/A |
|
|
| **Datepickers** | Calendar date selection | `lightning-input` (type="date") |
|
|
| **Datetime Picker** | Combined date and time selection | `lightning-input` (type="datetime") |
|
|
| **Dueling Picklist** | Multi-select with two lists | `lightning-dual-listbox` |
|
|
| **Expression** | Formula builder interface | N/A |
|
|
| **File Selector** | File upload with drag-and-drop | `lightning-file-upload` |
|
|
| **Form Element** | Wrapper for form inputs | N/A |
|
|
| **Input** | Text/number input | `lightning-input` |
|
|
| **Lookups** | Search and select from a dataset | `lightning-record-picker` |
|
|
| **Picklist** | Dropdown from predefined options | `lightning-combobox` |
|
|
| **Radio Group** | Single selection from exclusive options | `lightning-radio-group` |
|
|
| **Radio Button Group** | Radio buttons in a styled group | `lightning-radio-group` |
|
|
| **Rich Text Editor** | Text editor with formatting toolbar | `lightning-input-rich-text` |
|
|
| **Select** | Native dropdown selection | `lightning-combobox` |
|
|
| **Slider** | Numeric range input via draggable handle | `lightning-slider` |
|
|
| **Textarea** | Multi-line text input | `lightning-textarea` |
|
|
| **Timepicker** | Time selection interface | `lightning-input` (type="time") |
|
|
| **Visual Picker** | Visual tile-based selection | `lightning-radio-group` (with tiles) |
|
|
|
|
---
|
|
|
|
### Layout
|
|
|
|
Components for organizing and structuring content.
|
|
|
|
| Blueprint | Description | Lightning Component |
|
|
|-----------|-------------|---------------------|
|
|
| **Accordion** | Collapsible stacked sections | `lightning-accordion` |
|
|
| **Brand Band** | Visual header with branding | N/A |
|
|
| **Builder Header** | Header for app builder interfaces | N/A |
|
|
| **Cards** | Container with header/body/footer | `lightning-card` |
|
|
| **Carousel** | Slideshow with navigation controls | `lightning-carousel` |
|
|
| **Docked Form Footer** | Fixed bottom footer for form actions | N/A |
|
|
| **Expandable Section** | Collapsible content block | N/A |
|
|
| **Page Headers** | Page title, metadata, and actions | `lightning-record-view-form` |
|
|
| **Panels** | Structured side or overlay container | N/A |
|
|
| **Split View** | Resizable two-pane layout | N/A |
|
|
| **Summary Detail** | Collapsible key-value layout | N/A |
|
|
| **Tiles** | Card-like grid content items | `lightning-tile` |
|
|
|
|
---
|
|
|
|
### Navigation
|
|
|
|
Components for navigation and wayfinding.
|
|
|
|
| Blueprint | Description | Lightning Component |
|
|
|-----------|-------------|---------------------|
|
|
| **App Launcher** | Grid for app discovery | N/A |
|
|
| **Breadcrumbs** | Hierarchical location trail | `lightning-breadcrumbs` |
|
|
| **Dynamic Menu** | Contextual menu in popover | N/A |
|
|
| **Global Header** | Primary application header | N/A |
|
|
| **Global Navigation** | Main navigation bar | `lightning-navigation` |
|
|
| **Menus** | Contextual action lists | `lightning-menu-item` |
|
|
| **Path** | Linear process stage indicator | `lightning-path` |
|
|
| **Scoped Tabs** | Tabs scoped to a context | `lightning-tabset` |
|
|
| **Tabs** | Switchable content panels | `lightning-tabset` |
|
|
| **Trees** | Hierarchical list | `lightning-tree` |
|
|
| **Vertical Navigation** | Vertical nav menu | `lightning-vertical-navigation` |
|
|
| **Vertical Tabs** | Vertical tab interface | `lightning-vertical-navigation` |
|
|
|
|
---
|
|
|
|
### Display
|
|
|
|
| Blueprint | Description | Lightning Component |
|
|
|-----------|-------------|---------------------|
|
|
| **Activity Timeline** | Chronological event list | `lightning-activity-timeline` |
|
|
| **Avatar** | User or entity image placeholder | `lightning-avatar` |
|
|
| **Avatar Group** | Stacked avatar collection | N/A |
|
|
| **Badges** | Small status label | `lightning-badge` |
|
|
| **Dynamic Icons** | Animated contextual icons | N/A |
|
|
| **Files** | File attachment card | N/A |
|
|
| **Icons** | SVG icons from SLDS sprite | `lightning-icon` |
|
|
| **Illustration** | Empty/error state graphic | N/A |
|
|
| **Pills** | Removable tag or filter token | `lightning-pill` |
|
|
|
|
---
|
|
|
|
### Data
|
|
|
|
Components for displaying structured data.
|
|
|
|
| Blueprint | Description | Lightning Component |
|
|
|-----------|-------------|---------------------|
|
|
| **Data Tables** | Sortable tabular data | `lightning-datatable` |
|
|
| **Tree Grid** | Hierarchical data table | `lightning-tree-grid` |
|
|
|
|
---
|
|
|
|
### Feedback
|
|
|
|
Components for communicating status and feedback.
|
|
|
|
| Blueprint | Description | Lightning Component |
|
|
|-----------|-------------|---------------------|
|
|
| **Alert** | Page-level status banner | N/A |
|
|
| **Notifications** | System notification messages | N/A |
|
|
| **Progress Bar** | Linear completion indicator | `lightning-progress-bar` |
|
|
| **Progress Indicator** | Multi-step process tracker | `lightning-progress-indicator` |
|
|
| **Progress Ring** | Circular progress indicator | `lightning-progress-ring` |
|
|
| **Scoped Notifications** | Notification scoped to a container | N/A |
|
|
| **Spinners** | Loading state indicator | `lightning-spinner` |
|
|
| **Toast** | Temporary notification message | N/A |
|
|
| **Trial Bar** | Trial status and call-to-action bar | N/A |
|
|
|
|
---
|
|
|
|
### Overlay
|
|
|
|
Components that appear above the main interface.
|
|
|
|
| Blueprint | Description | Lightning Component |
|
|
|-----------|-------------|---------------------|
|
|
| **Docked Composer** | Bottom-docked content creation panel | N/A |
|
|
| **Modals** | Blocking dialog overlay | N/A |
|
|
| **Popovers** | Contextual overlay anchored to trigger | N/A |
|
|
| **Prompt** | Confirmation or input dialog | N/A |
|
|
| **Tooltips** | Hover-triggered label | N/A |
|
|
| **Welcome Mat** | Onboarding introduction overlay | N/A |
|
|
|
|
---
|
|
|
|
### Complex Components
|
|
|
|
Advanced components with rich functionality.
|
|
|
|
| Blueprint | Description | Lightning Component |
|
|
|-----------|-------------|---------------------|
|
|
| **Chat** | Chronological chat message display | N/A |
|
|
| **Color Picker** | Color selection with hex/swatch input | N/A |
|
|
| **Drop Zone** | Drag-and-drop target area | N/A |
|
|
| **Feeds** | Chronological activity feed | N/A |
|
|
| **List Builder** | Drag-and-drop list ordering | N/A |
|
|
| **Map** | Interactive map display | `lightning-map` |
|
|
| **Publishers** | Content creation panel | N/A |
|
|
| **Setup Assistant** | Guided onboarding checklist | N/A |
|
|
|
|
---
|
|
|
|
## Framework Notes
|
|
|
|
- **LWC / Aura**: Prefer the mapped Lightning component when listed — it handles accessibility and events.
|
|
- **React / Vue / Angular / plain HTML**: Use the blueprint HTML structure and CSS classes directly.
|
|
- **Customization**: Apply styling hooks (CSS custom properties) to theme components without overriding base styles.
|