Component Usage Guide

# Install the components library
npm install @universityofmaryland/web-components-library

# Install peer dependencies
npm install @universityofmaryland/web-styles-library
npm install @universityofmaryland/web-elements-library

// Option 1: Load all components (simple but larger bundle)
import LoadUmdComponents from '@universityofmaryland/web-components-library';
LoadUmdComponents();

// Option 2: Load specific components (recommended)
import { Components } from '@universityofmaryland/web-components-library';
Components.hero.base();
Components.card.standard();
Components.navigation.primary();

<umd-element-hero data-theme="dark" data-display="overlay">
  <img slot="image" src="hero.jpg" alt="Campus view">
  <p slot="eyebrow">Welcome to Maryland</p>
  <h1 slot="headline">Fearless Ideas Start Here</h1>
  <div slot="text">
    <p>Join our community of innovators and changemakers.</p>
  </div>
  <div slot="actions">
    <umd-element-call-to-action data-display="primary">
      <a href="/apply">Apply Now</a>
    </umd-element-call-to-action>
  </div>
</umd-element-hero>

<umd-element-card data-theme="light">
  <a slot="image" href="/article">
    <img src="news.jpg" alt="News image">
  </a>
  <p slot="eyebrow">Research</p>
  <h3 slot="headline">
    <a href="/article">Breakthrough Discovery in Climate Science</a>
  </h3>
  <p slot="text">
    UMD researchers have made a significant breakthrough that could 
    revolutionize our understanding of climate patterns.
  </p>
    <umd-element-call-to-action data-display="primary" slot="actions">
      <a href="/apply">Apply Now</a>
    </umd-element-call-to-action>
</umd-element-card>

<umd-element-navigation-primary>
  <div slot="logo">
    <a href="/">
      <img src="umd-logo.svg" alt="University of Maryland">
    </a>
  </div>
  <nav slot="primary">
    <ul>
      <li><a href="/about">About</a></li>
      <li><a href="/academics">Academics</a></li>
      <li><a href="/research">Research</a></li>
      <li><a href="/campus-life">Campus Life</a></li>
    </ul>
  </nav>
  <div slot="utility">
    <a href="/search">Search</a>
  </div>
</umd-element-navigation-primary>

<!-- Apply consistent vertical spacing between sections -->
<div class="umd-layout-space-vertical-landing">
  <umd-element-hero>...</umd-element-hero>
</div>

<div class="umd-layout-space-vertical-landing">
  <h2 class="umd-sans-larger">Featured Programs</h2>
  <!-- Card grid below -->
</div>

<!-- Full-width hero with overlay text -->
<section class="umd-layout-space-vertical-landing">
  <umd-element-hero data-display="overlay" data-theme="dark">
    <img slot="image" src="campus-aerial.jpg" alt="Aerial view of campus">
    <h1 slot="headline">Do Good at Maryland</h1>
    <div slot="text">
      <p class="umd-text-large">
        From the classroom to the lab, we're doing good in Maryland and beyond.
      </p>
    </div>
    <div slot="actions">
      <umd-element-call-to-action data-display="primary">
        <a href="/impact">See Our Impact</a>
      </umd-element-call-to-action>
      <umd-element-call-to-action data-display="secondary">
        <a href="/tour">Visit Campus</a>
      </umd-element-call-to-action>
    </div>
  </umd-element-hero>
</section>

<section class="umd-layout-space-vertical-landing">
  <div class="umd-layout-space-horizontal-larger">
    <h2 class="umd-sans-larger">Latest News</h2>
    
    <div class="umd-grid-gap-three">
      <umd-element-card data-display="article">
        <a slot="image" href="/news/article-1">
          <img src="news1.jpg" alt="Research lab">
        </a>
        <p slot="eyebrow">Research • Nov 15, 2024</p>
        <h3 slot="headline">
          <a href="/news/article-1">
            New AI Research Center Opens on Campus
          </a>
        </h3>
        <p slot="text">
          The center will advance machine learning research and 
          foster collaboration across disciplines.
        </p>
      </umd-element-card>
      
      <!-- Additional cards... -->
    </div>
  </div>
</section>

<section class="umd-layout-space-vertical">
  <div class="umd-layout-space-horizontal-small">
    <h2 class="umd-sans-larger">
      Frequently Asked Questions
    </h2>
    
    <div>
      <umd-element-accordion-item>
        <h3 slot="headline">How do I apply to Maryland?</h3>
        <div slot="text">
          <p>
            Apply through the Common Application or Coalition Application. 
            The priority deadline is November 1 for spring admission and 
            January 20 for fall admission.
          </p>
        </div>
      </umd-element-accordion-item>
      
      <umd-element-accordion-item>
        <h3 slot="headline">What majors are offered?</h3>
        <div slot="text">
          <p>
            We offer over 100 undergraduate majors across 12 colleges 
            and schools, from engineering to the arts.
          </p>
          <p>
            <a href="/academics/majors">Explore All Majors</a>
          </p>
        </div>
      </umd-element-accordion-item>
    </div>
  </div>
</section>