BBH

Page Footer Portal 

<footer class="c-footer">

    <hr class="c-footer__spacer">

    <div class="text-light-50 text-style-mini">
        <h5 class="mb-6"><strong>Urheber der Bilder</strong></h5>
        <div class="grid gap-1">
            <a ui-image-open href="#" data-src="https://iason.hamburg.de/iason/km1-responsive/resources/stegmann-bild.jpg" data-caption="Caption 1 ipsum amet">Linktext 1 ipsum amet</a>
            <a ui-image-open href="#" data-src="https://iason.hamburg.de/iason/km1-responsive/resources/sparda-bank.jpg" data-caption="Caption 2 ipsum dolor sit amet">Linktext 2 ipsum dolor sit amet</a>
            <a ui-image-open href="#" data-src="https://iason.hamburg.de/iason/km1-responsive/resources/koegler-treppenlifte.jpg" data-caption="Caption 3">Linktext 3</a>
            <a ui-image-open href="#" data-src="https://iason.hamburg.de/iason/images/677bc3f5f383bb2a91166825/consultatio-strafverteidiger-logo.jpg" data-caption="Caption 4 ipsum amet">Linktext 4 ipsum amet</a>
        </div>
        <div class="grid gap-1" id="uid-88e4c5a0b84c" ui-toggle-target aria-hidden>
            <a ui-image-open href="#" data-src="https://iason.hamburg.de/iason/images/665990db64be8f52add1689d/frisierbar-ottensen-logo.jpg" data-caption="Caption 5 dolor sit amet">Linktext 5 dolor sit amet</a>
            <a ui-image-open href="#" data-src="https://iason.hamburg.de/iason/images/6360f7e8e4273a3be4aa59c4/mhc-mobility_logo.jpg" data-caption="Caption 6 ipsum sit amet">Linktext 6 ipsum sit amet</a>
            <a ui-image-open href="#" data-src="https://iason.hamburg.de/iason/images/605e78c6e24ae01e9cc373f8/kaleido-dp+auf+Pixabay.jpg" data-caption="Caption 7 ipsum dolor">Linktext 7 ipsum dolor</a>
        </div>
        <div class="mt-4">

            <button ui-toggle="uid-88e4c5a0b84c" ui-toggle-target id="uid-88e4c5a0b84c" class="
    c-toggle
    c-toggle--light
  ">
                <span class="c-toggle__icon">

                    <svg class="text-neutral-grey-02">
                        <use xlink:href="#circle-plus"></use>
                    </svg>

                </span>
                <span class="c-toggle__label">Alle Quellen anzeigen</span>
            </button>

            <button ui-toggle="uid-88e4c5a0b84c" id="uid-88e4c5a0b84c" ui-toggle-target aria-hidden class="
    c-toggle
    c-toggle--light
  ">
                <span class="c-toggle__icon">

                    <svg class="text-neutral-grey-02">
                        <use xlink:href="#circle-minus"></use>
                    </svg>

                </span>
                <span class="c-toggle__label">Weniger Quellen anzeigen</span>
            </button>

        </div>
    </div>

    <hr class="c-footer__spacer has-border-bottom">

    <div class="grid gap-6 justify-around max-w-[1200px] mx-auto large:flex large:gap-10">

        <div class="c-icon-link">
            <span class="c-icon-link__icon">

                <svg class="text-neutral-grey-02">
                    <use xlink:href="#arw-right"></use>
                </svg>

            </span>
            <a href="/" class="c-icon-link__label">

                <span>Branchenbuch</span>

            </a>
        </div>

        <div class="c-icon-link">
            <span class="c-icon-link__icon">

                <svg class="text-neutral-grey-02">
                    <use xlink:href="#arw-right"></use>
                </svg>

            </span>
            <a href="/" class="c-icon-link__label">

                <span>Behördenfinder</span>

            </a>
        </div>

        <div class="c-icon-link">
            <span class="c-icon-link__icon">

                <svg class="text-neutral-grey-02">
                    <use xlink:href="#arw-right"></use>
                </svg>

            </span>
            <a href="/" class="c-icon-link__label">

                <span>Veranstaltungen</span>

            </a>
        </div>
    </div>

    <hr class="c-footer__spacer has-border-bottom">

    <ul class="grid gap-6 place-content-center large:flex large:gap-10">
        <li><a href="/">Bürgerservice & Politik</a></li>
        <li><a href="/">Hotel & Tourismus</a></li>
        <li><a href="/">Erlebnis & Freizeit</a></li>
        <li><a href="/">Kultur & Tickets</a></li>
        <li><a href="/">Jobs & Wohnen</a></li>
        <li><a href="/">Verkehr</a></li>
    </ul>

    <hr class="c-footer__spacer has-border-bottom has-indent-left-right">

    <ul class="grid gap-6 place-content-center large:flex large:gap-10">
        <li><a href="/">Stadtplan</a></li>
        <li><a href="/">Bus & Bahn</a></li>
        <li><a href="/">Mail</a></li>
        <li><a href="/">Presse</a></li>
        <li><a href="/">Mediendaten</a></li>
        <li><a href="/">Jobs</a></li>
    </ul>

    <hr class="c-footer__spacer has-border-bottom has-indent-left-right">

    <h4 class="text-style-p mb-4">Soziale Medien</h4>

    <button class="
    c-button
    c-button--primary
    c-button--square
    c-button--large

    

    
  ">

        <span class="c-button__icon">

            <svg class="text-neutral-grey-02">
                <use xlink:href="#facebook"></use>
            </svg>

        </span>

    </button>

    <button class="
    c-button
    c-button--primary
    c-button--square
    c-button--large

    

    
  ">

        <span class="c-button__icon">

            <svg class="text-neutral-grey-02">
                <use xlink:href="#twitterx"></use>
            </svg>

        </span>

    </button>

    <button class="
    c-button
    c-button--primary
    c-button--square
    c-button--large

    

    
  ">

        <span class="c-button__icon">

            <svg class="text-neutral-grey-02">
                <use xlink:href="#instagram"></use>
            </svg>

        </span>

    </button>

    <button class="
    c-button
    c-button--primary
    c-button--square
    c-button--large

    

    
  ">

        <span class="c-button__icon">

            <svg class="text-neutral-grey-02">
                <use xlink:href="#youtube"></use>
            </svg>

        </span>

    </button>

    <hr class="mb-20">

    <div class="bg-misc-blue-03 py-16 text-style-mini">
        <ul class="grid gap-6 place-content-center large:flex large:gap-10">
            <li><a href="/">hamburg.de 2024</a></li>
            <li><a href="/">Impressum</a></li>
            <li><a href="/">Datenschutz</a></li>
            <li><a href="/">Barrierefreiheit</a></li>
            <li><a href="/">Cookie-Richtlinien</a></li>
            <li><a href="/">Nutzungsbedingungen</a></li>
        </ul>
    </div>
</footer>
 
{% set uid = getUID() %}

<footer class="c-footer">

  <hr class="c-footer__spacer">

  <div class="text-light-50 text-style-mini">
    <h5 class="mb-6"><strong>Urheber der Bilder</strong></h5>
    <div class="grid gap-1">
      <a ui-image-open href="#" data-src="https://iason.hamburg.de/iason/km1-responsive/resources/stegmann-bild.jpg" data-caption="Caption 1 ipsum amet">Linktext 1 ipsum amet</a>
      <a ui-image-open href="#" data-src="https://iason.hamburg.de/iason/km1-responsive/resources/sparda-bank.jpg" data-caption="Caption 2 ipsum dolor sit amet">Linktext 2 ipsum dolor sit amet</a>
      <a ui-image-open href="#" data-src="https://iason.hamburg.de/iason/km1-responsive/resources/koegler-treppenlifte.jpg" data-caption="Caption 3">Linktext 3</a>
      <a ui-image-open href="#" data-src="https://iason.hamburg.de/iason/images/677bc3f5f383bb2a91166825/consultatio-strafverteidiger-logo.jpg" data-caption="Caption 4 ipsum amet">Linktext 4 ipsum amet</a>
    </div>
    <div class="grid gap-1" id="{{ uid }}" ui-toggle-target aria-hidden>
      <a ui-image-open href="#" data-src="https://iason.hamburg.de/iason/images/665990db64be8f52add1689d/frisierbar-ottensen-logo.jpg" data-caption="Caption 5 dolor sit amet">Linktext 5 dolor sit amet</a>
      <a ui-image-open href="#" data-src="https://iason.hamburg.de/iason/images/6360f7e8e4273a3be4aa59c4/mhc-mobility_logo.jpg" data-caption="Caption 6 ipsum sit amet">Linktext 6 ipsum sit amet</a>
      <a ui-image-open href="#" data-src="https://iason.hamburg.de/iason/images/605e78c6e24ae01e9cc373f8/kaleido-dp+auf+Pixabay.jpg" data-caption="Caption 7 ipsum dolor">Linktext 7 ipsum dolor</a>
    </div>
    <div class="mt-4">
      {% render '@toggle', {
        theme: 'light',
        uid: uid,
        label: {
          show: "Alle Quellen anzeigen",
          hide: "Weniger Quellen anzeigen"
        }
      } %}

    </div>
  </div>

  <hr class="c-footer__spacer has-border-bottom">

  <div class="grid gap-6 justify-around max-w-[1200px] mx-auto large:flex large:gap-10">
    {% render '@icon-link', { line1: 'Branchenbuch'} %}
    {% render '@icon-link', { line1: 'Behördenfinder'} %}
    {% render '@icon-link', { line1: 'Veranstaltungen'} %}
  </div>

  <hr class="c-footer__spacer has-border-bottom">

  <ul class="grid gap-6 place-content-center large:flex large:gap-10">
    <li><a href="/">Bürgerservice & Politik</a></li>
    <li><a href="/">Hotel & Tourismus</a></li>
    <li><a href="/">Erlebnis & Freizeit</a></li>
    <li><a href="/">Kultur & Tickets</a></li>
    <li><a href="/">Jobs & Wohnen</a></li>
    <li><a href="/">Verkehr</a></li>
  </ul>

  <hr class="c-footer__spacer has-border-bottom has-indent-left-right">

  <ul class="grid gap-6 place-content-center large:flex large:gap-10">
    <li><a href="/">Stadtplan</a></li>
    <li><a href="/">Bus & Bahn</a></li>
    <li><a href="/">Mail</a></li>
    <li><a href="/">Presse</a></li>
    <li><a href="/">Mediendaten</a></li>
    <li><a href="/">Jobs</a></li>
  </ul>

  <hr class="c-footer__spacer has-border-bottom has-indent-left-right">

  <h4 class="text-style-p mb-4">Soziale Medien</h4>

  {% render '@button', {icon: 'facebook', variant: 'square'} %}
  {% render '@button', {icon: 'twitterx', variant: 'square'} %}
  {% render '@button', {icon: 'instagram', variant: 'square'} %}
  {% render '@button', {icon: 'youtube', variant: 'square'} %}

  <hr class="mb-20">

  <div class="bg-misc-blue-03 py-16 text-style-mini">
    <ul class="grid gap-6 place-content-center large:flex large:gap-10">
      <li><a href="/">hamburg.de 2024</a></li>
      <li><a href="/">Impressum</a></li>
      <li><a href="/">Datenschutz</a></li>
      <li><a href="/">Barrierefreiheit</a></li>
      <li><a href="/">Cookie-Richtlinien</a></li>
      <li><a href="/">Nutzungsbedingungen</a></li>
    </ul>
  </div>
</footer>
 
/* No context defined. */

No notes defined.