Footer

WIP

HTML
View
Context
Assets
Info
Notes


        
        <div id="footer-26770-56180" class="footer">
    <div class="footer__inner">
        <div class="footer__sitemap">
            <div class="footer__section">
                <div id="footer-26770-56180-sitemap-section-1" class="footer__section-headline">

                    <span class="headline" data-headline-size="6"><span class="headline__text">Information</span></span>
                </div>

                <ul class="footer__links" role="list" aria-labelledby="footer-26770-56180-sitemap-section-1">
                    <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">About us</span></a></li>
                    <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Contact</span></a></li>
                    <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Service</span></a></li>
                    <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Blog &amp; News</span></a></li>
                    <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Pressroom</span></a></li>
                </ul>
            </div>
            <div class="footer__section">
                <div id="footer-26770-56180-sitemap-section-2" class="footer__section-headline">

                    <span class="headline" data-headline-size="6"><span class="headline__text">Licensing</span></span>
                </div>

                <ul class="footer__links" role="list" aria-labelledby="footer-26770-56180-sitemap-section-2">
                    <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Information</span></a></li>
                    <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Models</span></a></li>
                    <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">SDK Content</span></a></li>
                    <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Support</span></a></li>
                </ul>
            </div>
            <div class="footer__section">
                <div id="footer-26770-56180-sitemap-section-3" class="footer__section-headline">

                    <span class="headline" data-headline-size="6"><span class="headline__text">SDK Products</span></span>
                </div>

                <ul class="footer__links" role="list" aria-labelledby="footer-26770-56180-sitemap-section-3">
                    <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">4TUNE</span></a></li>
                    <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">ATAAK!</span></a></li>
                    <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">AUFTAKT</span></a></li>
                    <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">BARBEATQ</span></a></li>
                    <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">CWAVE</span></a></li>
                    <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">ELASTIQUE</span></a></li>
                    <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">ESPACE</span></a></li>
                    <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">FXPACK</span></a></li>
                    <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">KORT</span></a></li>
                    <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">METERING</span></a></li>
                    <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">RESTORE</span></a></li>
                    <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">RETUNE</span></a></li>
                    <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">TONART</span></a></li>
                    <li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">ZREVERB</span></a></li>
                </ul>
            </div>
        </div>

        <div class="footer__icon-buttons">

            <a class="button" title="Email contact" href="#">
                <span class="button__icon">
                    <svg class="icon icon--envelope" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.dcaca1c147.svg#envelope"></use>
                    </svg> </span>
            </a>

            <a class="button" title="Facebook" href="#">
                <span class="button__icon">
                    <svg class="icon icon--facebook" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.dcaca1c147.svg#facebook"></use>
                    </svg> </span>
            </a>

            <a class="button" title="LinkedIn" href="#">
                <span class="button__icon">
                    <svg class="icon icon--linkedin" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.dcaca1c147.svg#linkedin"></use>
                    </svg> </span>
            </a>

            <a class="button" title="X" href="#">
                <span class="button__icon">
                    <svg class="icon icon--x" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.dcaca1c147.svg#x"></use>
                    </svg> </span>
            </a>

            <a class="button" title="YouTube" href="#">
                <span class="button__icon">
                    <svg class="icon icon--youtube" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.dcaca1c147.svg#youtube"></use>
                    </svg> </span>
            </a>
        </div>

        <div class="footer__closing-line">
            <img width="164" height="50" src="/assets/images/logo.7e7ebc0793.svg" alt="zplane" class="footer__logo">

            <ul class="footer__meta-links">
                <li class="footer__meta-link">

                    <a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Imprint</span></a>
                </li>
                <li class="footer__meta-link">

                    <a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Privacy Policy</span></a>
                </li>
            </ul>
        </div>
    </div>
</div>


        {% set id = id ??? html_id('footer') %}

<div {{ html_attributes({
  id,
  class: 'footer',
}, attrs ?? {}) }}>
  <div class="footer__inner">
    {% if sitemap|default %}
      <div class="footer__sitemap">
        {% for section in sitemap %}
          {% set headlineId = "sitemap-section-#{loop.index}" | namespaceInputId(id) %}
          <div class="footer__section">
            <div id="{{ headlineId }}" class="footer__section-headline">
              {% include '@headline' with {
                level: null,
                tag: 'span',
                size: 6,
                text: section.title,
              } only %}
            </div>

            <ul class="footer__links" role="list" aria-labelledby="{{ headlineId }}">
              {% for link in section.links %}
                <li class="footer__link">{% apply spaceless %}
                  {% include '@link' with link only %}
                {% endapply %}</li>
              {% endfor %}
            </ul>
          </div>
        {% endfor %}
      </div>
    {% endif %}

    {% if iconButtons|default %}
      <div class="footer__icon-buttons">
        {% for iconButton in iconButtons %}
          {% include '@button' with iconButton only %}
        {% endfor %}
      </div>
    {% endif %}

    <div class="footer__closing-line">
      <img {{ html_attributes({
        width: 164,
        height: 50,
        src: asset('images/logo.svg'),
        alt: 'zplane',
        class: 'footer__logo',
      }) }}>

      {% if metaLinks|default %}
        <ul class="footer__meta-links">
          {% for metaLink in metaLinks %}
            <li class="footer__meta-link">
              {% include '@link' with metaLink only %}
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </div>
  </div>
</div>


        
            
            {
  "sitemap": [
    {
      "title": "Information",
      "links": [
        {
          "link": "#",
          "text": "About us"
        },
        {
          "link": "#",
          "text": "Contact"
        },
        {
          "link": "#",
          "text": "Service"
        },
        {
          "link": "#",
          "text": "Blog & News"
        },
        {
          "link": "#",
          "text": "Pressroom"
        }
      ]
    },
    {
      "title": "Licensing",
      "links": [
        {
          "link": "#",
          "text": "Information"
        },
        {
          "link": "#",
          "text": "Models"
        },
        {
          "link": "#",
          "text": "SDK Content"
        },
        {
          "link": "#",
          "text": "Support"
        }
      ]
    },
    {
      "title": "SDK Products",
      "links": [
        {
          "link": "#",
          "text": "4TUNE"
        },
        {
          "link": "#",
          "text": "ATAAK!"
        },
        {
          "link": "#",
          "text": "AUFTAKT"
        },
        {
          "link": "#",
          "text": "BARBEATQ"
        },
        {
          "link": "#",
          "text": "CWAVE"
        },
        {
          "link": "#",
          "text": "ELASTIQUE"
        },
        {
          "link": "#",
          "text": "ESPACE"
        },
        {
          "link": "#",
          "text": "FXPACK"
        },
        {
          "link": "#",
          "text": "KORT"
        },
        {
          "link": "#",
          "text": "METERING"
        },
        {
          "link": "#",
          "text": "RESTORE"
        },
        {
          "link": "#",
          "text": "RETUNE"
        },
        {
          "link": "#",
          "text": "TONART"
        },
        {
          "link": "#",
          "text": "ZREVERB"
        }
      ]
    }
  ],
  "iconButtons": [
    {
      "link": "#",
      "title": "Email contact",
      "icon": "envelope"
    },
    {
      "link": "#",
      "title": "Facebook",
      "icon": "facebook"
    },
    {
      "link": "#",
      "title": "LinkedIn",
      "icon": "linkedin"
    },
    {
      "link": "#",
      "title": "X",
      "icon": "x"
    },
    {
      "link": "#",
      "title": "YouTube",
      "icon": "youtube"
    }
  ],
  "metaLinks": [
    {
      "link": "#",
      "text": "Imprint"
    },
    {
      "link": "#",
      "text": "Privacy Policy"
    }
  ]
}

File:

Content:


                                .footer {
  container-name: footer;
  container-type: inline-size;
}

.footer__sitemap {
  border-block-start: 1px solid var(--color-gray-200);
  column-gap: var(--grid-gap);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  padding-block-start: 4.8rem;
  row-gap: 4rem;
}

.footer__section {
  @container footer (inline-size > 42rem) {
    &:has(.footer__link:nth-child(6)) {
      grid-column: span 2;
    }
  }

  @container footer (inline-size > 64rem) {
    &:has(.footer__link:nth-child(6)) {
      grid-column: span 3;
    }
  }
}

.footer__section-headline {
  margin-block-end: 1.6rem;
}

.footer__links {
  column-gap: var(--grid-gap);
  display: grid;
  font-size: var(--font-size-default);
  grid-template-columns: 1fr;
  line-height: var(--line-height-regular);
  list-style-position: inside;
  list-style-type: '\E001';
  row-gap: 0.8rem;

  @container footer (inline-size > 42rem) {
    &:has(.footer__link:nth-child(6)) {
      grid-template-columns: 1fr 1fr;
    }
  }

  @container footer (inline-size > 64rem) {
    &:has(.footer__link:nth-child(6)) {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
}

.footer__link {
  --link-color: var(--color-steel-700);
  --link-underline-color: transparent;
  --link-color--engaged: var(--color-steel-900);
  --link-underline-color--engaged: currentColor;

  color: var(--color-steel-700);

  &::marker {
    color: var(--color-orange-500);
    content: '\E001\2003\2003';
    font-family: 'bullet', var(--root-font-family);
    font-size: 1em;
    line-height: 0;
  }
}

.footer__icon-buttons {
  border-block: 1px solid var(--color-gray-200);
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  margin-block-start: 4.8rem;
  padding-block: 3.2rem;
}

.footer__closing-line {
  align-items: center;
  column-gap: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-block-start: 3.2rem;
  row-gap: 1.6rem;

  @container footer (inline-size > 42rem) {
    flex-direction: row;
    justify-content: space-between;
  }
}

.footer__meta-links {
  --link-color: var(--color-gray-600);
  --link-underline-color: transparent;
  --link-color--engaged: var(--color-steel-800);
  --link-underline-color--engaged: currentColor;

  display: flex;
  flex-wrap: wrap;
  font-size: var(--font-size-small);
  gap: 1.6rem;
  line-height: var(--line-height-regular);
}

.footer__logo {
  block-size: auto;
  inline-size: 10rem;
}

URL: /components/raw/footer/footer.scss
Filesystem Path: src/components/4-organisms/footer/footer.scss
Size: 2.5 KB

Handle: @footer
Preview:
- With layout
- Component only
Filesystem Path: src/components/4-organisms/footer/footer.twig
References (3): @headline, @link, @button
Referenced by (4): @site, @site--article, @site--page, @site--product

No notes defined.