Footer: Newsletter

Ready

HTML
View
Context
Assets
Info
Notes


        
        <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>
                    <h5>Title</h5>
                    <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>
                </li>
                <li>
                    <gov-flex direction="column" gap="l">
                        <div>
                            <h5>Sledujte nás</h5>
                            <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>
                        </div>
                        <div class="gov-footer__newsletter">
                            <h5>Odběr novinek</h5>
                            <gov-flex gap="s">
                                <gov-form-control>
                                    <gov-form-input size="m" input-type="email" name="newsletter" placeholder="E-mailová adresa"></gov-form-input>
                                    <gov-form-message slot="bottom" size="m">Odesláním e-mailové adresy souhlasíte se zpracováním podle <a href='#'>ochrany osobních údajů</a></gov-form-message>
                                </gov-form-control>
                                <gov-button color="primary" size="m" type="solid" aria-label="Odebírat newsletter" native-type="submit">
                                    Odebírat

                                </gov-button>
                            </gov-flex>
                        </div>
                    </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-short }}
                    <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 }}
                    {{ render '@footer-contact' }}
                </li>
                <li>
                    <gov-flex direction="column" gap="l">
                        <div>
                            {{ render '@heading' watch-us }}
                            {{ render '@social' social }}
                        </div>
                        <div class="gov-footer__newsletter">
                            {{ render '@heading' news/title }}
                            <gov-flex gap="s">
                                <gov-form-control>
                                    <gov-form-input size="m" input-type="email" name="newsletter" placeholder="{{ news/input }}"></gov-form-input>
                                    <gov-form-message slot="bottom" size="m">{{{ news/note }}}</gov-form-message>
                                </gov-form-control>
                                {{ render '@button' news/button }}
                            </gov-flex>
                        </div>
                    </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"
        }
      }
    ]
  }
}

File:

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

Handle: @footer--newsletter
Variants (4): Default , Description , Newsletter , Simple
Preview:
- With layout
- Component only
Filesystem Path: src/components/organisms/footer/footer--newsletter.hbs
References (5): @heading, @footer-contact, @social, @button, @footer-copy

No notes defined.