UMD Web Components Library
    Preparing search index...

    Variable expandConst

    expand: ComponentRegistration = ...

    Expandable Hero Component

    A hero component with expandable content area and sticky positioning support. Ideal for immersive experiences with additional content reveal.

    <umd-element-hero-expand>

    • eyebrow - Small text above headline
    • headline - Main hero heading
    • image - Hero image
    • video - Hero video (as video element or container)
    • actions - Call-to-action buttons/links
    • additional - Additional expandable content area
    • data-visual-position - Top position for sticky behavior (in pixels)
    • data-top-position - Override sticky position value
    • data-visual-position - Updates sticky position dynamically
    <!-- Basic expandable hero -->
    <umd-element-hero-expand>
      <h1 slot="headline">Explore Our Campus</h1>
      <img slot="image" src="aerial-view.jpg" alt="Campus aerial view">
      <div slot="additional">
        <p>Discover 1,250 acres of possibilities...</p>
      </div>
    </umd-element-hero-expand>

    <!-- Expandable hero with video and sticky position -->
    <umd-element-hero-expand data-visual-position="80">
      <p slot="eyebrow">Experience Maryland</p>
      <h1 slot="headline">Where Ideas Take Flight</h1>
      <video slot="video" autoplay muted loop>
        <source src="campus-tour.mp4" type="video/mp4">
      </video>
      <div slot="actions">
        <button>Take Virtual Tour</button>
      </div>
      <div slot="additional">
        <h2>Discover Your Path</h2>
        <p>With over 100 undergraduate majors...</p>
      </div>
    </umd-element-hero-expand>

    <!-- Hero with wrapped video element -->
    <umd-element-hero-expand>
      <h1 slot="headline">Innovation Hub</h1>
      <div slot="video">
        <video autoplay muted loop>
          <source src="innovation.mp4" type="video/mp4">
        </video>
      </div>
    </umd-element-hero-expand>

    1.0.0

    Settings

    Member Visibility

    On This Page

    Custom ElementSlotsAttributesObserved Attributes