Header

Prototype

HTML
View
Context
Assets
Info
Notes


        
        <div class="kx-page__header kx-flex">
    <header class="kx-header kx-flex kx-align-items-center" role="banner">
        <button class="kx-btn kx-hamburger kx-hamburger--spin kx-header__nav-toggle kx-js-header__nav-toggle">
    <span class="kx-hamburger__inner">
        <span class="kx-hamburger__icon"></span>
    </span>
    <span class="kx-hamburger__txt kx-is-vishidden">Menu</span>
</button>
        <a class="kx-header__title" href="#">
            My Company
        </a>
        <div class="kx-header__tools">
            <!-- BUTTON-GROUP Component -->
            <div class="kx-btngroup kx-flex kx-flex-wrap kx-btngroup--fit-tight kx-ui" role="group" aria-label="Tools and settings">
                <!-- DROPDOWN Component -->
                <div class="kx-dropdown" role="group">
                    <button id="--78875" class="kx-dropdown__toggle kx-btn kx-btn--size-base kx-btn--icon kx-js-dropdown__toggle" aria-haspopup="true" aria-expanded="false">
        <span class="kx-btn__inner">
                <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#user"></use>
    </svg>
</i>
                <span class="kx-btn__txt kx-is-vishidden">User</span>
                </span>
    </button>
                    <div class="kx-dropdown__menu kx-dropdown__menu--align-right kx-js-dropdown__menu" aria-labelledby="--78875">
                        <ul class="kx-dropdown__list">
                            <li class="kx-dropdown__item">
                                <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">My profile</span>
                            </a>
                            </li>
                            <li class="kx-dropdown__item">
                                <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Notification settings</span>
                            </a>
                            </li>
                            <li class="kx-dropdown__item">
                                <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Security</span>
                            </a>
                            </li>
                            <li class="kx-dropdown__item">
                                <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Usage</span>
                            </a>
                            </li>
                            <li class="kx-divider kx-divider--size-mini" aria-hidden="true" tabindex="-1"></li>
                            <li class="kx-dropdown__item">
                                <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Logout</span>
                            </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- DROPDOWN Component -->
                <div class="kx-dropdown" role="group">
                    <button id="--5921" class="kx-dropdown__toggle kx-btn kx-btn--size-base kx-btn--icon kx-js-dropdown__toggle" aria-haspopup="true" aria-expanded="false">
        <span class="kx-btn__inner">
                <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#cog"></use>
    </svg>
</i>
                <span class="kx-btn__txt kx-is-vishidden">Settings</span>
                </span>
    </button>
                    <div class="kx-dropdown__menu kx-dropdown__menu--align-right kx-js-dropdown__menu" aria-labelledby="--5921">
                        <ul class="kx-dropdown__list">
                            <li class="kx-dropdown__item">
                                <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Menu Editor</span>
                            </a>
                            </li>
                            <li class="kx-dropdown__item">
                                <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Unit of Measure</span>
                            </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- DROPDOWN Component -->
                <div class="kx-dropdown" role="group">
                    <button id="--16894" class="kx-dropdown__toggle kx-btn kx-btn--size-base kx-js-dropdown__toggle" aria-haspopup="true" aria-expanded="false">
        <span class="kx-btn__inner">
                <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#dots-horizontal"></use>
    </svg>
</i>
                <span class="kx-btn__txt">More</span>
                </span>
    </button>
                    <div class="kx-dropdown__menu kx-dropdown__menu--align-right kx-js-dropdown__menu" aria-labelledby="--16894">
                        <ul class="kx-dropdown__list">
                            <li class="kx-dropdown__item">
                                <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Support</span>
                            </a>
                            </li>
                            <li class="kx-dropdown__item">
                                <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Give feedback</span>
                            </a>
                            </li>
                            <li class="kx-dropdown__item">
                                <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Community</span>
                            </a>
                            </li>
                            <li class="kx-dropdown__item">
                                <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Privacy policy</span>
                            </a>
                            </li>
                            <li class="kx-dropdown__item">
                                <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">About Kognifai</span>
                            </a>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </header>
</div>


        <div class="kx-page__header kx-flex">
    <header class="kx-header kx-flex kx-align-items-center" role="banner">
        {% render '@hamburger', menuBtn %}
        {% if logo.mark or logo.type -%}
        <a class="kx-header__logo" href="#">
            {% if logo.mark -%}
            <img src="{{ componentPath + logo.mark }}" alt="{% if logo.alt %}{{ logo.alt }}{% endif %}">
            {% endif -%}
            {% if logo.type -%}
            <img src="{{ componentPath + logo.type }}" alt="{% if logo.alt %}{{ logo.alt }}{% endif %}">
            {% endif -%}
        </a>
        {% endif -%}
        {% if title -%}
        <a class="kx-header__title" href="#">
            {{ title }}
        </a>
        {% endif -%}
        <div class="kx-header__tools">
            {% render '@button-group', tools %}
        </div>
    </header>
</div>


        
            
            {
  "logo": null,
  "title": null,
  "componentPath": "../../../components/raw/header/",
  "menuBtn": {
    "text": "Menu",
    "hideText": true,
    "classes": [
      "kx-header__nav-toggle",
      "kx-js-header__nav-toggle"
    ]
  },
  "tools": {
    "ariaLabel": "Tools and settings",
    "fit": [
      "tight"
    ],
    "classes": [
      "kx-ui"
    ],
    "buttons": [
      {
        "context": {
          "text": "User",
          "skin": null,
          "size": "base",
          "hideText": true,
          "icon": {
            "symbol": "user",
            "size": "base"
          },
          "items": [
            {
              "text": "My profile",
              "href": "#"
            },
            {
              "text": "Notification settings",
              "href": "#"
            },
            {
              "text": "Security",
              "href": "#"
            },
            {
              "text": "Usage",
              "href": "#"
            },
            {
              "divider": true
            },
            {
              "text": "Logout",
              "href": "#"
            }
          ],
          "caret": null,
          "menuAlignment": "right"
        }
      },
      {
        "context": {
          "text": "Settings",
          "skin": null,
          "size": "base",
          "hideText": true,
          "icon": {
            "symbol": "cog",
            "size": "base"
          },
          "items": [
            {
              "text": "Menu Editor",
              "href": "#"
            },
            {
              "text": "Unit of Measure",
              "href": "#"
            }
          ],
          "caret": null,
          "menuAlignment": "right"
        }
      },
      {
        "context": {
          "text": "More",
          "skin": null,
          "size": "base",
          "icon": {
            "symbol": "dots-horizontal",
            "size": "base"
          },
          "items": [
            {
              "text": "Support",
              "href": "#"
            },
            {
              "text": "Give feedback",
              "href": "#"
            },
            {
              "text": "Community",
              "href": "#"
            },
            {
              "text": "Privacy policy",
              "href": "#"
            },
            {
              "text": "About Kognifai",
              "href": "#"
            }
          ],
          "caret": null,
          "menuAlignment": "right"
        }
      }
    ]
  }
}

File:

Content:


                                // ==========================================================================
// Component: header
// ==========================================================================

// Elements (children)
// ==========================================================================

.kx-header__nav-toggle {
    background-color: $color-header-navtoggle-bg;
    color: $color-header-navtoggle;

    &:focus {
        box-shadow: none;
    }

    &:hover,
    &:focus {
        color: $color-gray-01;
    }

    @include mq($until: tab-m) {
        padding: rem-calc(12 14 12 14);
    }
}

.kx-header__logo {
    width: auto;
    height: rem-calc(24);
    color: $color-header-logo;

    svg {
        height: 100%;
        width: auto;
        fill: currentColor;
    }

    img {
        width: auto;
        height: 100%;
        max-width: none;
    }

    + .kx-header__title {
        @include ml(mini);
    }

    [dir='ltr'] & {
        @include ml(small);

        + .kx-header__title {
            @include ml(mini);
        }
    }

    [dir='rtl'] & {
        @include mr(small);

        + .kx-header__title {
            @include mr(mini);
        }
    }

    @include mq($from: tab-m) {
        [dir='ltr'] & {
            @include ml(base);
        }

        [dir='rtl'] & {
            @include mr(base);
        }
    }
}

.kx-header__title {
    @include ml(base);
    @include type-weight(extra-bold);
    color: $color-header-title-txt;
    text-decoration: none;

    &:hover {
        color: $color-header-title-txt-hover;
    }

    @include mq($until: tab-m) {
        @include ml(small);
        @include type-scale(small);
        line-height: 0.9231;
    }
}

.kx-header__tools {
    margin-left: auto;
    height: 100%;

    .kx-btn {
        color: inherit;

        svg {
            fill: $color-header-icon;
        }

        &:hover,
        &:focus,
        &.kx-dropdown--show {
            background-color: $color-header-navtoggle-bg;
            color: $color-header-icon-hover;

            svg {
                fill: $color-header-icon-hover;
            }
        }

        &:focus {
            box-shadow: none;
        }
    }

    .kx-btn--icon {
        + .kx-btn--icon {
            margin-left: 0 !important;
        }

        .kx-icon {
            margin-left: rem-calc(13) !important;
            margin-right: rem-calc(13) !important;
        }

        @include mq($until: tab-m) {
            width: $header-height-small;
        }

        @include mq($from: tab-m) {
            width: $header-height-wide;
        }
    }

    .kx-dropdown__menu {
        margin-top: 0;
    }

    .kx-btngroup {
        @include align-items-stretch;
        height: 100%;
    }
}

// Block (parent)
// ==========================================================================
.kx-header {
    background-color: $color-header-bg;
    color: $color-header-txt;
}

// Modifiers
// ==========================================================================

URL: /components/raw/header/_header.scss
Filesystem Path: src\components\01-header\_header.scss
Size: 3.2 KB

Content:


                                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 278 278">
<title>kognifai logo</title>
<g>
	<g>
		<path fill="#FFFFFF" d="M110.5,156c-26,0-34.6,8.7-34.6,23.8c0,13,6.5,21.6,26,21.6c23.8,0,34.6-17.3,34.6-32.5v-8.7l-2.2-2.2
			C134.3,158.2,123.5,156,110.5,156z"/>
		<path fill="#FFFFFF" d="M0,0v278h278V0H0z M149.5,207.9l-2.2,2.2h-6.5l-2.2-2.2l-2.2-10.8h-2.2c-4.3,6.5-13,15.1-34.6,15.1
			c-23.8,0-36.8-13-36.8-32.5c0-23.8,17.3-34.6,45.4-34.6c8.7,0.1,17.4,0.8,26,2.2l2.2-2.2v-6.5c0-19.5-6.5-28.1-28.1-28.1
			s-28.1,10.8-28.1,21.6l-2.2,2.2h-8.7l-2.2-2.2c0-17.3,13-32.5,41.1-32.5c32.5,0,41.1,15.1,41.1,39v69.3L149.5,207.9z M200.3,207.9
			l-2.2,2.2h-8.7l-2.2-2.2V104.1l2.2-2.2h8.7l2.2,2.2V207.9z M200.3,82.4l-2.2,2.2h-8.7l-2.2-2.2v-13l2.2-2.2h8.7l2.2,2.2
			L200.3,82.4z"/>
	</g>
</g>
</svg>

URL: /components/raw/header/logomark-kognifai-neg.svg
Filesystem Path: src\components\01-header\logomark-kognifai-neg.svg
Size: 834 Bytes

Content:
URL: /components/raw/header/logomark-sitecom-dv.png
Filesystem Path: src\components\01-header\logomark-sitecom-dv.png
Size: 2.3 KB

Content:


                                <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 951.8 278">
  <title>kognifai logo</title>
  <g>
    <g>
      <path d="M784.3,156c-26,0-34.6,8.7-34.6,23.8,0,13,6.5,21.6,26,21.6,23.8,0,34.6-17.3,34.6-32.5v-8.7l-2.2-2.2C808.1,158.2,797.3,156,784.3,156Z" fill="#fff"/>
      <path d="M673.8,0V278h278V0ZM823.3,207.9l-2.2,2.2h-6.5l-2.2-2.2-2.2-10.8H808c-4.3,6.5-13,15.1-34.6,15.1-23.8,0-36.8-13-36.8-32.5,0-23.8,17.3-34.6,45.4-34.6a178.27,178.27,0,0,1,26,2.2l2.2-2.2v-6.5c0-19.5-6.5-28.1-28.1-28.1S754,121.3,754,132.1l-2.2,2.2h-8.7l-2.2-2.2c0-17.3,13-32.5,41.1-32.5,32.5,0,41.1,15.1,41.1,39v69.3Zm50.8,0-2.2,2.2h-8.7l-2.2-2.2V104.1l2.2-2.2h8.7l2.2,2.2Zm0-125.5-2.2,2.2h-8.7L861,82.4v-13l2.2-2.2h8.7l2.2,2.2Z" fill="#fff"/>
    </g>
    <g>
      <path d="M86.6,212.3H77.9l-4.3-2.2L41.1,169H38.9L23.8,184.1l-2.2,4.3V210l-2.2,2.2H2.2L0,210V63l2.2-2.2H19.5L21.7,63v93.1h2.2l49.8-49.8,4.3-2.2h6.5l2.2,2.2v15.1L56.4,151.7v2.2L88.9,195v15.2Z" fill="#fff"/>
      <path d="M165.6,101.9c32.5,0,51.9,21.6,51.9,56.3s-19.5,56.3-51.9,56.3-51.9-21.6-51.9-56.3S133.1,101.9,165.6,101.9Zm0,93.1c19.5,0,30.3-13,30.3-36.8s-10.8-36.8-30.3-36.8-30.3,13-30.3,36.8S146.1,195,165.6,195Z" fill="#fff"/>
      <path d="M322.5,201.5h-2.2s-8.7,13-28.1,13c-30.3,0-47.6-23.8-47.6-56.3s17.3-56.3,47.6-56.3c19.5,0,28.1,13,28.1,13h2.2l2.2-8.7,2.2-2.2H342l2.2,2.2v93.1c0,43.3-23.8,58.4-49.8,58.4s-41.1-13-43.3-30.3l2.2-2.2h17.3l2.2,2.2c4.3,8.7,10.8,10.8,21.6,10.8C313.8,238.3,322.5,225.3,322.5,201.5Zm-28.2-80.1c-17.3,0-28.1,13-28.1,36.8S277,195,294.3,195s28.1-10.8,28.1-36.8S311.7,121.4,294.3,121.4Z" fill="#fff"/>
      <path d="M475,212.3H457.7l-2.2-2.2V147.3c0-10.8-2.2-26-21.6-26s-28.1,10.8-28.1,36.8V210l-2.2,2.2H386.3l-2.2-2.2V106.3l2.2-2.2h15.1l2.2,2.2,2.2,8.7H408s8.7-13,28.1-13c30.3,0,41.1,19.5,41.1,45.4v62.8Z" fill="#fff"/>
      <path d="M534.5,86.8H517.2L515,84.6V67.3l2.2-2.2h17.3l2.2,2.2V84.6Zm0,125.5H517.2l-2.2-2.2V106.3l2.2-2.2h17.3l2.2,2.2V210.2Z" fill="#fff"/>
      <path d="M635.1,123.6H613.5l-2.2,2.2v84.4l-2.2,2.2H591.8l-2.2-2.2V125.8l-2.2-2.2H572.3l-2.2-2.2V106.3l2.2-2.2h15.1l2.2-2.2V93.2c0-19.5,15.1-28.1,30.3-28.1h17.3l2.2,2.2V82.4l-2.2,2.2H619.9c-4.3,0-8.7,2.2-8.7,8.7V102l2.2,2.2H635l2.2,2.2v15.1Z" fill="#fff"/>
    </g>
  </g>
</svg>

URL: /components/raw/header/logotype-kognifai-neg.svg
Filesystem Path: src\components\01-header\logotype-kognifai-neg.svg
Size: 2.3 KB

Content:
URL: /components/raw/header/logotype-sitecom-dv.png
Filesystem Path: src\components\01-header\logotype-sitecom-dv.png
Size: 4.6 KB

Handle: @header
Variants (5): Text as logo , Kognifai Logotype , Custom Logotype , Kognifai Logomark + text , Custom Logomark + text
Preview:
- With layout
- Component only
Filesystem Path: src\components\01-header\header.njk
References (2): @hamburger, @button-group
Referenced by (1): @page

Logos in the header

If you’d like to use a custom logo, please make sure it is an image that has a transparent background. This will look better agains the dark header.

In this example we clearly see that the logofile is an opaquq image with white background. It looks suboptimal on the dark header.

Instead use a 24-bit PNG format or SVG. Transparent GIFs may also work, but since the maximum number of colors in this filetype, be sure to export it against a matte color that matches the header background (#1a293e).

As an alternative, if you don’t have a high quality logotype, you can use a logomark instead. Combine the logomark with a text-based title.

What is the difference between a logo, logomark and logotype

Header

Logos in the header

Code

Layout

Utilities

Forms

Fieldset

Input

Button

Field

Label

Legend

Switch

Switch Group