UMD Web Components Library
    Preparing search index...

    Variable cardStandard

    cardStandard: () => 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-transparent - Visual display options:
      • true - Transparent background
    • data-visual-image-aligned - Visual display options:
      • true - Aligned content layout
    • data-visual-bordered - Visual display options:
      • true - Add border styling
    • data-display - Display options:
      • 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-display="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