UMD Web Components Library
    Preparing search index...

    Variable heroMinimalConst

    heroMinimal: ComponentRegistration = ...

    Minimal Hero Component

    A simplified hero component with clean design and multiple theme options. Ideal for interior pages and content-focused layouts.

    <umd-element-hero-minimal>

    • eyebrow - Small text above headline
    • headline - Main hero heading (required)
    • text - Supporting text content
    • image - Hero image
    • actions - Call-to-action buttons/links
    • data-theme - Theme options:
      • dark - Dark theme styling
      • light - Light theme styling
      • maryland - Maryland brand theme
    <!-- Basic minimal hero -->
    <umd-element-hero-minimal>
      <h1 slot="headline">Academic Programs</h1>
      <p slot="text">Explore over 100 undergraduate majors</p>
    </umd-element-hero-minimal>

    <!-- Minimal hero with light theme and image -->
    <umd-element-hero-minimal data-theme="light">
      <p slot="eyebrow">College of Engineering</p>
      <h1 slot="headline">Aerospace Engineering</h1>
      <p slot="text">
        Prepare for a career designing the next generation of
        aircraft and spacecraft.
      </p>
      <img slot="image" src="aerospace-lab.jpg" alt="Aerospace laboratory">
      <div slot="actions">
        <a href="/aerospace/apply">Apply to Program</a>
      </div>
    </umd-element-hero-minimal>

    <!-- Maryland theme minimal hero -->
    <umd-element-hero-minimal data-theme="maryland">
      <h1 slot="headline">Go Terps!</h1>
      <p slot="text">Follow Maryland Athletics</p>
      <div slot="actions">
        <a href="/athletics">View Schedule</a>
      </div>
    </umd-element-hero-minimal>

    1.0.0

    Settings

    Member Visibility

    On This Page

    Custom ElementSlotsAttributes