Footer Component

What it does

The Footer component renders a site-wide footer area containing your logo, primary navigation menu, and an optional avatar list with descriptive content. It provides a consistent, customizable footer section for your application or website.

Key Features

• Logo section: Displays your brand logo with customizable markup and styling.
• Navigation menu: Integrates a configurable menu-l component for primary footer links.
• Avatar list: Renders a list of avatar-l components to showcase team members or contributors, with support for single or stacked images.
• Customizable modifiers: Apply custom class names or inline styles via props and context.
• Responsive layout: Adapts gracefully to different screen sizes using CSS variables and flex/grid utilities.

How to use

1. Import and render

<footer>
    <!-- Footer markup handled by footer.njk -->
  </footer>

2. Customize appearance

• Override the modifier prop to add BEM-style modifiers or utility classes.
• Adjust menu settings in the menu1 object (e.g., showHeader, overlayNavigation).
• Pass custom HTML in avatars.content to include descriptive text or links below the avatars.

How it works

• Nunjucks templating: The footer.njk file uses renderTemplate to instantiate the WebC component with the passed params.
• WebC component: Inside avatar-l.webc, the avatar list is rendered using a webc:for loop. The menu uses menu-l with its own props.
• CSS & SCSS: Layout and styling rely on SCSS partials, CSS variables for colors/spacings, and responsive mixins for breakpoints.
• Accessibility: The component uses semantic <footer>, <nav> (inside menu-l), and appropriate alt text on images for screen readers.

Example

<!-- Rendered HTML output -->
<footer class="footer--custom">
  <div class="logo">
    <img src="/assets/logo.svg" alt="Site Logo">
  </div>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
  <ul class="avatar-list" style="--avatar-count: 2">
    <li>
      <a href="#">
        <img src="/assets/alice.png" alt="Alice">
      </a>
      <span class="avatar-name">Alice</span>
    </li>
    <li>
      <a href="#">
        <img class="avatar-image-front" src="/assets/bob.png" alt="Bob">
        <img class="avatar-image-back" src="/assets/bob-alt.png" alt="Bob">
      </a>
      <span class="avatar-name">Bob</span>
    </li>
  </ul>
  <p>Meet the team behind the project.</p>
</footer>

Result: A fully responsive footer with logo, navigation links, and an avatar list showcasing your team.

Reference

SCSS Partials:

• _includes/components/Compositions/footer/footer.scss
• _includes/components/avatar/_avatar.scss
• _includes/components/menu/_menu.scss

Mixins & Tokens:

• @mixin respond-to($breakpoint) for responsive adjustments
• CSS variables: --color-primary, --spacing-unit, --avatar-size

Tip: Use the modifier prop to apply contextual background colors or spacing adjustments without touching the core SCSS; leverage CSS variables for quick theming.

HTML Code (Demo)

<footer class="">
  <div class="logo">
    <img src="/assets/images/logo/jclogo.svg" alt="JCrafts Logo">
  </div>
  <div>
    <ul class="nav">
      <li class="nav-item item-1 current active">
        <a href="#" title data-content tabindex="0">Impressum</a>
      </li>
      <li class="nav-item item-2">
        <a href="#" title data-content tabindex="0">Datenschutz</a>
      </li>
      <li class="nav-item item-3">
        <a href="#" title data-content tabindex="0">Service & AGB</a>
      </li>
    </ul>
  </div>
  <div>
    <ul style="--avatar-count: 2" class="avatar-list">
      <li>
        <a href="#" style="--background-blend-color: var(--color-blue-200)">
          <img src="/assets/images/avatar/martina_scholz-bw.jpg" alt="Martina Scholz" class="avatar-image-front">
          <img src="/assets/images/avatar/avatar-martina-scholz.png" alt="Martina Scholz" class="avatar-image-back">
        </a>
        <span class="avatar-name">Martina Scholz</span>
      </li>
      <li>
        <a href="#" style="--background-blend-color: var(--color-yellow-600)">
          <img src="/assets/images/avatar/benjamin-trenkle.jpg" alt="Benjamin Trenkle" class="avatar-image-front">
          <img src="/assets/images/avatar/wicked-chick.png" alt="Benjamin Trenkle" class="avatar-image-back">
        </a>
        <span class="avatar-name">Benjamin Trenkle</span>
      </li>
    </ul>
    <p><p>Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p></p>
  </div>
</footer>

Configuration

{
  "headline": "Footer",
  "modifier": "",
  "content": "",
  "avatars": {
    "type": "list",
    "avatars": [
      {
        "image": "/assets/images/avatar/martina_scholz-bw.jpg",
        "image2": "/assets/images/avatar/avatar-martina-scholz.png",
        "name": "Martina Scholz",
        "link": "#",
        "modifier": "avatar-image-front",
        "modifier2": "avatar-image-back",
        "backgroundBlendColor": "var(--color-blue-200)"
      },
      {
        "image": "/assets/images/avatar/benjamin-trenkle.jpg",
        "image2": "/assets/images/avatar/wicked-chick.png",
        "name": "Benjamin Trenkle",
        "link": "#",
        "modifier": "avatar-image-front",
        "modifier2": "avatar-image-back",
        "backgroundBlendColor": "var(--color-yellow-600)"
      }
    ],
    "content": "<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>"
  },
  "menu1": {
    "title": "Default Menu",
    "menuTagId": "",
    "menuClass": "",
    "moduleClass": "",
    "moduleTag": "div",
    "headerTag": "h3",
    "headerClass": "",
    "showHeader": false,
    "showSubMenuItems": false,
    "overlayNavigation": false,
    "moduleStyle": "html5",
    "items": [
      {
        "title": "Impressum",
        "url": "#",
        "active": true,
        "default": false,
        "linkTitleAttribute": ""
      },
      {
        "title": "Datenschutz",
        "url": "#",
        "active": false,
        "default": false,
        "linkTitleAttribute": ""
      },
      {
        "title": "Service & AGB",
        "url": "#",
        "active": false,
        "default": false,
        "linkTitleAttribute": ""
      }
    ]
  }
}