UMD Web Components Library
    Preparing search index...

    Variable standard

    standard: () => void

    Standard Card

    A versatile card component for displaying content with optional images, actions, and themes. Supports multiple display modes including block, list, and transparent variations.

    <umd-element-card>

    • headline - Card title (required, accepts: h2-h6, p)
    • text - Card content (accepts: p)
    • eyebrow - Small text above headline
    • image - Card image
    • actions - Action buttons or links
    • date - Date information
    • data-theme - Theme styling options:
      • dark - Dark theme styling
      • light - Light theme styling
    • data-visual - Visual display options:
      • transparent - Transparent background
      • aligned - Aligned content layout
      • bordered - Add border styling
      • list - List display format

    Type declaration

      • (): void

      • Returns void

    <!-- Basic card -->
    <umd-element-card>
      <h3 slot="headline">Research Breakthrough</h3>
      <p slot="text">Scientists discover new method for sustainable energy.</p>
    </umd-element-card>

    <!-- Card with image and actions -->
    <umd-element-card>
      <img slot="image" src="campus.jpg" alt="Campus view">
      <p slot="eyebrow">Campus News</p>
      <h3 slot="headline">New Student Center Opens</h3>
      <p slot="text">State-of-the-art facility welcomes students.</p>
      <div slot="actions">
        <a href="/read-more">Read More</a>
      </div>
    </umd-element-card>

    <!-- List layout with dark theme -->
    <umd-element-card data-theme="dark" data-visual="list">
      <h4 slot="headline">Quick Links</h4>
      <p slot="text">Access important resources and tools.</p>
    </umd-element-card>

    1.0.0

    Settings

    Member Visibility

    On This Page

    Custom ElementSlotsAttributes