@salesforce/afv-skills 1.20.0 → 1.22.0

package/skills/design-systems-slds-apply/guidance/utilities/grid.md

@@ -0,0 +1,264 @@
+---
+id: slds.guidance.utilities.grid
+title: Grid Utilities
+description: SLDS flexbox grid system utilities
+summary: "Utilities for flexible, responsive layouts using CSS Flexbox. Includes grid containers, columns, gutters (2px-96px), alignment, and responsive breakpoints."
+
+artifact_type: reference
+domain: utilities
+topic: grid
+
+content_format: structured
+complexity: intermediate
+audience: [implementer]
+
+tasks: [implement]
+
+refs:
+  - slds.guidance.utilities
+  - slds.guidance.overview.utilities
+  - slds.guidance.utilities.sizing
+
+tags: [utilities, grid, flexbox, layout, responsive]
+keywords: [slds-grid, slds-col, slds-wrap, slds-gutters, slds-container]
+---
+
+# Grid - Flexbox Layout System
+
+Creating flexible, responsive layouts using CSS Flexbox.
+
+## Core Classes
+
+| Class | Purpose |
+|-------|---------|
+| `slds-grid` | Initialize flex container (`display: flex`) |
+| `slds-col` | Initialize flex item/column (`flex: 1 1 auto`) |
+| `slds-wrap` | Allow columns to wrap to new rows (`flex-wrap: wrap`) |
+| `slds-nowrap` | Keep columns on single line (`flex-wrap: nowrap`) |
+
+## Grid Flow Modifiers
+
+| Class | Purpose |
+|-------|---------|
+| `slds-grid_vertical` | Stack columns vertically (`flex-direction: column`) |
+| `slds-grid_vertical-reverse` | Stack columns vertically in reverse order (`flex-direction: column-reverse`) |
+| `slds-grid_reverse` | Reverse horizontal flow (`flex-direction: row-reverse`) |
+| `slds-grid_frame` | Full-viewport grid (`min-width: 100vw; min-height: 100vh`) |
+| `slds-grid_overflow` | Create horizontal scrolling grid (`flex-flow: row nowrap`) |
+
+## Gutters
+
+| Class | Gutter Width | Per Side |
+|-------|-------------|----------|
+| `slds-gutters_xxx-small` | 2px total | 1px |
+| `slds-gutters_xx-small` | 4px total | 2px |
+| `slds-gutters_x-small` | 8px total | 4px |
+| `slds-gutters_small` | 24px total | 12px |
+| `slds-gutters` | 24px total (default) | 12px |
+| `slds-gutters_medium` | 32px total | 16px |
+| `slds-gutters_large` | 48px total | 24px |
+| `slds-gutters_x-large` | 64px total | 32px |
+| `slds-gutters_xx-large` | 96px total | 48px |
+
+### Gutter Variants
+- `slds-gutters_direct` - Apply gutters only to direct child columns (not nested grids)
+- `slds-gutters_direct-xxx-small` through `slds-gutters_direct-xx-large` - Direct gutters with size variants
+
+## Alignment
+
+### Horizontal Alignment (Main Axis)
+| Class | Purpose |
+|-------|---------|
+| `slds-grid_align-center` | Center columns horizontally (`justify-content: center`) |
+| `slds-grid_align-space` | Equal space around columns (`justify-content: space-around`) |
+| `slds-grid_align-spread` | Space columns from edges (`justify-content: space-between`) |
+| `slds-grid_align-end` | Right align columns (`justify-content: flex-end`) |
+
+### Vertical Alignment (Cross Axis)
+| Class | Purpose |
+|-------|---------|
+| `slds-grid_vertical-align-start` | Align columns to top (`align-items: flex-start`) |
+| `slds-grid_vertical-align-center` | Vertically center columns (`align-items: center`) |
+| `slds-grid_vertical-align-end` | Align columns to bottom (`align-items: flex-end`) |
+| `slds-grid_vertical-stretch` | Stretch columns to fill height (`align-items: stretch`) |
+
+### Individual Column Alignment
+| Class | Purpose |
+|-------|---------|
+| `slds-align-top` | Align individual column to top (`align-self: flex-start`) |
+| `slds-align-middle` | Align individual column to middle (`align-self: center`) |
+| `slds-align-bottom` | Align individual column to bottom (`align-self: flex-end`) |
+
+## Column Flex Control
+
+| Class | Purpose |
+|-------|---------|
+| `slds-grow` | Allow column to grow (`flex-grow: 1`) |
+| `slds-grow-none` | Prevent column from growing (`flex-grow: 0`) |
+| `slds-shrink` | Allow column to shrink (`flex-shrink: 1`) |
+| `slds-shrink-none` | Prevent column from shrinking (`flex-shrink: 0`) |
+| `slds-no-flex` | Remove flexbox from column (`flex: none`) |
+| `slds-no-space` | Set column to min-width of 0 |
+| `slds-has-flexi-truncate` | Enable truncation in flexible container (`flex: 1 1 0%; min-width: 0`) |
+
+## Column Positioning
+
+| Class | Purpose |
+|-------|---------|
+| `slds-col_bump-top` | Push column to top using `margin-block-start: auto` |
+| `slds-col_bump-right` | Push column to right using `margin-inline-end: auto` |
+| `slds-col_bump-bottom` | Push column to bottom using `margin-block-end: auto` |
+| `slds-col_bump-left` | Push column to left using `margin-inline-start: auto` |
+
+## Column Borders
+
+| Class | Purpose |
+|-------|---------|
+| `slds-col_rule-top` | Add 1px border to top side (large screens only) |
+| `slds-col_rule-right` | Add 1px border to right side (large screens only) |
+| `slds-col_rule-bottom` | Add 1px border to bottom side (large screens only) |
+| `slds-col_rule-left` | Add 1px border to left side (large screens only) |
+
+## Container Sizing
+
+| Class | Max Width | Purpose |
+|-------|-----------|---------|
+| `slds-container_small` | 480px | Restrict width for small content |
+| `slds-container_medium` | 768px | Restrict width for medium content |
+| `slds-container_large` | 1024px | Restrict width for large content |
+| `slds-container_x-large` | 1280px | Restrict width for extra large content |
+| `slds-container_fluid` | 100% | Full viewport width |
+
+### Container Positioning
+| Class | Purpose |
+|-------|---------|
+| `slds-container_center` | Center container horizontally |
+| `slds-container_left` | Left align container |
+| `slds-container_right` | Right align container |
+
+## Pull Padded Utilities
+
+| Class | Purpose |
+|-------|---------|
+| `slds-grid_pull-padded` | Normalize 12px padding when nesting |
+| `slds-grid_pull-padded-xxx-small` | Normalize 2px padding |
+| `slds-grid_pull-padded-xx-small` | Normalize 4px padding |
+| `slds-grid_pull-padded-x-small` | Normalize 8px padding |
+| `slds-grid_pull-padded-small` | Normalize 12px padding |
+| `slds-grid_pull-padded-medium` | Normalize 16px padding |
+| `slds-grid_pull-padded-large` | Normalize 24px padding |
+| `slds-grid_pull-padded-x-large` | Normalize 32px padding |
+| `slds-grid_pull-padded-xx-large` | Normalize 48px padding |
+
+## Common Patterns
+
+### Basic Three-Column Grid
+```html
+<!-- Equal width columns with gutters -->
+<div class="slds-grid slds-wrap slds-gutters">
+  <div class="slds-col slds-size_1-of-3">
+    Column 1 content
+  </div>
+  <div class="slds-col slds-size_1-of-3">
+    Column 2 content
+  </div>
+  <div class="slds-col slds-size_1-of-3">
+    Column 3 content
+  </div>
+</div>
+```
+
+### Responsive Card Layout
+```html
+<!-- Mobile: full width, Tablet: half width, Desktop: third width -->
+<div class="slds-grid slds-wrap slds-gutters_small">
+  <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3">
+    <article class="slds-card">Card 1</article>
+  </div>
+  <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3">
+    <article class="slds-card">Card 2</article>
+  </div>
+  <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3">
+    <article class="slds-card">Card 3</article>
+  </div>
+</div>
+```
+
+### Centered Modal Dialog
+```html
+<!-- Vertically and horizontally centered content -->
+<div class="slds-grid slds-grid_align-center slds-grid_vertical-align-center slds-grid_frame">
+  <div class="slds-col slds-container_small">
+    <section class="slds-modal__container">
+      Modal content here
+    </section>
+  </div>
+</div>
+```
+
+### Sidebar Layout with Auto-push
+```html
+<!-- Sidebar with main content pushed to opposite side -->
+<div class="slds-grid slds-gutters">
+  <nav class="slds-col slds-size_3-of-12">
+    Sidebar navigation
+  </nav>
+  <main class="slds-col slds-col_bump-left">
+    <!-- bump-left creates margin-inline-start: auto -->
+    Main content area
+  </main>
+</div>
+```
+
+### Nested Grid with Direct Gutters
+```html
+<!-- Parent grid with nested grid using direct gutters -->
+<div class="slds-grid slds-wrap slds-gutters_direct-medium">
+  <div class="slds-col slds-size_1-of-2">
+    <div class="slds-grid slds-wrap slds-gutters_direct-small">
+      <div class="slds-col slds-size_1-of-2">Nested 1</div>
+      <div class="slds-col slds-size_1-of-2">Nested 2</div>
+    </div>
+  </div>
+  <div class="slds-col slds-size_1-of-2">
+    Parent column 2
+  </div>
+</div>
+```
+
+## Best Practices
+
+✅ Use `slds-wrap` for responsive card layouts that need to stack on mobile
+✅ Start mobile-first with `slds-size_1-of-1` then add breakpoint-specific sizes
+✅ Use `slds-gutters_small` (24px) for standard spacing between columns
+✅ Apply `slds-has-flexi-truncate` when text needs to truncate within flexible columns
+✅ Use `slds-container_center` with `slds-container_large` for centered page layouts
+✅ Apply `slds-grid_pull-padded` when nesting grids to maintain visual alignment
+
+❌ Avoid nesting grids more than 2 levels deep
+❌ Never use `slds-col` without a parent `slds-grid`
+❌ Avoid mixing grid utilities with float-based layouts
+❌ Never combine `slds-grid_align-spread` with `slds-gutters` (creates double spacing)
+
+## Deprecated Utilities
+
+The following grid utilities are deprecated. Use the specified replacements.
+
+### Responsive Nowrap Classes
+| Deprecated | Replacement |
+|------------|-------------|
+| `slds-nowrap_small` | Use responsive grid classes instead |
+| `slds-nowrap_medium` | Use responsive grid classes instead |
+| `slds-nowrap_large` | Use responsive grid classes instead |
+
+### Column Padding Classes
+| Deprecated | Replacement |
+|------------|-------------|
+| `slds-col_padded` | Use `slds-p-horizontal_small` |
+| `slds-col_padded-medium` | Use `slds-p-horizontal_medium` |
+| `slds-col_padded-large` | Use `slds-p-horizontal_large` |
+| `slds-col_padded-around` | Use `slds-p-around_small` |
+| `slds-col_padded-around-medium` | Use `slds-p-around_medium` |
+| `slds-col_padded-around-large` | Use `slds-p-around_large` |
+
+Note: Column sizing utilities (`slds-size_*`) are defined in the [Sizing Utilities](ref:slds.guidance.utilities.sizing) category, not grid utilities.

package/skills/design-systems-slds-apply/guidance/utilities/horizontal-list.md

@@ -0,0 +1,110 @@
+---
+id: slds.guidance.utilities.horizontal-list
+title: Horizontal List Utilities
+description: SLDS horizontal list utility classes
+summary: "Utilities for horizontal lists with flexbox and divider variants."
+
+artifact_type: reference
+domain: utilities
+topic: horizontal-list
+
+content_format: structured
+complexity: intermediate
+audience: [implementer]
+
+tasks: [implement]
+
+refs:
+  - slds.guidance.utilities
+  - slds.guidance.overview.utilities
+
+tags: [utilities, horizontal-list, flexbox, dividers]
+keywords: [slds-list_horizontal, slds-has-dividers_left, slds-has-dividers_right, horizontal list, list dividers]
+---
+
+# Horizontal List - Flexbox Lists with Dividers
+
+Creating horizontal lists with flexbox layout and optional dividers.
+
+**Note:** Divider classes require the `slds-list_horizontal` base class and must use directional variants (`_left` or `_right`).
+
+## Core Classes
+
+| Class | Purpose |
+|-------|---------|
+| `slds-list_horizontal` | Creates a flex container for horizontal list layout |
+| `slds-list_horizontal-large` | Adds padding to child links (12px block, 16px inline) |
+| `slds-has-dividers_left` | Adds 2px circular dividers on the left side of items (requires `slds-list_horizontal`) |
+| `slds-has-dividers_right` | Adds 2px circular dividers on the right side of items (requires `slds-list_horizontal`) |
+
+## Common Patterns
+
+### Basic Horizontal List
+```html
+<!-- Simple horizontal list with flexbox layout -->
+<ul class="slds-list_horizontal">
+  <li class="slds-list__item">Home</li>
+  <li class="slds-list__item">Products</li>
+  <li class="slds-list__item">Services</li>
+  <li class="slds-list__item">Contact</li>
+</ul>
+```
+
+### Horizontal List with Left Dividers
+```html
+<!-- Horizontal list with dot dividers on the left of each item -->
+<ul class="slds-list_horizontal slds-has-dividers_left">
+  <li class="slds-list__item">View All</li>
+  <li class="slds-list__item">Recently Viewed</li>
+  <li class="slds-list__item">Created by Me</li>
+</ul>
+```
+
+### Large Horizontal List with Links
+```html
+<!-- Large variant with padding on anchor elements -->
+<ul class="slds-list_horizontal slds-list_horizontal-large">
+  <li class="slds-list__item">
+    <a href="/home">Home</a>
+  </li>
+  <li class="slds-list__item">
+    <a href="/about">About</a>
+  </li>
+  <li class="slds-list__item">
+    <a href="/contact">Contact</a>
+  </li>
+</ul>
+```
+
+### List with Left-side Dividers and Large Spacing
+```html
+<!-- Dividers appear on the left of each item with large padding -->
+<ul class="slds-list_horizontal slds-list_horizontal-large slds-has-dividers_left">
+  <li class="slds-list__item"><a href="/first">First Item</a></li>
+  <li class="slds-list__item"><a href="/second">Second Item</a></li>
+  <li class="slds-list__item"><a href="/third">Third Item</a></li>
+</ul>
+```
+
+### List with Right-side Dividers
+```html
+<!-- Dividers appear on the right of each item except last -->
+<ul class="slds-list_horizontal slds-has-dividers_right">
+  <li class="slds-list__item">Option A</li>
+  <li class="slds-list__item">Option B</li>
+  <li class="slds-list__item">Option C</li>
+</ul>
+```
+
+## Best Practices
+
+✅ Use `slds-list_horizontal` on the list container (`<ul>` or `<ol>`)
+✅ Apply `slds-list__item` to each list item for proper structure
+✅ Use `slds-has-dividers_left` or `slds-has-dividers_right` with `slds-list_horizontal` for dividers
+✅ Use `slds-list_horizontal-large` when links need 12px vertical and 16px horizontal padding
+✅ Divider classes always require the `slds-list_horizontal` base class
+
+❌ Do not combine multiple divider classes on the same element
+❌ Do not apply horizontal list classes to non-list elements
+❌ Do not nest horizontal lists without proper spacing
+❌ Do not override the 2px divider size with custom CSS

package/skills/design-systems-slds-apply/guidance/utilities/hyphenation.md

@@ -0,0 +1,84 @@
+---
+id: slds.guidance.utilities.hyphenation
+title: Hyphenation Utilities
+description: SLDS hyphenation utility class
+summary: "Utility for text wrapping and hyphenation. Enables automatic word breaking in narrow containers."
+
+artifact_type: reference
+domain: utilities
+topic: hyphenation
+
+content_format: structured
+complexity: intermediate
+audience: [implementer]
+
+tasks: [implement]
+
+refs:
+  - slds.guidance.utilities
+  - slds.guidance.overview.utilities
+  - slds.guidance.utilities.truncate
+
+tags: [utilities, hyphenation, text-wrapping, word-break]
+keywords: [slds-hyphenate, hyphenation, word-wrap, overflow-wrap]
+---
+
+# Hyphenation - Text Wrapping
+
+Enabling automatic text hyphenation and word breaking in narrow width containers.
+
+## Core Classes
+
+| Class | Purpose |
+|-------|---------|
+| `slds-hyphenate` | Enables text hyphenation with word-wrapping fallbacks for narrow containers |
+
+## Common Patterns
+
+```html
+<!-- Long text in narrow column -->
+<div class="slds-size_1-of-3">
+  <p class="slds-hyphenate">
+    Supercalifragilisticexpialidocious text that needs to break appropriately.
+  </p>
+</div>
+
+<!-- Table cell with potential long words -->
+<td class="slds-cell-wrap">
+  <span class="slds-hyphenate">
+    VeryLongProductNameWithoutSpaces
+  </span>
+</td>
+
+<!-- Card header with constrained width -->
+<div class="slds-card__header">
+  <h2 class="slds-text-heading_small slds-hyphenate">
+    ExtremelyLongTitleThatMightOverflow
+  </h2>
+</div>
+
+<!-- Form label in narrow sidebar -->
+<div class="slds-form-element">
+  <label class="slds-form-element__label slds-hyphenate">
+    InternationalizationConfiguration
+  </label>
+</div>
+
+<!-- Modal title with potential overflow -->
+<div class="slds-modal__header">
+  <h2 class="slds-text-heading_medium slds-hyphenate">
+    SuperLongModalTitleForConfiguration
+  </h2>
+</div>
+```
+
+## Best Practices
+
+✅ Use on text that might contain long words without spaces
+✅ Apply to elements in narrow width containers
+✅ Use with non-truncated text that needs to remain visible
+✅ Combine with responsive grid columns where text might overflow
+
+❌ Don't use with [Truncate Utilities](ref:slds.guidance.utilities.truncate) (choose one strategy)
+❌ Don't apply to elements with fixed widths larger than their containers
+❌ Don't use on numeric data or codes that shouldn't break

package/skills/design-systems-slds-apply/guidance/utilities/index.md

@@ -0,0 +1,205 @@
+---
+id: slds.guidance.utilities
+title: SLDS Utility Classes Index
+description: Category index of SLDS utility classes for rapid styling
+summary: "Index of all SLDS utility classes across 26 categories including grid, spacing, sizing, typography, visibility, borders, and positioning. Provides quick access by need and common usage patterns."
+
+artifact_type: index
+domain: utilities
+topic: utilities
+
+content_format: structured
+complexity: foundational
+audience: [implementer]
+
+tasks: [choose, implement]
+
+tags: [utilities, css-classes, layout, spacing, typography]
+keywords: [utility classes, grid, spacing, sizing, typography, visibility, borders, position, truncate]
+
+refs:
+  - slds.guidance.overview.utilities
+  - slds.guidance.hooks.color
+  - slds.guidance.utilities.alignment
+  - slds.guidance.utilities.borders
+  - slds.guidance.utilities.box
+  - slds.guidance.utilities.color
+  - slds.guidance.utilities.dark-mode
+  - slds.guidance.utilities.description-list
+  - slds.guidance.utilities.floats
+  - slds.guidance.utilities.grid
+  - slds.guidance.utilities.horizontal-list
+  - slds.guidance.utilities.hyphenation
+  - slds.guidance.utilities.interactions
+  - slds.guidance.utilities.layout
+  - slds.guidance.utilities.line-clamp
+  - slds.guidance.utilities.margin
+  - slds.guidance.utilities.media-object
+  - slds.guidance.utilities.name-value-list
+  - slds.guidance.utilities.padding
+  - slds.guidance.utilities.position
+  - slds.guidance.utilities.print
+  - slds.guidance.utilities.scrollable
+  - slds.guidance.utilities.sizing
+  - slds.guidance.utilities.themes
+  - slds.guidance.utilities.truncate
+  - slds.guidance.utilities.typography
+  - slds.guidance.utilities.vertical-list
+  - slds.guidance.utilities.visibility
+---
+
+# SLDS Utility Classes - Category Index
+
+**26 categories** of utility classes for rapid styling without custom CSS.
+
+## Layout & Positioning (6)
+
+### [Grid](./grid.md)
+Flexbox layout system for responsive grids. Use `slds-grid` + `slds-col` + `slds-wrap`.
+
+### [Position](./position.md)
+CSS positioning: `slds-is-relative`, `slds-is-absolute`, `slds-is-fixed`. For dropdowns, modals, overlays.
+
+### [Scrollable](./scrollable.md)
+`slds-scrollable`, `slds-scrollable_x`, `slds-scrollable_y` for scrollable containers.
+
+### [Floats](./floats.md)
+`slds-float_left`, `slds-float_right`. Legacy - prefer Grid.
+
+### [Alignment](./alignment.md)
+`slds-align_absolute-center` for centering content.
+
+### [Layout](./layout.md)
+`slds-has-buffer`, `slds-has-full-bleed` for global spacing.
+
+## Spacing (2) - Most Used
+
+### [Margin](./margin.md)
+`slds-m-[direction]_[size]` for all margin directions and sizes.
+Scale: `none`, `xxx-small` (2px) to `xx-large` (48px)
+
+### [Padding](./padding.md)
+`slds-p-[direction]_[size]` for all padding directions and sizes.
+Scale: `none`, `xxx-small` (2px) to `xx-large` (48px)
+
+## Sizing (1)
+
+### [Sizing](./sizing.md)
+Fractional widths: `slds-size_1-of-2` (50%), `slds-size_1-of-3` (33%)  
+Responsive: `slds-small-size_*`, `slds-medium-size_*`, `slds-large-size_*`  
+Full width: `slds-width_full`
+
+## Typography (4)
+
+### [Typography](./typography.md)
+Headings: `slds-text-heading_large/medium/small`  
+Body: `slds-text-body_regular/small`  
+Colors: `slds-text-color_weak/error/success`  
+Alignment: `slds-text-align_left/center/right`
+
+### [Truncate](./truncate.md)
+Single-line: `slds-truncate` (with `title` attribute)
+Partial: `slds-truncate_container_25/50/75`
+
+### [Line Clamp](./line-clamp.md)
+Multi-line truncation:
+- `slds-line-clamp` - 3 lines (default)
+- `slds-line-clamp_x-small` - 2 lines
+- `slds-line-clamp_medium` - 5 lines
+- `slds-line-clamp_large` - 7 lines
+
+### [Hyphenation](./hyphenation.md)
+`slds-hyphenate` for long word breaking.
+
+## Visual Styling (6)
+
+### [Color](./color.md)
+`slds-color__text_gray-1` through `gray-12`
+`slds-color__background_gray-1` through `gray-12`
+**Prefer** styling hooks for colors.
+
+### [Borders](./borders.md)
+**Borders**: `slds-border_top/bottom/left/right` for directional borders.
+
+### [Box](./box.md)
+`slds-box`, `slds-box_small/large` for bordered containers.
+
+### [Themes](./themes.md)
+`slds-theme_default`, `slds-theme_shade`, `slds-theme_inverse` for themed containers.
+
+### [Visibility](./visibility.md)
+Show/hide: `slds-show`, `slds-hide`
+Responsive: `slds-show_medium`, `slds-hide_medium`
+Screen reader: `slds-assistive-text`
+Collapsed: `slds-is-collapsed`, `slds-is-expanded`
+
+### [Dark Mode](./dark-mode.md)
+Future dark mode support (currently use styling hooks).
+
+## Specialized (5)
+
+### [Description List](./description-list.md)
+`slds-dl_horizontal`, `slds-dl_inline` for name-value pairs.
+
+### [Media Object](./media-object.md)
+`slds-media`, `slds-media__figure`, `slds-media__body` for image+text layouts.
+
+### [Name-Value List](./name-value-list.md)
+`slds-item_label`, `slds-item_detail` for structured data.
+
+### [Horizontal List](./horizontal-list.md)
+`slds-list_horizontal`, `slds-list__item` for inline lists.
+
+### [Vertical List](./vertical-list.md)
+`slds-list__item`, `slds-has-divider`, `slds-is-selected` for navigation/lists.
+
+## Special Purpose (2)
+
+### [Interactions](./interactions.md)
+`slds-text-link`, `slds-text-link_reset`, `slds-has-blur-focus` for interactive elements.
+
+### [Print](./print.md)
+`slds-no-print` hides elements when printing.
+
+---
+
+## Quick Access by Need
+
+**Layout**: [Grid](./grid.md) • [Position](./position.md) • [Sizing](./sizing.md) • [Alignment](./alignment.md) • [Layout](./layout.md)
+**Spacing**: [Margin](./margin.md) • [Padding](./padding.md)
+**Text**: [Typography](./typography.md) • [Truncate](./truncate.md) • [Line Clamp](./line-clamp.md) • [Hyphenation](./hyphenation.md)
+**Display**: [Visibility](./visibility.md) • [Print](./print.md)
+**Style**: [Borders](./borders.md) • [Box](./box.md) • [Color](./color.md) • [Themes](./themes.md)
+**Lists**: [Horizontal List](./horizontal-list.md) • [Vertical List](./vertical-list.md) • [Name-Value List](./name-value-list.md) • [Description List](./description-list.md) • [Media Object](./media-object.md)
+**Interactive**: [Interactions](./interactions.md)
+**Scrolling**: [Scrollable](./scrollable.md) • [Floats](./floats.md)
+**Theme**: [Dark Mode](./dark-mode.md)
+
+## Usage Patterns
+
+**Card Layout**:
+```html
+<div class="slds-card slds-m-bottom_medium">
+  <div class="slds-card__body slds-p-around_medium">
+    Content
+  </div>
+</div>
+```
+
+**Responsive Grid**:
+```html
+<div class="slds-grid slds-wrap slds-gutters">
+  <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-3">
+    Column
+  </div>
+</div>
+```
+
+**Typography**:
+```html
+<h1 class="slds-text-heading_large slds-m-bottom_medium">Title</h1>
+<p class="slds-text-body_regular slds-text-color_weak">Description</p>
+```
+
+For detailed guidance on any category, see the linked category guides.
+