Gov Design System CE - Templates

Header 

<header class="gov-header">
    <div class="gov-header__divider">
        <div class="gov-header__content">
            <gov-flex justify-content="space-between" align-items="center" responsive="false">
                <a href="/" class="gov-header__logo" aria-label="Zpět na úvodní stránku">
                    <gov-flex align-items="center" gap="s" responsive="false">
                        <svg width="40" height="40" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M29.9996 30.6162V33.9503H28.3332V35.6167H26.6655V40.6172H24.9991V38.9508H23.3328V40.6172H21.6664V37.2831H23.3328V35.6167H24.9991V32.2839H23.3328V27.2834H20V32.2839H9.99914V30.6162H8.33276V28.9498H10.833V27.2834H12.4994V28.9498H14.9996V23.9506H21.6664V22.2829H20V20.6165H14.9996V22.2829H13.3332V20.6165H11.6655V22.2829H8.33276V23.9506H6.66638V22.2829H5V18.9501H6.66638V17.2837H8.33276V18.9501H9.99914V17.2837H13.3332V15.6173H11.6655V13.9497H9.99914V12.2833H6.66638V10.6169H8.33276V7.28407H6.66638V5.61639H9.99914V3.94999H11.6655V5.61639H13.3332V7.28407H11.6655V8.95047H13.3332V10.6169H14.9996V12.2833H16.666V10.6169H18.3323V8.95047H21.6664V7.28407H18.3323V5.61639H20V3.94999H24.9991V5.61639H26.6655V3.94999H28.3332V2.28359H29.9996V10.6169H28.3332V8.95047H26.6655V10.6169H28.3332V12.2833H26.6655V13.9497H24.9991V15.6173H26.6655V17.2837H24.9991V22.2829H26.6655V23.9506H28.3332V25.617H29.9996V23.9506H28.3332V20.6165H29.9996V18.9501H31.666V20.6165H33.3323V22.2829H31.666V25.617H33.3323V27.2834H34.9987V28.9498H31.666V30.6162H29.9996V28.9498H28.3332V27.2834H26.6655V30.6162H29.9996ZM24.9991 2.28359H20V0.617188H24.9991V2.28359ZM14.9996 7.28279H16.666V8.94918H14.9996V7.28279ZM26.6668 20.6165L26.6655 17.2837H28.3319V20.6165H26.6668ZM28.3332 17.2825V12.2833H29.9996V17.2825H28.3332ZM33.3323 20.6165V17.2837H34.9987V20.6165H33.3323ZM31.666 17.2825V12.2833H33.3323V17.2837L31.666 17.2825ZM33.3336 10.6169H35V12.2833H33.3323L33.3336 10.6169ZM33.3323 3.94999H34.9987V8.95047H33.3323L33.3336 10.6169H31.666V2.28359H33.3323V3.94999ZM29.9996 10.6169H31.666V12.2833H29.9996V10.6169ZM23.3328 33.9503V35.6167H21.6664V33.9503H23.3328ZM9.99914 32.2852V33.9516H8.33276V32.2852H9.99914Z" fill="currentColor" />
                        </svg> <span>Název úřadu</span>
                    </gov-flex>
                </a>
                <gov-flex class="gov-header__mobile" align-items="center" gap="s" responsive="false">
                    <gov-button color="primary" size="m" type="base" aria-label="Přihlásit se">
                        <gov-icon type="templates" name="person-fill" slot="icon-start" color="primary" size="m"></gov-icon>

                    </gov-button>
                    <gov-button color="primary" size="m" type="base" aria-label="Otevřít hlavní navigaci" class=" js-gov-header__navigation-trigger">
                        <gov-icon type="templates" name="list" slot="icon-start" color="primary" size="m"></gov-icon>

                    </gov-button>
                </gov-flex>
            </gov-flex>
            <form role="search" id="search" class="gov-search gov-search--fixed-width">
                <gov-form-control>
                    <gov-form-search size="m" color="neutral" aria-autocomplete="list" aria-haspopup="menu" aria-controls="suggestions" aria-expanded="true">
                        <gov-form-input slot="input" size="m" placeholder="Hledejte v názvu, obsahu..." aria-label="Vyhledávání v obsahu webu" input-type="search">
                            <gov-icon type="templates" name="search" slot="icon-start"></gov-icon>
                        </gov-form-input>
                        <gov-button color="neutral" size="s" type="base" aria-label="Odstranit zadaný výraz" slot="button">
                            <gov-icon type="templates" name="x" slot="icon-start"></gov-icon>

                        </gov-button>
                        <gov-button color="primary" size="s" type="solid" aria-label="Vyhledat zadaný výraz" native-type="submit" slot="button">
                            <gov-icon type="templates" name="search" slot="icon-start"></gov-icon>

                        </gov-button>
                    </gov-form-search>
                </gov-form-control>
            </form>
            <gov-flex class="gov-header__action" justify-content="space-between" align-items="center" gap="m">
                <gov-button color="primary" size="m" type="solid" aria-label="Přihlášení do klientské zóny">
                    Přihlásit se

                </gov-button>
                <gov-button color="primary" size="m" type="base" aria-label="Click to change language to English">
                    <gov-icon type="templates" name="flag" slot="icon-start"></gov-icon>
                    English

                </gov-button>
                <gov-theme-switch size="m" aria-label="Přepínač barevného schématu stránky"></gov-theme-switch>
            </gov-flex>
        </div>
    </div>
    <div class="gov-header__navigation js-gov-header__navigation">
        <nav class="gov-navigation" aria-label="Hlavní navigace" id="main-navigation">
            <ul>
                <li class="gov-navigation--has-megamenu">
                    <gov-button type="base" color="primary" size="l" aria-expanded="false" aria-controls="subnav0" aria-label="Úřad">
                        Úřad
                        <gov-icon slot="icon-end" type="templates" name="chevron-down" size="l"></gov-icon>
                    </gov-button>
                    <ul class="gov-mega-menu" id="megamenu0" hidden aria-hidden="true">
                        <li class="gov-mega-menu__heading">
                            <a href="#">
                                <span>
                                    <gov-icon type="templates" name="briefcase" size="m"></gov-icon>
                                    Heading item
                                </span>
                            </a>
                            <ul>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li class="gov-mega-menu__more"><a href="#">+ Další</a></li>
                            </ul>
                        </li>
                        <li class="gov-mega-menu__heading">
                            <a href="#">
                                <span>
                                    <gov-icon type="templates" name="briefcase" size="m"></gov-icon>
                                    Heading item
                                </span>
                            </a>
                            <ul>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li class="gov-mega-menu__more"><a href="#">+ Další</a></li>
                            </ul>
                        </li>
                        <li class="gov-mega-menu__heading">
                            <a href="#">
                                <span>
                                    <gov-icon type="templates" name="briefcase" size="m"></gov-icon>
                                    Heading item
                                </span>
                            </a>
                            <ul>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                            </ul>
                        </li>
                        <li class="gov-mega-menu__heading">
                            <a href="#">
                                <span>
                                    <gov-icon type="templates" name="briefcase" size="m"></gov-icon>
                                    Heading item
                                </span>
                            </a>
                            <ul>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li class="gov-mega-menu__more"><a href="#">+ Další</a></li>
                            </ul>
                        </li>
                        <li class="gov-mega-menu__heading">
                            <a href="#">
                                <span>
                                    <gov-icon type="templates" name="briefcase" size="m"></gov-icon>
                                    Heading item
                                </span>
                            </a>
                            <ul>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li class="gov-mega-menu__more"><a href="#">+ Další</a></li>
                            </ul>
                        </li>
                        <li class="gov-mega-menu__heading">
                            <a href="#">
                                <span>
                                    <gov-icon type="templates" name="briefcase" size="m"></gov-icon>
                                    Heading item
                                </span>
                            </a>
                            <ul>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                            </ul>
                        </li>
                        <li class="gov-mega-menu__heading">
                            <a href="#">
                                <span>
                                    <gov-icon type="templates" name="briefcase" size="m"></gov-icon>
                                    Heading item
                                </span>
                            </a>
                            <ul>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                            </ul>
                        </li>
                        <li class="gov-mega-menu__heading">
                            <a href="#">
                                <span>
                                    <gov-icon type="templates" name="briefcase" size="m"></gov-icon>
                                    Heading item
                                </span>
                            </a>
                            <ul>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Menu item</a>
                </li>
                <li>
                    <a href="#">Menu item</a>
                </li>
                <li>
                    <a href="#">Menu item</a>
                </li>
                <li>
                    <gov-button type="base" color="primary" size="l" aria-expanded="false" aria-controls="subnav4" aria-label="Tisk a média">
                        Tisk a média
                        <gov-icon slot="icon-end" type="templates" name="chevron-down" size="l"></gov-icon>
                    </gov-button>
                    <ul class="gov-subnavigation" id="subnav4" hidden aria-hidden="true">
                        <li><a href="#">Menu item</a></li>
                        <li><a href="#">Menu item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Kontakty</a>
                </li>
                <li class="gov-mobile-only">
                    <gov-button color="primary" size="l" type="base" aria-label="Click to change language to English">
                        English

                    </gov-button>
                </li>
                <li class="gov-navigation__item gov-mobile-only">
                    <gov-theme-switch size="m" display-label="true"></gov-theme-switch>
                </li>
            </ul>
        </nav>
    </div>
</header>
 
<header class="gov-header">
    <div class="gov-header__divider">
        <div class="gov-header__content">
            {{ render '@header-left' }}
            {{ render '@search' search merge=true }}
            <gov-flex class="gov-header__action" justify-content="space-between" align-items="center" gap="m">
                {{#each button}}
                    {{ render '@button' this }}
                {{/each}}
                <gov-theme-switch size="m" aria-label="{{ theme/aria-label }}"></gov-theme-switch>
            </gov-flex>
        </div>
    </div>
    <div class="gov-header__navigation js-gov-header__navigation">
        {{ render '@main-navigation' merge=true }}
    </div>
    {{#if suggestions}}
    <div class="gov-mobile-only">
        {{ render '@suggestions' this merge=true }}
    </div>
    {{/if}}
</header>
 
{
  "search": {
    "classes": [
      "gov-search--fixed-width"
    ]
  },
  "theme": {
    "aria-label": "Přepínač barevného schématu stránky"
  },
  "button": [
    {
      "text": "Přihlásit se",
      "color": "primary",
      "type": "solid",
      "size": "m",
      "aria-label": "Přihlášení do klientské zóny"
    },
    {
      "text": "English",
      "color": "primary",
      "type": "base",
      "size": "m",
      "aria-label": "Click to change language to English",
      "icon-start": {
        "slot": "icon-start",
        "type": "templates",
        "name": "flag"
      }
    }
  ],
  "button-nav-small": [
    {
      "color": "primary",
      "type": "base",
      "size": "m",
      "aria-label": "Vyhledat na webu",
      "icon-start": {
        "slot": "icon-start",
        "type": "templates",
        "name": "search"
      }
    },
    {
      "text": "Přihlásit se",
      "color": "primary",
      "type": "solid",
      "size": "m",
      "aria-label": "Přihlášení do klientské zóny"
    }
  ],
  "dropdown": {
    "button": {
      "text": "CZ",
      "color": "primary",
      "type": "base",
      "size": "m",
      "aria-label": "Selecting the language of the page",
      "icon-end": {
        "slot": "icon-end",
        "type": "templates",
        "name": "chevron-down"
      }
    },
    "list": [
      {
        "text": "CZ",
        "color": "primary",
        "type": "base",
        "size": "m",
        "expanded": true,
        "role": "menuitem"
      },
      {
        "text": "EN",
        "color": "primary",
        "type": "base",
        "size": "m",
        "expanded": true,
        "role": "menuitem"
      }
    ]
  },
  "searchbar": {
    "button": {
      "color": "neutral",
      "type": "base",
      "size": "l",
      "aria-label": "Zavřít vyhledávání",
      "icon-start": {
        "slot": "icon-start",
        "type": "templates",
        "name": "x-lg"
      }
    }
  },
  "lang": {
    "text": "English",
    "color": "primary",
    "type": "base",
    "size": "l",
    "aria-label": "Click to change language to English"
  },
  "aria-label": "Hlavní navigace",
  "nav-small": [
    {
      "button": "Úřad",
      "megamenu": [
        {
          "heading": "Heading item",
          "link": [
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            }
          ],
          "more": "+ Další"
        },
        {
          "heading": "Heading item",
          "link": [
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            }
          ],
          "more": "+ Další"
        },
        {
          "heading": "Heading item",
          "link": [
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            }
          ]
        },
        {
          "heading": "Heading item",
          "link": [
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            }
          ],
          "more": "+ Další"
        },
        {
          "heading": "Heading item",
          "link": [
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            }
          ],
          "more": "+ Další"
        },
        {
          "heading": "Heading item",
          "link": [
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            }
          ]
        },
        {
          "heading": "Heading item",
          "link": [
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            }
          ]
        },
        {
          "heading": "Heading item",
          "link": [
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            },
            {
              "name": "Menu item"
            }
          ]
        }
      ]
    },
    {
      "button": "Tisk a média",
      "subnav": [
        {
          "name": "Menu item"
        },
        {
          "name": "Menu item"
        }
      ]
    },
    {
      "text": "Kontakty",
      "href": "#"
    }
  ]
}
  • Content: 
    @import "../../../styles/mixins";

$class: ".gov-header";

#{$class} {
    & {
        background-color: var(--component-nav-background);
    }

    &__content {
        @include flex($direction: column, $gap: var(--templates-margin-m));
        padding: var(--templates-margin-l);
    }
    &__navigation {
        position: relative;
        z-index: 10;
        padding: var(--templates-margin-s) 0;
        border-top: 1px solid var(--border-primary);
    }
    &__logo {
        color: var(--icon-on-subtle);
        @include typography("body-m");
        text-decoration: none;
    }
    &__action {
        display: none;
    }
    &__search-bar {
        display: none !important;
        position: absolute !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        background-color: var(--component-nav-background);
        > * {
            width: 100%;
            padding: var(--templates-margin-l) 0;
        }
    }
    .gov-logo {
        color: var(--icon-on-subtle);
    }

    @include mq($from: md) {
        &__content {
            @include flex($direction: row, $justify: space-between, $align: center);
            max-width: var(--templates-layout-page-limit-max);
            margin: 0 auto;
            padding: 0 var(--templates-margin-l);
        }
        &__divider {
            padding: var(--templates-margin-m) 0;
            border-bottom: 1px solid var(--component-nav-separator);
        }
        &__navigation {
            max-width: var(--templates-layout-page-limit-max);
            margin: 0 auto;
            padding: var(--templates-margin-s) 0;
            border: none;
        }
        &__logo {
            @include typography("body-l");
        }
        &__action {
            display: flex;
        }
        &__search-bar {
            .gov-search {
                width: rem-calc(500);
            }
        }
        &__mobile {
            display: none;
        }
    }

    // VARIANTS
    &--small {
        #{$class}__content {
            position: relative;
            z-index: 10;
            padding: 0;
            gap: 0;
            > #{$class}__navigation {
                position: static;
            }
        }
        #{$class}__left {
            padding: var(--templates-margin-l);
        }

        @include mq($from: md) {
            padding: var(--templates-margin-m) 0;
            #{$class}__content {
                padding: 0 var(--templates-margin-l);
                gap: var(--templates-margin-l);
            }
            #{$class}__left {
                padding: 0;
            }
            #{$class}__navigation {
                max-width: none;
                margin: 0 auto 0 0;
            }
        }
    }
}
  • URL: /components/raw/header/header.scss
  • Filesystem Path: src/components/organisms/header/header.scss
  • Size: 2.7 KB

No notes defined.