Getting Started

Quick Start Guide for UMD Web Components

🚀 Quick Start with CDN (5 minutes)

⚠️ Important: CDN usage is for prototyping and development only!
  • Not recommended for production applications
  • No tree-shaking or optimization
  • Requires internet connection
  • Depends on third-party CDN availability

Get started with UMD Web Components in minutes using our CDN. Simply copy the code below, save it as an HTML file (e.g., test.html), and drag the file into your web browser to see it in action! 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My UMD Project</title>
    
    <!-- Load UMD Components (auto-initializes) -->
    <script src="https://unpkg.com/@universityofmaryland/web-components-library"></script>
    
    <!-- Load Companion UMD Styles -->
    <script src="https://unpkg.com/@universityofmaryland/web-styles-library@latest/dist/umd-styles.js"></script>
    
    <script>
      // Styles library pre-render CSS
      window.addEventListener('DOMContentLoaded', () => {
        if (window.Styles && window.Styles.preRenderCss) {
          window.Styles.preRenderCss.then((css) => {
            const styleSheet = document.createElement('style');
            const fonts = window.Styles.typography.fontFace.base64fonts;
            styleSheet.innerHTML = `${fonts} ${css}`;
            document.head.appendChild(styleSheet);
          });
        }
      });
    </script>
</head>
<body>
    <!-- Hero Section with Overlay Display -->
    <umd-element-hero data-display="overlay" class="umd-layout-space-vertical-landing">
        <img src="https://playground.designsystem.umd.edu/static/media/umd-smiling-graduates.69846e70.webp" 
             alt="UMD graduates celebrating" 
             slot="image">
        <p slot="eyebrow">Welcome</p>
        <h1 slot="headline">University of Maryland</h1>
        <div slot="text">
            <p>Fearless ideas start here. Join our community of innovators and leaders.</p>
        </div>
        <div slot="actions">
            <umd-element-call-to-action data-display="primary">
                <a href="https://designsystem.umd.edu/components/overlay-hero">Component documentation</a>
            </umd-element-call-to-action>
        </div>
    </umd-element-hero>
    
    <!-- Cards Section with Grid Layout -->
    <section class="umd-layout-space-vertical-landing">
        <div class="umd-layout-space-horizontal-larger">
            <div class="umd-grid-gap-three">
                <!-- Card 1 -->
                <umd-element-card>
                    <a slot="image" href="#">
                        <img src="https://playground.designsystem.umd.edu/static/media/thurgood-marshall-hall.9f02ee31.webp" 
                             alt="Thurgood Marshall Hall">
                    </a>
                    <h2 slot="headline">
                        <a href="#">Academic Excellence</a>
                    </h2>
                    <div slot="text">
                        <p>Discover our world-class programs and renowned faculty across 12 schools and colleges.</p>
                    </div>
                    <umd-element-call-to-action slot="actions" data-display="secondary">
                        <a href="#">Explore Programs</a>
                    </umd-element-call-to-action>
                </umd-element-card>
                
                <!-- Card 2 -->
                <umd-element-card>
                    <a slot="image" href="#">
                        <img src="https://playground.designsystem.umd.edu/static/media/thurgood-marshall-hall.9f02ee31.webp" 
                             alt="Campus Life">
                    </a>
                    <h2 slot="headline">Campus Life</h2>
                    <div slot="text">
                        <p>Experience a vibrant campus community with over 800 student organizations and endless opportunities.</p>
                    </div>
                    <umd-element-call-to-action slot="actions" data-display="secondary">
                        <a href="#">Student Life</a>
                    </umd-element-call-to-action>
                </umd-element-card>
                
                <!-- Card 3 -->
                <umd-element-card>
                    <a slot="image" href="#">
                        <img src="https://playground.designsystem.umd.edu/static/media/thurgood-marshall-hall.9f02ee31.webp" 
                             alt="Research">
                    </a>
                    <h2 slot="headline">
                        <a href="#">Research Impact</a>
                    </h2>
                    <div slot="text">
                        <p>Join researchers tackling grand challenges from climate change to cybersecurity.</p>
                    </div>
                    <umd-element-call-to-action slot="actions" data-display="secondary">
                        <a href="#">Research Areas</a>
                    </umd-element-call-to-action>
                </umd-element-card>
            </div>
        </div>
    </section>
    
    <!-- Styles library post-render CSS -->
    <script>
      window.addEventListener('DOMContentLoaded', () => {
        if (window.Styles && window.Styles.postRenderCss) {
          window.Styles.postRenderCss.then((css) => {
            const styleSheet = document.createElement('style');
            styleSheet.innerHTML = css;
            document.head.appendChild(styleSheet);
          });
        }
      });
    </script>
</body>
</html>

That's it! The components will automatically initialize when the page loads.

👁️ View Live Example

See this code in action - opens in a new window

🔍 What This Example Shows

  • Hero Component - Full-width hero with overlay display mode
  • Layout Spacing - Using umd-layout-space-vertical-landing for consistent vertical spacing
  • Grid System - Three-column responsive grid with umd-grid-gap-three
  • Card Components - Interactive cards with images, headlines, text, and call-to-action buttons
  • Styles Integration - Both pre-render and post-render CSS for optimal performance

Installation Methods

✅ Recommended: NPM Installation (Production)

For production applications, install via NPM and use a build process: 

# Install both packages for complete functionality
npm install @universityofmaryland/web-components-library
npm install @universityofmaryland/web-styles-library

Then in your JavaScript:

import LoadUmdComponents from '@universityofmaryland/web-components-library';
import '@universityofmaryland/web-styles-library';

// Initialize all components
LoadUmdComponents();

// If using the styles package programmatically
import { Styles } from '@universityofmaryland/web-styles-library';

// Apply pre-render styles
Styles.preRenderCss.then(css => {
  const styleElement = document.createElement('style');
  styleElement.textContent = css;
  document.head.appendChild(styleElement);
});

Benefits:

  • Tree-shaking for smaller bundle sizes
  • Version control and dependency management
  • Works offline
  • TypeScript support included

🔧 Selective Component Loading

Load only the components you need for better performance:

import { Components } from '@universityofmaryland/web-components-library';

// Load specific components
Components.card.standard();
Components.hero.base();
Components.navigation.primary();

📚 Documentation & Resources

Component Documentation
Styles & Theming

🤝 Getting Help