UMD Web Components Library
    Preparing search index...

    Variable optionsConst

    options: ComponentRegistration = ...

    Footer Component

    A versatile footer component with three layout options for different site needs. Automatically adds accessibility attributes if not provided.

    <umd-element-footer>

    • contact-headline - Contact section header
    • contact-links - Contact links section
    • contact-address - Address information
    • call-to-action - Primary CTA button/link
    • social-links - Social media links
    • utility-links - Utility navigation links
    • link-column-one - First link column (mega footer only)
    • link-column-two - Second link column (mega footer only)
    • link-column-three - Third link column (mega footer only)
    • background-image - Background image (visual footer only, accepts: img)
    • type - Footer layout options:
      • simple - Basic footer layout (default)
      • mega - Large footer with link columns
      • visual - Footer with background image
    • data-theme - Theme options:
      • light - Light theme styling
    <!-- Simple footer -->
    <umd-element-footer type="simple">
      <h2 slot="contact-headline">Contact Us</h2>
      <div slot="contact-links">
        <a href="tel:3014050100">301.405.0100</a>
        <a href="mailto:info@umd.edu">info@umd.edu</a>
      </div>
      <address slot="contact-address">
        University of Maryland<br>
        College Park, MD 20742
      </address>
      <div slot="social-links">
        <a href="#">Facebook</a>
        <a href="#">Twitter</a>
      </div>
    </umd-element-footer>

    <!-- Mega footer with columns -->
    <umd-element-footer type="mega" data-theme="light">
      <div slot="link-column-one">
        <h3>Academics</h3>
        <ul>
          <li><a href="#">Programs</a></li>
          <li><a href="#">Courses</a></li>
        </ul>
      </div>
      <div slot="link-column-two">
        <h3>Resources</h3>
        <ul>
          <li><a href="#">Libraries</a></li>
          <li><a href="#">Technology</a></li>
        </ul>
      </div>
      <a slot="call-to-action" href="/apply">Apply Now</a>
      <div slot="utility-links">
        <a href="/privacy">Privacy</a>
        <a href="/accessibility">Accessibility</a>
      </div>
    </umd-element-footer>

    <!-- Visual footer with background -->
    <umd-element-footer type="visual">
      <img slot="background-image" src="campus.jpg" alt="Campus view">
      <h2 slot="contact-headline">Visit Campus</h2>
      <a slot="call-to-action" href="/visit">Schedule a Tour</a>
    </umd-element-footer>

    1.0.0

    Settings

    Member Visibility

    On This Page

    Custom ElementSlotsAttributes