Styles Package Use Cases

About This Guide

This guide demonstrates practical implementations of the UMD Styles Library for creating consistent, accessible designs. For setup instructions, see the Static CSS Guide or Getting Started.

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>

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>

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>

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>

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>