DOTD Component Library

Footer Nav 

<nav role="navigation" class="c-footer-nav">
      <a class="o-link o-link--sm c-footer-nav__link" href="/" target="_self">
          <span class="o-link__label">
              Contact Us
          </span>
      </a>
      <a class="o-link o-link--sm c-footer-nav__link" href="/" target="_self">
          <span class="o-link__label">
              Public Records Request
          </span>
      </a>
      <a class="o-link o-link--sm c-footer-nav__link" href="/" target="_self">
          <span class="o-link__label">
              Employee Portal
          </span>
      </a>
      <a class="o-link o-link--sm c-footer-nav__link" href="/" target="_self">
          <span class="o-link__label">
              Privacy Policy
          </span>
      </a>
  </nav>
 
{% set base_class = footer_nav.base_class|default('c-footer-nav') %}
{% if footer_nav.items %}
  <nav role="navigation" class="{{ bem(base_class, footer_nav.element, footer_nav.modifiers, footer_nav.extra) }}">
    {% for item in footer_nav.items %}
      {% include "@link" with {
        "link": {
          "text": item.text,
          "url": item.url,
          "target": item.target,
          "modifiers": "sm",
          "extra": bem(base_class, 'link')
        }
      } %}
    {% endfor %}
  </nav>
{% endif %}
 
{
  "footer_nav": {
    "items": [
      {
        "text": "Contact Us",
        "url": "/"
      },
      {
        "text": "Public Records Request",
        "url": "/"
      },
      {
        "text": "Employee Portal",
        "url": "/"
      },
      {
        "text": "Privacy Policy",
        "url": "/"
      }
    ]
  }
}
  • Content: 
    /* ------------------------------------*\
  $FOOTER NAV
\*------------------------------------ */

.c-footer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: var(--dotd-space-lg);
  row-gap: var(--dotd-space);
}
  • URL: /components/raw/footer-nav/_footer-nav.scss
  • Filesystem Path: components/02-molecules/navigation/footer-nav/_footer-nav.scss
  • Size: 268 Bytes

No notes defined.