Header: Custom Logomark + text 

<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__logo" href="#">
            <img src="../../../components/raw/header/logomark-sitecom-dv.png" alt="SiteCom logo">
            </a>
        <a class="kx-header__title" href="#">
            SiteCom Viewer
        </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="--85854" 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="--85854">
                        <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="--56936" 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="--56936">
                        <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="--46615" 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="--46615">
                        <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": {
    "mark": "logomark-sitecom-dv.png",
    "type": null,
    "alt": "SiteCom logo"
  },
  "title": "SiteCom Viewer",
  "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"
        }
      }
    ]
  }
}
  • 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: 
    <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

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