HAS Green Academy styleguide

Footer Nav

1179 × 333 
<nav id="footer-navigation" class="c-footer-nav" aria-labelledby="footernavigation" aria-label="Footer navigatie">
    <h4 id="footernavigation" class="u-visually-hidden">Footer navigatie</h4>
    <ul class="o-list-clean c-footer-nav__menubar" role="menubar" aria-label="Footer navigatie">
        <li><a class="c-footer-nav__item" href="#">Privacy</a></li>
        <li><a class="c-footer-nav__item" href="#">Copyright</a></li>
        <li><a class="c-footer-nav__item" href="#">Cookies</a></li>
    </ul>
</nav>
 
<nav id="footer-navigation" class="c-footer-nav" aria-labelledby="footernavigation" aria-label="Footer navigatie">
  <h4 id="footernavigation" class="u-visually-hidden">Footer navigatie</h4>
  <ul class="o-list-clean c-footer-nav__menubar" role="menubar" aria-label="Footer navigatie">
    {{# each items }}
      <li><a class="c-footer-nav__item" href="#">{{ label }}</a></li>
    {{/ each }}
  </ul>
</nav>
 
{
  "items": [
    {
      "label": "Privacy"
    },
    {
      "label": "Copyright"
    },
    {
      "label": "Cookies"
    }
  ]
}
  • Content: 
    /*  =========================================================================
    Components.Footer-nav
    ========================================================================= */

@use 'node_modules/@supple-kit/supple-css/tools/responsive';
@use 'node_modules/@supple-kit/supple-css/tools/space';
@use 'node_modules/@supple-kit/supple-css/tools/typography';
@use 'src/_sass/vars';

/*  Block
    ========================================================================= */

.c-footer-nav {
  // empty for reference
}



/*  Elements
    ========================================================================= */

.c-footer-nav__item {
  color: var(--color-brand-a-dark);
  @include typography.font-size(vars.$milli);
  text-decoration: none;
}

.c-footer-nav__item:hover,
.c-footer-nav__item:focus {
  text-decoration: underline;
}



/*  Responsive
    ========================================================================= */

@include responsive.mq(until-palm-large) {
  .c-footer-nav__menubar > * {
    padding-block-end: var(--space-tiny);
  }
}

@include responsive.mq(palm-large) {
  .c-footer-nav__menubar {
    display: flex;
  }

  .c-footer-nav__menubar > * {
    padding-inline-start: var(--space-base);
  }
}
  • URL: /components/raw/molecules-footer-nav/_footer-nav.scss
  • Filesystem Path: src/components/molecules/nav/footer-nav/_footer-nav.scss
  • Size: 1.2 KB

No notes defined.