Gov Design System CE - Templates

Footer 

<footer class="gov-footer">
    <gov-flex class="gov-footer__content" direction="column" justify-content="space-between" gap="3xl">
        <gov-flex responsive="false">
            <ul class="gov-footer__main gov-list--plain">
                <li>
                    <nav aria-labelledby="nav1">
                        <h5 id="nav1">Title</h5>
                        <ul class="gov-list--plain">
                            <li><gov-link href="#" size="s">Link</gov-link></li>
                            <li><gov-link href="#" size="s">Link</gov-link></li>
                            <li><gov-link href="#" size="s">Link</gov-link></li>
                            <li><gov-link href="#" size="s">Link</gov-link></li>
                            <li><gov-link href="#" size="s">Link</gov-link></li>
                        </ul>
                    </nav>
                </li>
                <li>
                    <nav aria-labelledby="nav2">
                        <h5 id="nav2">Title</h5>
                        <ul class="gov-list--plain">
                            <li><gov-link href="#" size="s">Link</gov-link></li>
                            <li><gov-link href="#" size="s">Link</gov-link></li>
                            <li><gov-link href="#" size="s">Link</gov-link></li>
                            <li><gov-link href="#" size="s">Link</gov-link></li>
                            <li><gov-link href="#" size="s">Link</gov-link></li>
                        </ul>
                    </nav>
                </li>
                <li>
                    <nav aria-labelledby="nav3">
                        <h5 id="nav3">Title</h5>
                        <ul class="gov-list--plain">
                            <li><gov-link href="#" size="s">Link</gov-link></li>
                            <li><gov-link href="#" size="s">Link</gov-link></li>
                            <li><gov-link href="#" size="s">Link</gov-link></li>
                            <li><gov-link href="#" size="s">Link</gov-link></li>
                            <li><gov-link href="#" size="s">Link</gov-link></li>
                        </ul>
                    </nav>
                </li>
                <li>
                    <h5>Title</h5>
                    <gov-flex direction="column" gap="l">
                        <address>
                            <ul class="gov-footer__address gov-list--plain">
                                <li>Adresa 1</li>
                                <li>686 01 Praha</li>
                                <li>
                                    <gov-link href="tel:+420789325678" size="s">
                                        <gov-icon type="templates" name="telephone" slot="icon-start" alt="tel.:" aria-label="telefon"></gov-icon>
                                        +420 789 325 678
                                    </gov-link>
                                </li>
                                <li>
                                    <gov-link href="mailto:loremipsum@email.com" size="s">
                                        <gov-icon type="templates" name="envelope" slot="icon-start" alt="e-mail:" aria-label="e-mail"></gov-icon>
                                        loremipsum@email.com
                                    </gov-link>
                                </li>
                            </ul>
                        </address>
                        <nav aria-label="Odkazy na sociální sítě">
                            <ul class="gov-social gov-list--plain">
                                <li>
                                    <gov-button color="primary" size="s" type="base" aria-label="Facebook" target="_blank" rel="noreferrer nofollow" href="#" title="Facebooku">
                                        <gov-icon type="templates" name="facebook" slot="icon-start" size="s"></gov-icon>

                                    </gov-button>
                                </li>
                                <li>
                                    <gov-button color="primary" size="s" type="base" aria-label="Instagram" target="_blank" rel="noreferrer nofollow" href="#" title="Instagram">
                                        <gov-icon type="templates" name="instagram" slot="icon-start" size="s"></gov-icon>

                                    </gov-button>
                                </li>
                                <li>
                                    <gov-button color="primary" size="s" type="base" aria-label="Youtube" target="_blank" rel="noreferrer nofollow" href="#" title="Youtube">
                                        <gov-icon type="templates" name="youtube" slot="icon-start" size="s"></gov-icon>

                                    </gov-button>
                                </li>
                                <li>
                                    <gov-button color="primary" size="s" type="base" aria-label="Linkedin" target="_blank" rel="noreferrer nofollow" href="#" title="Linkedin">
                                        <gov-icon type="templates" name="linkedin" slot="icon-start" size="s"></gov-icon>

                                    </gov-button>
                                </li>
                                <li>
                                    <gov-button color="primary" size="s" type="base" aria-label="Twitter X" target="_blank" rel="noreferrer nofollow" href="#" title="Twitter X">
                                        <gov-icon type="templates" name="twitter-x" slot="icon-start" size="s"></gov-icon>

                                    </gov-button>
                                </li>
                            </ul>
                        </nav>
                    </gov-flex>
                </li>
            </ul>
            <gov-button color="primary" size="m" type="base" aria-label="Vrátit se na začátek stránky" class=" gov-footer__up js-gov-footer__up">
                <gov-icon type="templates" name="arrow-up" slot="icon-start"></gov-icon>

            </gov-button>
        </gov-flex>
        <gov-grid gap="l" class="gov-footer__logos-group">
            <gov-grid-item col-span="12" col-span-lg="6">
                <section>
                    <h5>Související loga</h5>
                    <ul class="gov-logos gov-list--plain">
                        <li>
                            <a href="https://www.dia.gov.cz/" aria-label="Otevřít stránky DIA" target="_blank" rel="noreferrer nofollow">
                                <svg width="78" height="35" xmlns="http://www.w3.org/2000/svg">
                                    <image href="/assets/logos/logo-dia.svg" width="78" height="35"></image>
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="https://nakit.cz/" aria-label="Otevřít stránky Nakit" target="_blank" rel="noreferrer nofollow">
                                <svg width="118" height="35" xmlns="http://www.w3.org/2000/svg">
                                    <image href="/assets/logos/logo-nakit.svg" width="118" height="35"></image>
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="https://next-generation-eu.europa.eu/index_cs" aria-label="Otevřít stránky Next Generation EU" target="_blank" rel="noreferrer nofollow">
                                <svg width="114" height="32" xmlns="http://www.w3.org/2000/svg">
                                    <image href="/assets/logos/financovano-eu.svg" width="114" height="32"></image>
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.planobnovycr.cz/" aria-label="Otevřít stránky Národní plán obnovy" target="_blank" rel="noreferrer nofollow">
                                <svg width="100" height="35" xmlns="http://www.w3.org/2000/svg">
                                    <image href="/assets/logos/narodni-plan-obnovy.svg" width="100" height="35"></image>
                                </svg>
                            </a>
                        </li>
                    </ul>
                </section>
            </gov-grid-item>
            <gov-grid-item col-span="12" col-span-lg="6">
                <section>
                    <h5>Mobilní aplikace nebo jiná loga</h5>
                    <ul class="gov-logos gov-list--plain">
                        <li>
                            <a href="https://apps.apple.com/us/app/port%C3%A1l-ob%C4%8Dana/id6483367664" title="Přejít na Apple Store" aria-label="Přejít na Apple Store" target="_blank" rel="noreferrer nofollow">
                            </a>
                        </li>
                        <li>
                            <a href="https://play.google.com/store/apps/details?id&#x3D;cz.gov.portal.v2.obcan" title="Přejít na Google Play" aria-label="Přejít na Google Play" target="_blank" rel="noreferrer nofollow">
                            </a>
                        </li>
                    </ul>
                </section>
            </gov-grid-item>
        </gov-grid>
        <gov-flex direction="column" gap="m-nudge">
            <nav aria-label="Odkazy na právní dokumenty">
                <ul class="gov-footer-links gov-list--plain">
                    <li><gov-link href="#" size="s">Link</gov-link></li>
                    <li><gov-link href="#" size="s">Link</gov-link></li>
                    <li><gov-link href="#" size="s">Link</gov-link></li>
                    <li><gov-link href="#" size="s">Link</gov-link></li>
                    <li><gov-link href="#" size="s">Link</gov-link></li>
                </ul>
            </nav>
            <hr>
            <gov-flex class="gov-footer-copy" justify-content="space-between" gap="m">
                <p>2025 &copy; Digitální a informační agentura &bull; Informace jsou poskytovány v souladu se zákonem č. 106/1999 Sb., o svobodném přístupu k informacím.</p>
                <div>
                    <gov-flex class="gov-footer__version" responsive="false">
                        <span>Verze 2.0.2105.9856</span>
                        <span>Využit Design system 4.2</span>
                    </gov-flex>
                </div>
            </gov-flex>

        </gov-flex>
    </gov-flex>
</footer>
 
<footer class="gov-footer">
    <gov-flex class="gov-footer__content" direction="column" justify-content="space-between" gap="3xl">
        <gov-flex responsive="false">
            <ul class="gov-footer__main gov-list--plain">
                {{#each main }}
                <li>
                    <nav aria-labelledby="{{ heading/id }}">
                        {{ render '@heading' heading }}
                        <ul class="gov-list--plain">
                            {{#each link }}
                            <li><gov-link href="#" size="s">{{ this }}</gov-link></li>
                            {{/each}}
                        </ul>
                    </nav>
                </li>
                {{/each}}
                <li>
                    {{ render '@heading' contact }}
                    <gov-flex direction="column" gap="l">
                        {{ render '@footer-contact' }}
                        {{ render '@social' social }}
                    </gov-flex>
                </li>
            </ul>
            {{ render '@button' button-up }}
        </gov-flex>
        <gov-grid gap="l" class="gov-footer__logos-group">
            <gov-grid-item col-span="12" col-span-lg="6">
                {{ render '@footer-logos' }}
            </gov-grid-item>
            <gov-grid-item col-span="12" col-span-lg="6">
                {{ render '@footer-logos' apps }}
            </gov-grid-item>
        </gov-grid>
        <gov-flex direction="column" gap="m-nudge">
            {{ render '@footer-links' }}
            {{ render '@footer-copy' }}
        </gov-flex>
    </gov-flex>
</footer>
 
{
  "main": [
    {
      "heading": {
        "tag": "h5",
        "name": "Title",
        "id": "nav1"
      },
      "link": [
        "Link",
        "Link",
        "Link",
        "Link",
        "Link"
      ]
    },
    {
      "heading": {
        "tag": "h5",
        "name": "Title",
        "id": "nav2"
      },
      "link": [
        "Link",
        "Link",
        "Link",
        "Link",
        "Link"
      ]
    },
    {
      "heading": {
        "tag": "h5",
        "name": "Title",
        "id": "nav3"
      },
      "link": [
        "Link",
        "Link",
        "Link",
        "Link",
        "Link"
      ]
    }
  ],
  "main-short": [
    {
      "heading": {
        "tag": "h5",
        "name": "Title",
        "id": "nav1"
      },
      "link": [
        "Link",
        "Link",
        "Link",
        "Link",
        "Link"
      ]
    },
    {
      "heading": {
        "tag": "h5",
        "name": "Title",
        "id": "nav2"
      },
      "link": [
        "Link",
        "Link",
        "Link",
        "Link",
        "Link"
      ]
    }
  ],
  "description": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Mauris dictum facilisis augue. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam.",
  "contact": {
    "tag": "h5",
    "name": "Title"
  },
  "watch-us": {
    "tag": "h5",
    "name": "Sledujte nás"
  },
  "news": {
    "title": {
      "tag": "h5",
      "name": "Odběr novinek"
    },
    "input": "E-mailová adresa",
    "note": "Odesláním e-mailové adresy souhlasíte se zpracováním podle <a href='#'>ochrany osobních údajů</a>",
    "button": {
      "text": "Odebírat",
      "aria-label": "Odebírat newsletter",
      "color": "primary",
      "type": "solid",
      "size": "m",
      "native-type": "submit"
    }
  },
  "button-up": {
    "classes": [
      "gov-footer__up",
      "js-gov-footer__up"
    ],
    "color": "primary",
    "type": "base",
    "size": "m",
    "aria-label": "Vrátit se na začátek stránky",
    "icon-start": {
      "slot": "icon-start",
      "type": "templates",
      "name": "arrow-up"
    }
  },
  "apps": {
    "heading": {
      "tag": "h5",
      "name": "Mobilní aplikace nebo jiná loga"
    },
    "logos": [
      {
        "src": "/assets/badge/app-store.svg",
        "href": "https://apps.apple.com/us/app/port%C3%A1l-ob%C4%8Dana/id6483367664",
        "title": "Přejít na Apple Store",
        "aria-label": "Přejít na Apple Store",
        "alt": "Stáhnout v App Store",
        "img": {
          "width": "auto",
          "height": "36"
        }
      },
      {
        "src": "/assets/badge/google-play.svg",
        "href": "https://play.google.com/store/apps/details?id=cz.gov.portal.v2.obcan",
        "title": "Přejít na Google Play",
        "aria-label": "Přejít na Google Play",
        "alt": "Stáhnout na Google Play",
        "img": {
          "width": "auto",
          "height": "36"
        }
      }
    ]
  },
  "social": {
    "aria-label": "Odkazy na sociální sítě",
    "social": [
      {
        "color": "primary",
        "type": "base",
        "size": "s",
        "title": "Facebooku",
        "aria-label": "Facebook",
        "href": "#",
        "external": true,
        "icon-start": {
          "slot": "icon-start",
          "type": "templates",
          "name": "facebook",
          "size": "s"
        }
      },
      {
        "color": "primary",
        "type": "base",
        "size": "s",
        "title": "Instagram",
        "aria-label": "Instagram",
        "href": "#",
        "external": true,
        "icon-start": {
          "slot": "icon-start",
          "type": "templates",
          "name": "instagram",
          "size": "s"
        }
      },
      {
        "color": "primary",
        "type": "base",
        "size": "s",
        "title": "Youtube",
        "aria-label": "Youtube",
        "href": "#",
        "external": true,
        "icon-start": {
          "slot": "icon-start",
          "type": "templates",
          "name": "youtube",
          "size": "s"
        }
      },
      {
        "color": "primary",
        "type": "base",
        "size": "s",
        "title": "Linkedin",
        "aria-label": "Linkedin",
        "href": "#",
        "external": true,
        "icon-start": {
          "slot": "icon-start",
          "type": "templates",
          "name": "linkedin",
          "size": "s"
        }
      },
      {
        "color": "primary",
        "type": "base",
        "size": "s",
        "title": "Twitter X",
        "aria-label": "Twitter X",
        "href": "#",
        "external": true,
        "icon-start": {
          "slot": "icon-start",
          "type": "templates",
          "name": "twitter-x",
          "size": "s"
        }
      }
    ]
  }
}
  • Content: 
    import {blockRapidClicks, smoothScrollTo} from "@gov-design-system-ce/utils";

class FooterButtonUp {
    rootElement: Element;

    constructor(rootElement: HTMLButtonElement) {
        this.rootElement = rootElement;
        this.registerListeners();
    }

    private registerListeners() {
        this.rootElement.addEventListener('gov-click', blockRapidClicks(() => this.scrollToTop()));
        this.rootElement.addEventListener('click', blockRapidClicks(() => this.scrollToTop()));
    }

    private scrollToTop() {
        smoothScrollTo(0)
    }
}

export default FooterButtonUp;
  • URL: /components/raw/footer/footer-button-up.ts
  • Filesystem Path: src/components/organisms/footer/footer-button-up.ts
  • Size: 591 Bytes
  • Content: 
    @import "../../../styles/mixins";

.gov-footer {
    padding: var(--spacing-3xl) var(--templates-margin-l);
    background-color: var(--component-footer-background);
    color: var(--component-footer-text-secondary);

    a, a span {
        color: var(--component-footer-text-link) !important;
    }
    gov-link gov-icon,
    .gov-link .gov-icon {
        color: var(--icon-on-bold-white);
    }
    h5 {
        @include typography("headline-s");
        color: var(--component-footer-text-primary);
        margin-bottom: var(--templates-margin-m);
    }
    hr {
        width: 100%;
        border-top: 1px solid var(--component-footer-separator);
    }

    &__content {
        max-width: var(--templates-layout-page-limit-max);
        margin: 0 auto;
        padding: 0;
    }
    &__main {
        width: 100%;
        @include flex($direction: column, $justify: space-between, $gap: var(--spacing-l));
    }
    &__address {
        padding: 0 !important;
        margin: 0 !important;
        @include flex($direction: column, $gap: var(--spacing-s-nudge));
        li {
            color: var(--component-footer-text-secondary);
        }
    }
    .gov-social {
        gov-button, .gov-button {
            background-color: var(--background-white) !important;
            .element {
                color: var(--text-primary-color) !important;
            }
            &:hover {
                background-color: var(--button-outlined-primary-hover) !important;
            }
            &:active {
                background-color: var(--button-outlined-primary-active) !important;
            }
        }
    }
    &__description {
        color: var(--text-white-fixed);
        svg {
            color: var(--icon-on-bold-white);
        }
    }
    &__up {
        background-color: var(--background-white) !important;
        &:hover {
            background-color: var(--button-outlined-primary-hover) !important;
        }
        &:active {
            background-color: var(--button-outlined-primary-active) !important;
        }
    }
    &__newsletter {
        gov-form-message, .gov-form-message {
            color: var(--component-footer-text-secondary);
            a {
                color: var(--component-footer-text-secondary) !important;
            }
        }
    }
    &__version {
        height: auto;
        span {
            @include typography("body-xs");
            white-space: nowrap;

            &:first-child {
                padding-right: var(--spacing-m);
                margin-right: var(--spacing-m);
                border-right: 1px solid var(--component-footer-text-secondary);
            }
        }
    }

    @include mq($from: md) {
        &__main {
            flex-direction: row;
            flex-wrap: wrap;
            gap: var(--templates-margin-l);
            > li {
                width: 224px;
                &:last-child {
                    width: 248px;
                }
                &:has(.gov-footer__description) {
                    width: 368px;
                }
                &:has(.gov-footer__newsletter) {
                    width: 368px;
                }
            }
        }
    }
}
  • URL: /components/raw/footer/footer.scss
  • Filesystem Path: src/components/organisms/footer/footer.scss
  • Size: 3.2 KB

No notes defined.