afv-library/skills/design-systems-slds-apply/references/utilities/index.md

id	title	description	summary	artifact_type	domain	topic	content_format	complexity	audience	tasks	tags	keywords	refs
slds.guidance.utilities	SLDS Utility Classes Index	Category index of SLDS utility classes for rapid styling	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.	index	utilities	utilities	structured	foundational	implementer	choose implement	utilities css-classes layout spacing typography	utility classes grid spacing sizing typography visibility borders position truncate	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

Flexbox layout system for responsive grids. Use slds-grid + slds-col + slds-wrap.

Position

CSS positioning: slds-is-relative, slds-is-absolute, slds-is-fixed. For dropdowns, modals, overlays.

Scrollable

slds-scrollable, slds-scrollable_x, slds-scrollable_y for scrollable containers.

Floats

slds-float_left, slds-float_right. Legacy - prefer Grid.

Alignment

slds-align_absolute-center for centering content.

Layout

slds-has-buffer, slds-has-full-bleed for global spacing.

Spacing (2) - Most Used

Margin

slds-m-[direction]_[size] for all margin directions and sizes. Scale: none, xxx-small (2px) to xx-large (48px)

Padding

slds-p-[direction]_[size] for all padding directions and sizes. Scale: none, xxx-small (2px) to xx-large (48px)

Sizing (1)

Sizing

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

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

Single-line: slds-truncate (with title attribute) Partial: slds-truncate_container_25/50/75

Line Clamp

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

slds-hyphenate for long word breaking.

Visual Styling (6)

Color

slds-color__text_gray-1 through gray-12 slds-color__background_gray-1 through gray-12 Prefer styling hooks for colors.

Borders

Borders: slds-border_top/bottom/left/right for directional borders.

Box

slds-box, slds-box_small/large for bordered containers.

Themes

slds-theme_default, slds-theme_shade, slds-theme_inverse for themed containers.

Visibility

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

Future dark mode support (currently use styling hooks).

Specialized (5)

Description List

slds-dl_horizontal, slds-dl_inline for name-value pairs.

Media Object

slds-media, slds-media__figure, slds-media__body for image+text layouts.

Name-Value List

slds-item_label, slds-item_detail for structured data.

Horizontal List

slds-list_horizontal, slds-list__item for inline lists.

Vertical List

slds-list__item, slds-has-divider, slds-is-selected for navigation/lists.

Special Purpose (2)

Interactions

slds-text-link, slds-text-link_reset, slds-has-blur-focus for interactive elements.

Print

slds-no-print hides elements when printing.

---

Quick Access by Need

Layout: Grid • Position • Sizing • Alignment • Layout Spacing: Margin • Padding Text: Typography • Truncate • Line Clamp • Hyphenation Display: Visibility • Print Style: Borders • Box • Color • Themes Lists: Horizontal List • Vertical List • Name-Value List • Description List • Media Object Interactive: Interactions Scrolling: Scrollable • Floats Theme: Dark Mode

Usage Patterns

Card Layout:

<div class="slds-card slds-m-bottom_medium">
  <div class="slds-card__body slds-p-around_medium">
    Content
  </div>
</div>

Responsive Grid:

<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:

<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.