Styles Package Use Cases

Use Case 1: Typography Utility Classes

The UMD Styles Library provides a complete set of typography utility classes for sans-serif, serif, and campaign font families, plus rich text helpers.

Sans-Serif Classes

Serif Classes

Campaign Font Classes

Rich Text Classes

Usage Example

<h1 class="umd-campaign-largest-uppercase">Campaign Headline</h1>
<h2 class="umd-sans-larger">Section Title</h2>
<p class="umd-serif-medium">Body text in Crimson Pro serif.</p>

<!-- Rich text block with proper spacing and sizing -->
<div class="umd-text-rich-simple">
  <p>Paragraphs, lists, and links receive consistent styling.</p>
  <ul>
    <li>Styled list items</li>
  </ul>
</div>

Use Case 2: Grid System Classes

The UMD Styles Library provides two types of grid systems: Grid with Gaps (for spacing between items) and Grid with Borders (for table-like layouts).

Available Grid Gap Classes

Available Grid Border Classes

Gap Values

Usage Example

<!-- Standard three-column grid -->
<div class="umd-layout-grid-gap-three">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Use Case 3: Spacing Utility Classes

The library provides comprehensive spacing utilities for both horizontal containers (max-width with padding) and vertical spacing (margin-bottom).

Horizontal Container Classes

Vertical Spacing Classes

Usage Example

<!-- Container with reading width -->
<div class="umd-layout-space-horizontal-normal">
  <h1 class="umd-layout-space-vertical-headline-large">Page Title</h1>
  <p>Content with optimal reading width and proper spacing.</p>
</div>

Use Case 4: Form Field Classes

The library provides a complete set of form field classes for creating accessible, consistent forms.

Available Form Classes

Validation States

Usage Example

<!-- Text input with validation -->
<div class="umd-field-set-item">
  <label for="email">Email</label>
  <input type="email" id="email" class="umd-field-input" aria-invalid="false">
</div>

<!-- Date input with wrapper -->
<div class="umd-field-input-date-wrapper">
  <input type="date" class="umd-field-input-date">
</div>

Use Case 5: Automatic Web Component Styling

All UMD web components receive automatic base styling from the styles package. No additional configuration needed.

How Automatic Styling Works

Components with Special Styling

Component List

Benefits

<!-- Just use the component - styling is automatic! -->
<umd-element-hero data-theme="dark">
  <!-- Component is hidden until JavaScript loads -->
  <!-- Then displays as block with container queries enabled -->
</umd-element-hero>