Gov Design System CE - Templates

Footer: Simple 

<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-flex direction="column" gap="m-nudge">
            <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-flex direction="column" gap="m-nudge">
            {{ 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.