Den Haag Design System

Footer 

<footer class="footer">
    <div class="footer__content container">
        <div>
            <h2 class="footer__heading">Den Haag</h2>
            <ul class="footer__list">
                <li>
                    <a href="#">Ga naar denhaag.nl</a>
                </li>
            </ul>
        </div>
        <div>
            <h2 class="footer__heading">Verklaringen</h2>
            <ul class="footer__list">
                <li>
                    <a href="#">Gebruikersvoorwaarden</a>
                </li>
                <li>
                    <a href="#">Proclaimer</a>
                </li>
                <li>
                    <a href="#">Privacyverklaring</a>
                </li>
            </ul>
        </div>
        <div class="hide-mobile">
            <h2 class="footer__heading">Taal</h2>
            <ul class="footer__list">
                <li>
                    <a href="#" hreflang="en">EN English</a>
                </li>
            </ul>
        </div>
    </div>
</footer>
 
<footer class="footer">
  <div class="footer__content container">
    <div>
      <h2 class="footer__heading">Den Haag</h2>
      <ul class="footer__list">
        <li>
          <a href="#">Ga naar denhaag.nl</a>
        </li>
      </ul>
    </div>
    <div>
      <h2 class="footer__heading">Verklaringen</h2>
      <ul class="footer__list">
        <li>
          <a href="#">Gebruikersvoorwaarden</a>
        </li>
        <li>
          <a href="#">Proclaimer</a>
        </li>
        <li>
          <a href="#">Privacyverklaring</a>
        </li>
      </ul>
    </div>
    <div class="hide-mobile">
      <h2 class="footer__heading">Taal</h2>
      <ul class="footer__list">
        <li>
          <a href="#" hreflang="en">EN English</a>
        </li>
      </ul>
    </div>
  </div>
</footer>
 
/* No context defined for this component. */
  • Content: 
    .footer {
  background-color: $yellow;
  border-top: $space-s solid $yellow-light;
  padding: $space-xl 0;
  border-image: {
    source: url("../img/facetten-footer.svg");
    slice: 10;
  };

  &__heading {
    font-size: $fs-up-1;
    color: $black;
    margin-top: 0;
  }

  &__list {
    margin-top: $space-xxs;
    margin-bottom: 0;
    padding-left: 0;

    li {
      list-style: none;
    }

    a {
      color: $grey-dark;
    }

    + .footer__heading {
      margin-top: $space-m;
    }
  }

  &__content {
    display: flex;
    flex-wrap: wrap;

    > div {
      flex-grow: 1;
      padding: 0 $space-s $space-m;

      @media (min-width: $desktop) {
        padding-bottom: 0;
      }

      &:first-child {

        @media (min-width: $desktop) {
          padding-left: 0;
          padding-bottom: 0;
        }
      }

      &:last-child {
        padding-bottom: 0;

        @media (min-width: $desktop) {
            padding-right: 0;
        }
      }
    }
  }
}
  • URL: /components/raw/footer/_footer.scss
  • Filesystem Path: src/components/01-componenten/footer/_footer.scss
  • Size: 987 Bytes

Omschrijving

[Component naam] zorgt ervoor dat de gebruiker [gebruik van het component].

[Afbeelding in live omgeving]

Gedrag

Wanneer een gebruiker x doet, dan gebeurt er y.

Algemene richtlijnen

Waarvoor kun je dit component gebruiken?

Content richtlijnen

Zijn er specifieke content richtlijnen?

Accessibility richtlijnen

Zijn er specifieke accessibility richtlijnen?

Varianten

Variant 1: gebruik je in situatie x. Variant 2: gebruik je in situatie y. Variant 3: gebruik je in situatie z.

Changelog

Versie 0.1: component aangemaakt