doc-msp-theme 0.1.0

data/_sass/_grid.scss

@@ -0,0 +1,314 @@
+//
+// Grid
+// ----------------------------------------
+
+// grid mixins/functions
+
+@mixin init-grid() {
+
+  .container-liquid,
+  .container-fixed {
+    padding-left: $grid-column-padding;
+    padding-right: $grid-column-padding;
+
+    @include clearfix();
+  }
+
+  .container-fixed {
+
+    &.left {
+      margin-left: 0;
+      margin-right: auto;
+      float: left;
+    }
+
+    &,
+    &.center {
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    &.right {
+      margin-left: auto;
+      margin-right: 0;
+      float: right;
+    }
+
+    @include container-fixed();
+  }
+
+  .row {
+    margin-left: $grid-column-padding * -1;
+    margin-right: $grid-column-padding * -1;
+    @include clearfix();
+  }
+
+  %column-standard-settings {
+    padding-left: $grid-column-padding;
+    padding-right: $grid-column-padding;
+    position: relative;
+    float: left;
+    min-height: 1px; // Prevents empty columns from collapsing
+  }
+
+  @for $size-index from 1 through length($grid-settings) {
+
+    $size-settings: nth($grid-settings, $size-index);
+    $screen-size: nth($size-settings, 1);
+    $size-name: map-get($grid-screen-sizes, $screen-size);
+    $size-min: nth($size-settings, 2);
+    $size-max: nth($size-settings, 3);
+
+    $column-name: #{$grid-column-prefix}#{$size-name};
+
+    // shared column settings
+    @for $column-outer-idx from 1 through $grid-number-of-columns {
+      .#{$column-name}-#{$column-outer-idx} {
+        @extend %column-standard-settings;
+      }
+    }
+
+    // column widths ( -> nested widths)
+    @if $size-min {
+      @if $size-max {
+        @media screen and (min-width: #{$size-min}px) and (max-width: #{$size-max}px) {
+          @include create-columns($size-settings);
+        }
+      } @else {
+        @media screen and (min-width: #{$size-min}px) {
+          @include create-columns($size-settings);
+        }
+      }
+    } @else {
+      @if $size-max {
+        @media screen and (max-width: #{$size-max}px) {
+          @include create-columns($size-settings);
+        }
+      } @else {
+        @include create-columns($size-settings);
+      }
+    }
+
+  }
+}
+
+@mixin grid-debug() {
+
+  .grid-debug {
+
+    &.row,
+    .row {
+      background: url('../images/blackAlpha10.png');
+      background: rgba(0, 100, 0, .05);
+    }
+
+    &.container-fixed,
+    .container-fixed {
+      .row {
+        background: rgba(100, 0, 0, .05);
+      }
+    }
+
+    %debug-col-settings {
+      background: url('../images/greenAlpha10.png');
+      background: rgba(0, 128, 0, .1);
+      outline: 1px inset #ccc;
+      outline: 1px inset rgba(0, 0, 0, .1);
+      outline-offset: -1px;
+
+      &:before,
+        &:after {
+        content: ' ';
+        display: block;
+        width: $grid-column-padding;
+        height: 100%;
+        background: url('../images/greenAlpha50.png');
+        background: rgba(0, 255, 0, .5);
+        position: absolute;
+        top: 0;
+      }
+
+      &:before {
+        left: 0;
+      }
+
+      &:after {
+        right: 0;
+      }
+    }
+
+    %debug-col-settings-fixed {
+      background: url('../images/magentaAlpha10.png');
+      background: rgba(128, 0, 64, .2);
+
+      &:before,
+        &:after {
+        background: url('../images/magentaAlpha50.png');
+        background: rgba(255, 0, 128, .5);
+      }
+    }
+  }
+
+  @each $size, $size-name in $grid-screen-sizes {
+
+    $size-name: #{$grid-column-prefix}#{$size-name};
+
+    @for $i from 1 through $grid-number-of-columns {
+      .#{$size-name}-#{$i} {
+        @extend %debug-col-settings;
+      }
+
+      .grid-debug .container-fixed,
+      .container-fixed.grid-debug {
+        .#{$size-name}-#{$i} {
+          @extend %debug-col-settings-fixed;
+        }
+      }
+    }
+  }
+
+}
+
+@mixin create-columns($size-settings) {
+
+  // first level columns' widths & offsets;
+  $screen-size: nth($size-settings, 1);
+  $size-name: map-get($grid-screen-sizes, $screen-size);
+
+  // widths
+  $column-name: #{$grid-column-prefix}#{$size-name};
+
+  @for $column-outer-idx from 1 through $grid-number-of-columns {
+    .#{$column-name}-#{$column-outer-idx} {
+      width: percentage($column-outer-idx / $grid-number-of-columns) + .00001; // + .00001 to fix rounding error in safari for col-*-1 at 768
+    }
+  }
+
+  // offset
+  @if $compile-grid-offsets {
+
+    $offset-name: offset-#{$size-name};
+    $grid-number-of-offsets: $grid-number-of-columns - 1;
+
+    @for $column-offset-idx from 0 through $grid-number-of-offsets {
+      .#{$offset-name}-#{$column-offset-idx} {
+        @if $column-offset-idx == 0 {
+          margin-left: 0;
+        } @else {
+          margin-left: percentage($column-offset-idx / $grid-number-of-columns);
+        }
+      }
+    }
+  }
+}
+
+@mixin create-emphased-classes($grid-settings) {
+  // manual default values ...
+  .col-emphased { font-weight: bold; }
+
+  // default size large
+  @media screen and (min-width: #{$grid-large-min}px) and (max-width: #{(-1 + $grid-extra-large-min)}px) {
+    @if $compile-grid-emphased-class {
+      .col-l-emphased { font-weight: bold; }
+      .debug-thingy .screensize.col-l-emphased { color: #fff; }
+    }
+  }
+
+  @for $size-index from 1 through length($grid-settings) {
+    $size-settings: nth($grid-settings, $size-index);
+    $size-name: map-get($grid-screen-sizes, nth($size-settings, 1));
+    $size-name: #{$grid-column-prefix}#{$size-name};
+    $size-min: nth($size-settings, 2);
+    $size-max: nth($size-settings, 3);
+
+    @if $size-min {
+      @if $size-max {
+        @media screen and (min-width: #{$size-min}px) and (max-width: #{$size-max}px) {
+          @if $compile-grid-emphased-class {
+            .#{$size-name}-emphased { font-weight: bold; }
+            .debug-thingy .screensize.#{$size-name}-emphased { color: #fff; }
+          }
+        }
+      } @else {
+        @media screen and (min-width: #{$size-min}px) {
+          @if $compile-grid-emphased-class {
+            .#{$size-name}-emphased { font-weight: bold; }
+            .debug-thingy .screensize.#{$size-name}-emphased { color: #fff; }
+          }
+        }
+      }
+    } @else {
+      @if $size-max {
+        @media screen and (max-width: #{$size-max}px) {
+          @if $compile-grid-emphased-class {
+            .#{$size-name}-emphased { font-weight: bold; }
+            .debug-thingy .screensize.#{$size-name}-emphased { color: #fff; }
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin create-visibility-classes($grid-settings) {
+  // manual default values ...
+  .col-hide { display: none !important;}
+
+  // default size large
+  @media screen and (min-width: #{$grid-large-min}px) and (max-width: #{(-1 + $grid-extra-large-min)}px) {
+    @if $compile-grid-hide-class {.col-l-hide { display: none !important;}}
+  }
+
+  @media screen and (min-width: #{$grid-extra-large-min}), screen and (max-width: #{(-1 + $grid-large-min)}px) {
+    @if $compile-grid-show-class {.col-l-show { display: none !important; }}
+  }
+
+  @for $size-index from 1 through length($grid-settings) {
+    $size-settings: nth($grid-settings, $size-index);
+    $size-name: map-get($grid-screen-sizes, nth($size-settings, 1));
+    $size-name: #{$grid-column-prefix}#{$size-name};
+    $size-min-hide: nth($size-settings, 2);
+    $size-max-hide: nth($size-settings, 3);
+    $size-min-show: nth($size-settings, 2) - 1;
+    $size-max-show: nth($size-settings, 3) + 1;
+
+    @if $size-min-hide {
+      @if $size-max-hide {
+        @media screen and (min-width: #{$size-min-hide}px) and (max-width: #{$size-max-hide}px) {
+          @if $compile-grid-hide-class {.#{$size-name}-hide { display: none !important; }}
+        }
+
+        @media screen and (max-width: #{$size-min-show}px), screen and (min-width: #{$size-max-show}px) {
+          @if $compile-grid-show-class {.#{$size-name}-show { display: none !important; }}
+        }
+      } @else {
+        @media screen and (min-width: #{$size-min-hide}px) {
+          @if $compile-grid-hide-class {.#{$size-name}-hide { display: none !important; }}
+        }
+
+        @media screen and (max-width: #{$size-min-show}px) {
+          @if $compile-grid-show-class {.#{$size-name}-show { display: none !important; }}
+        }
+      }
+    } @else {
+      @if $size-max-hide {
+        @media screen and (max-width: #{$size-max-hide}px) {
+          @if $compile-grid-hide-class {.#{$size-name}-hide { display: none !important; }}
+        }
+
+        @media screen and (min-width: #{$size-max-show}px) {
+          @if $compile-grid-show-class {.#{$size-name}-show { display: none !important; }}
+        }
+      }
+    }
+  }
+}
+
+// grid initialization //
+
+@if $compile-grid {
+  @include init-grid();
+
+  // deprecated in favor of .visibile-* and hidden-* in v2.1.0
+  @include create-visibility-classes($grid-settings-size-exclusive);
+}

data/_sass/_header.md

@@ -0,0 +1,1042 @@
+
+
+## Einführung
+
+Um die Anatomie des Telekom Headers zu versthen ist es wichtig zu wissen,
+dass den Telekom Header nicht als "eine Komponente" gibt.<br>
+Er besteht aus mehreren Einzel-Komponenten die verschiedene Zustände haben können.
+
+### Übersicht
+
+Der gesamte Header besteht im groben aus zwei Komponenten. Einer `.brandbar` mit Brand Logo und Brand Claim,
+sowie einer `.navbar` in der sich eine Haupt-Navigation und sowie eine Icon-Navigation befinden.
+Umgeben wird der header vom HTML5-Tag `<header class="brand-header"></header>`
+der die beiden Komponenten zusammenschließt.
+
+Das Haupt-Menü wiederum ist selbst eine eigenständige Komponente. Sie bringt die notwendige Funktionalität
+für die Navigation auf Desktop oder Mobile mit sich und stellt daher die wichtigste Komponente im Header dar.
+
+</div>
+</div>
+
+<div class="tc-example tc-example-block" lang="en">
+  <header class="brand-header">
+    <div class="brandbar">
+      <div class="container-fixed">
+        <div class="brand-logo">
+          <img src="images/deutsche-telekom-logo.svg" alt="Telekom Logo">
+          <span class="sr-only">Telekom Logo</span>
+        </div>
+        <div class="brand-claim">
+          <img src="images/brand-claim.svg" alt="Brand Claim">
+          <span class="sr-only">Brand Claim</span>
+        </div>
+      </div>
+    </div>
+    <nav class="navbar navbar-default">
+      <div class="container-fixed">
+        <div class="navbar-expanded">
+          <div class="brandnavhead" data-spy="brandnav" data-target="#MainMenuExample1">
+            <button type="button" class="btn btn-clean navbar-btn brandnav-control-up" data-close="brandnav" data-target="#MainMenuExample1">
+              <span class="sr-only">Back</span>
+              <span class="icon icon-navigation-left"></span>
+            </button>
+
+            <button type="button" class="btn btn-clean navbar-btn navbar-right" data-cancel="brandnav" data-target="#MainMenuExample1">
+              <span class="sr-only">Close Navigation</span>
+              <span class="icon icon-cancel"></span>
+            </button>
+
+            <label class="navbar-header-label brandnav-label">Home</label>
+          </div>
+          <div class="brandnav brandnav-lvl-1" id="MainMenuExample1">
+            <ul class="nav">
+              <li><a href="#">Shop</a></li>
+              <li class="active"><a href="#">Meine Telekom</a></li>
+              <li><a href="#">Hilfe</a></li>
+              <li><a href="#">Kontakt</a></li>
+            </ul>
+          </div>
+        </div>
+        <div class="navbar-persistent">
+          <button type="button" class="btn btn-clean navbar-btn navbar-toggle" data-open="brandnav" data-target="#MainMenuExample1">
+            <span class="sr-only">Open Navigation</span>
+            <span class="icon icon-list-view"></span>
+          </button>
+          <ul class="nav navbar-nav navbar-nav-icons navbar-right">
+            <li><a href="#"><span class="sr-only">Search</span><span class="icon icon-search"></span></a></li>
+            <li><a href="#"><span class="sr-only">Shoppingcart</span><span class="icon icon-shopping-cart"></span></a></li>
+            <li><a href="#"><span class="sr-only">My Profile</span><span class="icon icon-my-profile"></span></a></li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  </header>
+</div>
+
+```html
+<header class="brand-header">
+  <div class="brandbar">
+    <div class="container-fixed">
+      <div class="brand-logo">
+        <img src="images/deutsche-telekom-logo.svg" alt="Telekom Logo">
+        <span class="sr-only">Telekom Logo</span>
+      </div>
+      <div class="brand-claim">
+        <img src="images/brand-claim.svg" alt="Brand Claim">
+        <span class="sr-only">Brand Claim</span>
+      </div>
+    </div>
+  </div>
+  <nav class="navbar navbar-default">
+    <div class="container-fixed">
+      <div class="navbar-expanded">
+        <div class="brandnavhead" data-spy="brandnav" data-target="#MainMenu">
+          <button type="button" class="btn btn-clean navbar-btn brandnav-control-up" data-close="brandnav" data-target="#MainMenu">
+            <span class="sr-only">Back</span>
+            <span class="icon icon-navigation-left"></span>
+          </button>
+
+          <button type="button" class="btn btn-clean navbar-btn navbar-right" data-cancel="brandnav" data-target="#MainMenu">
+            <span class="sr-only">Close Navigation</span>
+            <span class="icon icon-cancel"></span>
+          </button>
+
+          <label class="navbar-header-label brandnav-label">Home</label>
+        </div>
+        <div class="brandnav brandnav-lvl-1" id="MainMenu">
+          <ul class="nav">
+            <li><a href="#">Shop</a></li>
+            <li class="active"><a href="#">Meine Telekom</a></li>
+            <li><a href="#">Hilfe</a></li>
+            <li><a href="#">Kontakt</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="navbar-persistent">
+        <button type="button" class="btn btn-clean navbar-btn navbar-toggle" data-open="brandnav" data-target="#MainMenu">
+          <span class="sr-only">Open Navigation</span>
+          <span class="icon icon-list-view"></span>
+        </button>
+        <ul class="nav navbar-nav navbar-nav-icons navbar-right">
+          <li><a href="#"><span class="sr-only">Search</span><span class="icon icon-search"></span></a></li>
+          <li><a href="#"><span class="sr-only">Shoppingcart</span><span class="icon icon-shopping-cart"></span></a></li>
+          <li><a href="#"><span class="sr-only">My Profile</span><span class="icon icon-my-profile"></span></a></li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+</header>
+```
+
+<hr class="offset-top-8"/>
+
+<div class="main">
+  <div class="container-fixed">
+
+    <h3>Minimiert</h3>
+
+    <p>
+    Es gibt die Möglichkeit die `.brandbar` und damit den gesamten Header zu minimieren.
+    Dazu wird an die `.brandbar` die CSS-Klasse `.brandbar-minimized` angefügt.
+    </p>
+
+  </div>
+</div>
+
+<div class="tc-example tc-example-block" lang="en">
+  <header class="brand-header">
+    <div class="brandbar brandbar-minimized"></div>
+    <nav class="navbar navbar-default">
+      <div class="container-fixed">
+        <div class="navbar-expanded">
+          <div class="brandnavhead" data-spy="brandnav" data-target="#MainMenuExample2">
+            <button type="button" class="btn btn-clean navbar-btn brandnav-control-up" data-close="brandnav" data-target="#MainMenuExample2">
+              <span class="sr-only">Back</span>
+              <span class="icon icon-navigation-left"></span>
+            </button>
+
+            <button type="button" class="btn btn-clean navbar-btn navbar-right" data-cancel="brandnav" data-target="#MainMenuExample2">
+              <span class="sr-only">Close Navigation</span>
+              <span class="icon icon-cancel"></span>
+            </button>
+
+            <label class="navbar-header-label brandnav-label">Home</label>
+          </div>
+          <div class="brandnav brandnav-lvl-1" id="MainMenuExample2">
+            <ul class="nav">
+              <li><a href="#">Shop</a></li>
+              <li><a href="#">Meine Telekom</a></li>
+              <li><a href="#">Hilfe</a></li>
+              <li><a href="#">Kontakt</a></li>
+            </ul>
+          </div>
+        </div>
+        <div class="navbar-persistent">
+          <button type="button" class="btn btn-clean navbar-btn navbar-toggle" data-open="brandnav" data-target="#MainMenuExample2">
+            <span class="sr-only">Open Navigation</span>
+            <span class="icon icon-list-view"></span>
+          </button>
+          <ul class="nav navbar-nav navbar-nav-icons navbar-right">
+            <li><a href="#"><span class="sr-only">Search</span><span class="icon icon-search"></span></a></li>
+            <li><a href="#"><span class="sr-only">Shoppingcart</span><span class="icon icon-shopping-cart"></span></a></li>
+            <li><a href="#"><span class="sr-only">My Profile</span><span class="icon icon-my-profile"></span></a></li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  </header>
+</div>
+
+```html
+<header class="brand-header">
+  <div class="brandbar brandbar-minimized"></div>
+  <nav class="navbar navbar-default">
+    ...
+  </nav>
+</header>
+```
+
+<hr class="offset-top-8"/>
+
+<div class="main">
+  <div class="container-fixed">
+
+    <h3>Sprachauswahl</h3>
+
+    <p>
+    Eine Select Box für die Sprache kann hinzugefügt werden, indem eine Auswahlbox
+    den Icons hinzugefügt wird:
+    </p>
+
+  </div>
+</div>
+
+<div class="tc-example tc-example-block" lang="en">
+  <header class="brand-header">
+    <div class="brandbar">
+      <div class="container-fixed">
+        <div class="brand-logo">
+          <img src="images/deutsche-telekom-logo.svg" alt="Telekom Logo">
+          <span class="sr-only">Telekom Logo</span>
+        </div>
+        <div class="brand-claim">
+          <img src="images/brand-claim.svg" alt="Brand Claim">
+          <span class="sr-only">Brand Claim</span>
+        </div>
+      </div>
+    </div>
+    <nav class="navbar navbar-default">
+      <div class="container-fixed">
+        <div class="navbar-expanded">
+          <div class="brandnavhead" data-spy="brandnav" data-target="#MainMenuExample3">
+            <button type="button" class="btn btn-clean navbar-btn brandnav-control-up" data-close="brandnav" data-target="#MainMenuExample3">
+              <span class="sr-only">Back</span>
+              <span class="icon icon-navigation-left"></span>
+            </button>
+
+            <button type="button" class="btn btn-clean navbar-btn navbar-right" data-cancel="brandnav" data-target="#MainMenuExample3">
+              <span class="sr-only">Close Navigation</span>
+              <span class="icon icon-cancel"></span>
+            </button>
+
+            <label class="navbar-header-label brandnav-label">Home</label>
+          </div>
+          <div class="brandnav brandnav-lvl-1" id="MainMenuExample3">
+            <ul class="nav">
+              <li><a href="#">Shop</a></li>
+              <li><a href="#">Meine Telekom</a></li>
+              <li><a href="#">Hilfe</a></li>
+              <li><a href="#">Kontakt</a></li>
+            </ul>
+          </div>
+        </div>
+        <div class="navbar-persistent">
+          <button type="button" class="btn btn-clean navbar-btn navbar-toggle" data-open="brandnav" data-target="#MainMenuExample3">
+            <span class="sr-only">Open Navigation</span>
+            <span class="icon icon-list-view"></span>
+          </button>
+          <ul class="nav navbar-nav navbar-nav-icons navbar-right">
+            <li><a href="#"><span class="sr-only">Search</span><span class="icon icon-search"></span></a></li>
+            <li><a href="#"><span class="sr-only">Shoppingcart</span><span class="icon icon-shopping-cart"></span></a></li>
+            <li><a href="#"><span class="sr-only">My Profile</span><span class="icon icon-my-profile"></span></a></li>
+            <li>
+              <select class="form-select" title="Language">
+                <option value="de">DE</option>
+                <option value="en">EN</option>
+              </select>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  </header>
+</div>
+
+```html
+<li>
+  <select class="form-select" title="Language">
+    <option value="de">DE</option>
+    <option value="en">EN</option>
+  </select>
+</li>
+```
+
+<hr class="offset-top-8"/>
+
+<div class="main">
+  <div class="container-fixed">
+
+    <h3>Portal</h3>
+
+    <p>
+    Der Portalname kann als Element mit der CSS-Klasse `.navbar-portalname` der `.navbar-expanded` zugefügt werden.
+    Somit ist er bis zur Mobile-Variante sichtbar.
+    </p>
+
+  </div>
+</div>
+
+<div class="tc-example tc-example-block" lang="en">
+  <header class="brand-header">
+    <div class="brandbar">
+      <div class="container-fixed">
+        <div class="brand-logo">
+          <img src="images/deutsche-telekom-logo.svg" alt="Telekom Logo">
+          <span class="sr-only">Telekom Logo</span>
+        </div>
+        <div class="brand-claim">
+          <img src="images/brand-claim.svg" alt="Brand Claim">
+          <span class="sr-only">Brand Claim</span>
+        </div>
+      </div>
+    </div>
+    <nav class="navbar navbar-default">
+      <div class="container-fixed">
+        <div class="navbar-expanded">
+          <div class="navbar-portalname">
+            Brand Design Net
+          </div>
+          <div class="brandnavhead" data-spy="brandnav" data-target="#MainMenuExample4">
+            <button type="button" class="btn btn-clean navbar-btn brandnav-control-up" data-close="brandnav" data-target="#MainMenuExample4">
+              <span class="sr-only">Back</span>
+              <span class="icon icon-navigation-left"></span>
+            </button>
+
+            <button type="button" class="btn btn-clean navbar-btn navbar-right" data-cancel="brandnav" data-target="#MainMenuExample4">
+              <span class="sr-only">Close Navigation</span>
+              <span class="icon icon-cancel"></span>
+            </button>
+
+            <label class="navbar-header-label brandnav-label">Home</label>
+          </div>
+          <div class="brandnav brandnav-lvl-1" id="MainMenuExample4">
+            <ul class="nav">
+              <li><a href="#">Shop</a></li>
+              <li><a href="#">Meine Telekom</a></li>
+              <li><a href="#">Hilfe</a></li>
+              <li><a href="#">Kontakt</a></li>
+            </ul>
+          </div>
+        </div>
+        <div class="navbar-persistent">
+          <button type="button" class="btn btn-clean navbar-btn navbar-toggle" data-open="brandnav" data-target="#MainMenuExample4">
+            <span class="sr-only">Open Navigation</span>
+            <span class="icon icon-list-view"></span>
+          </button>
+          <ul class="nav navbar-nav navbar-nav-icons navbar-right">
+            <li><a href="#"><span class="sr-only">Search</span><span class="icon icon-search"></span></a></li>
+            <li><a href="#"><span class="sr-only">Shoppingcart</span><span class="icon icon-shopping-cart"></span></a></li>
+            <li><a href="#"><span class="sr-only">My Profile</span><span class="icon icon-my-profile"></span></a></li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  </header>
+</div>
+
+```html
+<div class="navbar-portalname">
+  Brand Design Net
+</div>
+```
+
+<hr class="offset-top-8"/>
+
+<div class="main">
+  <div class="container-fixed">
+
+    <h3>Suche</h3>
+
+    <p>
+    Die Suche ist ebenfalls eine eigenständige Komponente.
+    Im Falle des Headers wird sie in das Listen-Element des Such-Buttons integriert.
+    </p>
+
+    <p>
+    Dabei löst das Drücken des Such-Icons das Öffnen des Such-Feldes aus.
+    Die Verknüpfung wird dabei über das ID-Attribut des HTML-Elements hergestellt.<br>
+    `<a href="#tc-search" data-toggle="search" aria-controls="tc-search">`
+    <p>
+
+    <p>
+    Da es sich selbst bei einem einfachen Suchfeld bereits um ein Formular im Sinne von HTML handelt
+    muss die komplette Such-Funktionalität in einem `<form>`-Element liegen.
+    Das eigentliche Suchfeld liegt dabei in einem `.input-group`-Container der mit Icons ausgestattet ist.
+    Dieser wiederum liegt in einem `.search-form-set` in dem sich dann auch die `.search-results` befinden.
+    </p>
+
+    <p>
+    <strong>Anzeigen der Suchergebnisse</strong><br>
+    Die `.search-results` können aktiviert werden indem dem `.search-form-set`-Container
+    die CSS-Klasse `.has-results` zugefügt wird.
+    </p>
+
+  </div>
+</div>
+
+<div class="tc-example tc-example-block" lang="en">
+  <header class="brand-header">
+    <div class="brandbar">
+      <div class="container-fixed">
+        <div class="brand-logo">
+          <img src="images/deutsche-telekom-logo.svg" alt="Telekom Logo">
+          <span class="sr-only">Telekom Logo</span>
+        </div>
+        <div class="brand-claim">
+          <img src="images/brand-claim.svg" alt="Brand Claim">
+          <span class="sr-only">Brand Claim</span>
+        </div>
+      </div>
+    </div>
+    <nav class="navbar navbar-default">
+      <div class="container-fixed">
+        <div class="navbar-expanded">
+          <div class="navbar-portalname">
+            Brand Design Net
+          </div>
+          <div class="brandnavhead" data-spy="brandnav" data-target="#MainMenuExample5">
+            <button type="button" class="btn btn-clean navbar-btn brandnav-control-up" data-close="brandnav" data-target="#MainMenuExample5">
+              <span class="sr-only">Back</span>
+              <span class="icon icon-navigation-left"></span>
+            </button>
+
+            <button type="button" class="btn btn-clean navbar-btn navbar-right" data-cancel="brandnav" data-target="#MainMenuExample5">
+              <span class="sr-only">Close Navigation</span>
+              <span class="icon icon-cancel"></span>
+            </button>
+
+            <label class="navbar-header-label brandnav-label">Home</label>
+          </div>
+          <div class="brandnav brandnav-lvl-1" id="MainMenuExample5">
+            <ul class="nav">
+              <li><a href="#">Shop</a></li>
+              <li><a href="#">Meine Telekom</a></li>
+              <li><a href="#">Hilfe</a></li>
+              <li><a href="#">Kontakt</a></li>
+            </ul>
+          </div>
+        </div>
+        <div class="navbar-persistent">
+          <button type="button" class="btn btn-clean navbar-btn navbar-toggle" data-open="brandnav" data-target="#MainMenuExample5">
+            <span class="sr-only">Open Navigation</span>
+            <span class="icon icon-list-view"></span>
+          </button>
+          <ul class="nav navbar-nav navbar-nav-icons navbar-right">
+            <li class="navbar-search-item navbar-search-item-regular">
+              <a href="#tc-search" data-toggle="search" aria-controls="tc-search">
+                <span class="sr-only">Search</span>
+                <span class="icon icon-search"></span>
+              </a>
+              <div id="tc-search" class="navbar-search search slide">
+                <form class="navbar-form" autocomplete="off">
+                  <div class="search-form-set">
+                    <span class="sr-only">Globale Suche</span>
+                    <div class="input-group has-icon">
+                      <button type="button" class="cancel" data-toggle="search" data-target="#tc-search" aria-controls="tc-search" aria-label="Cancel">
+                        <span class="icon icon-cancel" aria-hidden="true"></span>
+                      </button>
+                      <span class="icon icon-search form-icon" aria-hidden="true"></span>
+                      <label class="sr-only" for="q">Suchbegriff</label>
+                      <input type="text" name="q" id="q" class="form-input" placeholder="Was suchen Sie?" tabindex="3"/>
+                      <button type="submit" class="sr-only">Suchen</button>
+                    </div>
+                    <div class="search-results">
+                      <ul>
+                        <li><strong>Samsung Galaxy S</strong>5</li>
+                        <li><strong>Samsung Galaxy S</strong>6</li>
+                        <li><strong>Samsung Galaxy S</strong>6 edge</li>
+                        <li>Hilfe zu <strong>Samsung Galaxy</strong></li>
+                        <li>Lieferstatus</li>
+                        <li>Kartenaktivierung</li>
+                      </ul>
+                    </div>
+                  </div>
+                </form>
+              </div>
+            </li>
+            <li><a href="#"><span class="sr-only">Shoppingcart</span><span class="icon icon-shopping-cart"></span></a></li>
+            <li><a href="#"><span class="sr-only">My Profile</span><span class="icon icon-my-profile"></span></a></li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  </header>
+</div>
+
+```html
+  <li class="navbar-search-item navbar-search-item-regular">
+    <a href="#tc-search" data-toggle="search" aria-controls="tc-search">
+      <span class="sr-only">Search</span>
+      <span class="icon icon-search"></span>
+    </a>
+    <div id="tc-search" class="navbar-search search slide">
+      <form class="navbar-form" autocomplete="off">
+        <div class="search-form-set">
+          <span class="sr-only">Globale Suche</span>
+          <div class="input-group has-icon">
+            <button type="button" class="cancel" data-toggle="search" data-target="#tc-search" aria-controls="tc-search" aria-label="Cancel">
+              <span class="icon icon-cancel" aria-hidden="true"></span>
+            </button>
+            <span class="icon icon-search form-icon" aria-hidden="true"></span>
+            <label class="sr-only" for="q">Suchbegriff</label>
+            <input type="text" name="q" id="q" class="form-input" placeholder="Was suchen Sie?" tabindex="3"/>
+            <button type="submit" class="sr-only">Suchen</button>
+          </div>
+          <div class="search-results">
+            <ul>
+              <li><strong>Samsung Galaxy S</strong>5</li>
+              <li><strong>Samsung Galaxy S</strong>6</li>
+              <li><strong>Samsung Galaxy S</strong>6 edge</li>
+              <li>Hilfe zu <strong>Samsung Galaxy</strong></li>
+              <li>Lieferstatus</li>
+              <li>Kartenaktivierung</li>
+            </ul>
+          </div>
+        </div>
+      </form>
+    </div>
+  </li>
+```
+
+<hr class="offset-top-8"/>
+
+<div class="main">
+  <div class="container-fixed">
+
+    <h3>Navigation</h3>
+
+    <p>
+    Die Navigation gibt es in den Formaten Mobile, Tablet und Desktop.
+    Anhand der Viewports wird das Menü entsprechend dargestellt.
+    Das Anzeigen der Navigation ist durch ein JavaScript-Plugin realisiert.
+    </p>
+
+    <p>
+    Der Navigations-Baum besteht aus drei Ebenen und ist durch `<ul>`-Listen realisiert.
+    Die CSS-Klasse `.brandnav` liegt dabei auf jeder ebene und stellt die Basis für die Darstellung.
+    Jedes Level im Navigations-Baum hat zusätzlich seine eigene CSS-Klasse `brandnav-lvl-{1,2,3}`
+    und etwas eigenes Markup.
+    </p>
+
+    <p>
+    <strong>Level 1</strong><br>
+    Das erste Level der Navigation benötigt ein ID-Attribut und die CSS-Klasse `.brandnav-lvl-1`.
+    Über diesen Knoten läuft die ganze Kommunikation des JavaScript-Plugins.
+    </p>
+
+    <p>
+    <strong>Level 2</strong><br>
+    benötigt die CSS-Klasse `.brandnav-lvl-2` und zusätzliches Markup
+    über das die Schließen-Funktion in der Desktop-Variante gesteuert werden kann.
+{% highlight html %}
+<div class="brandnav-lvl-2-head">
+  <button type="button" class="cancel" data-close="brandnav" data-target="#MainMenuExample6">
+    <span class="icon icon-cancel" aria-hidden="true"></span>
+  </button>
+</div>{% endhighlight %}
+    </p>
+
+    <p>
+    <strong>Level 3</strong><br>
+    benötigt lediglich die CSS-Klasse `.brandnav-lvl-3`.
+    </p>
+
+  </div>
+</div>
+
+<div class="tc-example tc-example-block" lang="en">
+  <header class="brand-header">
+    <div class="brandbar">
+      <div class="container-fixed">
+        <div class="brand-logo">
+          <img src="images/deutsche-telekom-logo.svg" alt="Telekom Logo">
+          <span class="sr-only">Telekom Logo</span>
+        </div>
+        <div class="brand-claim">
+          <img src="images/brand-claim.svg" alt="Brand Claim">
+          <span class="sr-only">Brand Claim</span>
+        </div>
+      </div>
+    </div>
+    <nav class="navbar navbar-default">
+      <div class="container-fixed">
+        <div class="navbar-expanded">
+          <div class="brandnavhead" data-spy="brandnav" data-target="#MainMenuExample6">
+            <button type="button" class="btn btn-clean navbar-btn brandnav-control-up" data-close="brandnav" data-target="#MainMenuExample6">
+              <span class="sr-only">Back</span>
+              <span class="icon icon-navigation-left"></span>
+            </button>
+
+            <button type="button" class="btn btn-clean navbar-btn navbar-right" data-cancel="brandnav" data-target="#MainMenuExample6">
+              <span class="sr-only">Close Navigation</span>
+              <span class="icon icon-cancel"></span>
+            </button>
+
+            <label class="navbar-header-label brandnav-label">Home</label>
+          </div>
+          <div class="brandnav brandnav-lvl-1" id="MainMenuExample6">
+            <ul class="nav">
+              <li>
+                <a href="#" data-open="brandnav">Shop</a>
+                <div class="brandnav brandnav-lvl-2">
+                  <div class="brandnav-lvl-2-head">
+                    <button type="button" class="cancel" data-close="brandnav" data-target="#MainMenuExample6">
+                      <span class="icon icon-cancel" aria-hidden="true"></span>
+                    </button>
+                  </div>
+                  <ul class="nav">
+                    <li class="col-l-3">
+                      <a href="#" data-open="brandnav">MagentaOne</a>
+                      <div class="brandnav brandnav-lvl-3">
+                        <ul class="nav">
+                          <li><a href="#">Offers</a></li>
+                          <li><a href="#">Tariff</a></li>
+                          <li><a href="#">Benefit</a></li>
+                          <li><a href="#">Buy Now</a></li>
+                        </ul>
+                      </div>
+                    </li>
+                    <li class="col-l-3">
+                      <a href="#" data-open="brandnav">MagentaMobile</a>
+                      <div class="brandnav brandnav-lvl-3">
+                        <ul class="nav">
+                          <li><a href="#">Special Offers</a></li>
+                          <li><a href="#">Smartphones</a></li>
+                          <li><a href="#">Tablets & Surfsticks</a></li>
+                          <li><a href="#">Tariff</a></li>
+                          <li><a href="#">Extras</a></li>
+                          <li><a href="#">Accessoires</a></li>
+                          <li><a href="#">Buy Now</a></li>
+                        </ul>
+                      </div>
+                    </li>
+                    <li class="col-l-3">
+                      <a href="#" data-open="brandnav">MagentaHome</a>
+                      <div class="brandnav brandnav-lvl-3">
+                        <ul class="nav">
+                          <li><a href="#">Tariff</a></li>
+                          <li><a href="#">Entertain</a></li>
+                          <li><a href="#">Extras</a></li>
+                          <li><a href="#">Accessoires</a></li>
+                        </ul>
+                      </div>
+                    </li>
+                    <li class="col-l-3">
+                      <a href="#" data-open="brandnav">More</a>
+                      <div class="brandnav brandnav-lvl-3">
+                        <ul class="nav">
+                          <li><a href="#">Smart Home</a></li>
+                          <li><a href="#">Apps</a></li>
+                        </ul>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </li>
+              <li>
+                <a href="#" data-open="brandnav">My Telekom</a>
+                <div class="brandnav brandnav-lvl-2">
+                  <div class="brandnav-lvl-2-head">
+                    <button type="button" class="cancel" data-close="brandnav" data-target="#MainMenuExample6">
+                      <span class="icon icon-cancel" aria-hidden="true"></span>
+                    </button>
+                  </div>
+                  <ul class="nav">
+                    <li class="col-l-4">
+                      <a href="#" data-open="brandnav">Your Profile</a>
+                      <div class="brandnav brandnav-lvl-3">
+                        <ul class="nav">
+                          <li><a href="#">Sims</a></li>
+                          <li><a href="#">Services</a></li>
+                          <li><a href="#">Vorteil</a></li>
+                          <li><a href="#">Bestellen</a></li>
+                        </ul>
+                      </div>
+                    </li>
+                    <li class="col-l-4">
+                      <a href="#" data-open="brandnav">Mobile & Home</a>
+                      <div class="brandnav brandnav-lvl-3">
+                        <ul class="nav">
+                          <li><a href="#">Apps</a></li>
+                          <li><a href="#">Connectivity</a></li>
+                          <li><a href="#">Wifi</a></li>
+                          <li><a href="#">Network</a></li>
+                          <li><a href="#">Extras</a></li>
+                        </ul>
+                      </div>
+                    </li>
+                    <li class="col-l-4">
+                      <a href="#" data-open="brandnav">Help</a>
+                      <div class="brandnav brandnav-lvl-3">
+                        <ul class="nav">
+                          <li><a href="#">Browse Help</a></li>
+                          <li><a href="#">FAQ</a></li>
+                          <li><a href="#">Services</a></li>
+                        </ul>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </li>
+              <li>
+                <a href="#" data-open="brandnav">Help</a>
+                <div class="brandnav brandnav-lvl-2">
+                  <div class="brandnav-lvl-2-head">
+                    <button type="button" class="cancel" data-close="brandnav" data-target="#MainMenuExample6">
+                      <span class="icon icon-cancel" aria-hidden="true"></span>
+                    </button>
+                  </div>
+                  <ul class="nav">
+                    <li class="col-l-4">
+                      <a href="#" data-open="brandnav">Mobile Help</a>
+                      <div class="brandnav brandnav-lvl-3">
+                        <ul class="nav">
+                          <li><a href="#">Services</a></li>
+                          <li><a href="#">FAQ</a></li>
+                          <li><a href="#">Contact</a></li>
+                        </ul>
+                      </div>
+                    </li>
+                    <li class="col-l-4">
+                      <a href="#" data-open="brandnav">Telekom Home Help</a>
+                      <div class="brandnav brandnav-lvl-3">
+                        <ul class="nav">
+                          <li><a href="#">Overview</a></li>
+                          <li><a href="#">Home Kit</a></li>
+                          <li><a href="#">Services</a></li>
+                          <li><a href="#">Extras</a></li>
+                        </ul>
+                      </div>
+                    </li>
+                    <li class="col-l-4">
+                      <a href="#" data-open="brandnav">Support</a>
+                      <div class="brandnav brandnav-lvl-3">
+                        <ul class="nav">
+                          <li><a href="#">Browse Help</a></li>
+                          <li><a href="#">Overview</a></li>
+                          <li><a href="#">Contact Us</a></li>
+                        </ul>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </li>
+              <li>
+                <a href="#" data-open="brandnav">Contact</a>
+                <div class="brandnav brandnav-lvl-2">
+                  <div class="brandnav-lvl-2-head">
+                    <button type="button" class="cancel" data-close="brandnav" data-target="#MainMenuExample6">
+                      <span class="icon icon-cancel" aria-hidden="true"></span>
+                    </button>
+                  </div>
+                  <ul class="nav">
+                    <li class="col-l-4">
+                      <a href="#" data-open="brandnav">Help</a>
+                      <div class="brandnav brandnav-lvl-3">
+                        <ul class="nav">
+                          <li><a href="#">Services</a></li>
+                          <li><a href="#">FAQ</a></li>
+                          <li><a href="#">Contact</a></li>
+                        </ul>
+                      </div>
+                    </li>
+                    <li class="col-l-4">
+                      <a href="#" data-open="brandnav">Services</a>
+                      <div class="brandnav brandnav-lvl-3">
+                        <ul class="nav">
+                          <li><a href="#">Tools</a></li>
+                          <li><a href="#">Applications</a></li>
+                          <li><a href="#">Feedback</a></li>
+                          <li><a href="#">Phones and Devices</a></li>
+                        </ul>
+                      </div>
+                    </li>
+                    <li class="col-l-4">
+                      <a href="#" data-open="brandnav">Support</a>
+                      <div class="brandnav brandnav-lvl-3">
+                        <ul class="nav">
+                          <li><a href="#">Top Queries</a></li>
+                          <li><a href="#">Latest</a></li>
+                        </ul>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="navbar-persistent">
+          <button type="button" class="btn btn-clean navbar-btn navbar-toggle" data-open="brandnav" data-target="#MainMenuExample1">
+            <span class="sr-only">Open Navigation</span>
+            <span class="icon icon-list-view"></span>
+          </button>
+          <ul class="nav navbar-nav navbar-nav-icons navbar-right">
+            <li><a href="#"><span class="sr-only">Search</span><span class="icon icon-search"></span></a></li>
+            <li><a href="#"><span class="sr-only">Shoppingcart</span><span class="icon icon-shopping-cart"></span></a></li>
+            <li><a href="#"><span class="sr-only">My Profile</span><span class="icon icon-my-profile"></span></a></li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  </header>
+</div>
+
+```html
+<header class="brand-header">
+  <div class="brandbar">
+    <div class="container-fixed">
+      <div class="brand-logo">
+        <img src="images/deutsche-telekom-logo.svg" alt="Telekom Logo">
+        <span class="sr-only">Telekom Logo</span>
+      </div>
+      <div class="brand-claim">
+        <img src="images/brand-claim.svg" alt="Brand Claim">
+        <span class="sr-only">Brand Claim</span>
+      </div>
+    </div>
+  </div>
+  <nav class="navbar navbar-default">
+    <div class="container-fixed">
+      <div class="navbar-expanded">
+        <div class="brandnavhead" data-spy="brandnav" data-target="#MainMenu">
+          <button type="button" class="btn btn-clean navbar-btn brandnav-control-up" data-close="brandnav" data-target="#MainMenu">
+            <span class="sr-only">Back</span>
+            <span class="icon icon-navigation-left"></span>
+          </button>
+
+          <button type="button" class="btn btn-clean navbar-btn navbar-right" data-cancel="brandnav" data-target="#MainMenu">
+            <span class="sr-only">Close Navigation</span>
+            <span class="icon icon-cancel"></span>
+          </button>
+
+          <label class="navbar-header-label brandnav-label">Home</label>
+        </div>
+        <div class="brandnav brandnav-lvl-1" id="MainMenu">
+          <ul class="nav">
+            <li>
+              <a href="#" data-open="brandnav">Shop</a>
+              <div class="brandnav brandnav-lvl-2">
+                <div class="brandnav-lvl-2-head">
+                  <button type="button" class="cancel" data-close="brandnav" data-target="#MainMenu">
+                    <span class="icon icon-cancel" aria-hidden="true"></span>
+                  </button>
+                </div>
+                <ul class="nav">
+                  <li class="col-l-3">
+                    <a href="#" data-open="brandnav">MagentaOne</a>
+                    <div class="brandnav brandnav-lvl-3">
+                      <ul class="nav">
+                        <li><a href="#">Offers</a></li>
+                        <li><a href="#">Tariff</a></li>
+                        <li><a href="#">Benefit</a></li>
+                        <li><a href="#">Buy Now</a></li>
+                      </ul>
+                    </div>
+                  </li>
+                  <li class="col-l-3">
+                    <a href="#" data-open="brandnav">MagentaMobile</a>
+                    <div class="brandnav brandnav-lvl-3">
+                      <ul class="nav">
+                        <li><a href="#">Special Offers</a></li>
+                        <li><a href="#">Smartphones</a></li>
+                        <li><a href="#">Tablets & Surfsticks</a></li>
+                        <li><a href="#">Tariff</a></li>
+                        <li><a href="#">Extras</a></li>
+                        <li><a href="#">Accessoires</a></li>
+                        <li><a href="#">Buy Now</a></li>
+                      </ul>
+                    </div>
+                  </li>
+                  <li class="col-l-3">
+                    <a href="#" data-open="brandnav">MagentaHome</a>
+                    <div class="brandnav brandnav-lvl-3">
+                      <ul class="nav">
+                        <li><a href="#">Tariff</a></li>
+                        <li><a href="#">Entertain</a></li>
+                        <li><a href="#">Extras</a></li>
+                        <li><a href="#">Accessoires</a></li>
+                      </ul>
+                    </div>
+                  </li>
+                  <li class="col-l-3">
+                    <a href="#" data-open="brandnav">More</a>
+                    <div class="brandnav brandnav-lvl-3">
+                      <ul class="nav">
+                        <li><a href="#">Smart Home</a></li>
+                        <li><a href="#">Apps</a></li>
+                      </ul>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </li>
+            <li>
+              <a href="#" data-open="brandnav">My Telekom</a>
+              <div class="brandnav brandnav-lvl-2">
+                <div class="brandnav-lvl-2-head">
+                  <button type="button" class="cancel" data-close="brandnav" data-target="#MainMenu">
+                    <span class="icon icon-cancel" aria-hidden="true"></span>
+                  </button>
+                </div>
+                <ul class="nav">
+                  <li class="col-l-4">
+                    <a href="#" data-open="brandnav">Your Profile</a>
+                    <div class="brandnav brandnav-lvl-3">
+                      <ul class="nav">
+                        <li><a href="#">Sims</a></li>
+                        <li><a href="#">Services</a></li>
+                        <li><a href="#">Vorteil</a></li>
+                        <li><a href="#">Bestellen</a></li>
+                      </ul>
+                    </div>
+                  </li>
+                  <li class="col-l-4">
+                    <a href="#" data-open="brandnav">Mobile & Home</a>
+                    <div class="brandnav brandnav-lvl-3">
+                      <ul class="nav">
+                        <li><a href="#">Apps</a></li>
+                        <li><a href="#">Connectivity</a></li>
+                        <li><a href="#">Wifi</a></li>
+                        <li><a href="#">Network</a></li>
+                        <li><a href="#">Extras</a></li>
+                      </ul>
+                    </div>
+                  </li>
+                  <li class="col-l-4">
+                    <a href="#" data-open="brandnav">Help</a>
+                    <div class="brandnav brandnav-lvl-3">
+                      <ul class="nav">
+                        <li><a href="#">Browse Help</a></li>
+                        <li><a href="#">FAQ</a></li>
+                        <li><a href="#">Services</a></li>
+                      </ul>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </li>
+            <li>
+              <a href="#" data-open="brandnav">Help</a>
+              <div class="brandnav brandnav-lvl-2">
+                <div class="brandnav-lvl-2-head">
+                  <button type="button" class="cancel" data-close="brandnav" data-target="#MainMenu">
+                    <span class="icon icon-cancel" aria-hidden="true"></span>
+                  </button>
+                </div>
+                <ul class="nav">
+                  <li class="col-l-4">
+                    <a href="#" data-open="brandnav">Mobile Help</a>
+                    <div class="brandnav brandnav-lvl-3">
+                      <ul class="nav">
+                        <li><a href="#">Services</a></li>
+                        <li><a href="#">FAQ</a></li>
+                        <li><a href="#">Contact</a></li>
+                      </ul>
+                    </div>
+                  </li>
+                  <li class="col-l-4">
+                    <a href="#" data-open="brandnav">Telekom Home Help</a>
+                    <div class="brandnav brandnav-lvl-3">
+                      <ul class="nav">
+                        <li><a href="#">Overview</a></li>
+                        <li><a href="#">Home Kit</a></li>
+                        <li><a href="#">Services</a></li>
+                        <li><a href="#">Extras</a></li>
+                      </ul>
+                    </div>
+                  </li>
+                  <li class="col-l-4">
+                    <a href="#" data-open="brandnav">Support</a>
+                    <div class="brandnav brandnav-lvl-3">
+                      <ul class="nav">
+                        <li><a href="#">Browse Help</a></li>
+                        <li><a href="#">Overview</a></li>
+                        <li><a href="#">Contact Us</a></li>
+                      </ul>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </li>
+            <li>
+              <a href="#" data-open="brandnav">Contact</a>
+              <div class="brandnav brandnav-lvl-2">
+                <div class="brandnav-lvl-2-head">
+                  <button type="button" class="cancel" data-close="brandnav" data-target="#MainMenu">
+                    <span class="icon icon-cancel" aria-hidden="true"></span>
+                  </button>
+                </div>
+                <ul class="nav">
+                  <li class="col-l-4">
+                    <a href="#" data-open="brandnav">Help</a>
+                    <div class="brandnav brandnav-lvl-3">
+                      <ul class="nav">
+                        <li><a href="#">Services</a></li>
+                        <li><a href="#">FAQ</a></li>
+                        <li><a href="#">Contact</a></li>
+                      </ul>
+                    </div>
+                  </li>
+                  <li class="col-l-4">
+                    <a href="#" data-open="brandnav">Services</a>
+                    <div class="brandnav brandnav-lvl-3">
+                      <ul class="nav">
+                        <li><a href="#">Tools</a></li>
+                        <li><a href="#">Applications</a></li>
+                        <li><a href="#">Feedback</a></li>
+                        <li><a href="#">Phones and Devices</a></li>
+                      </ul>
+                    </div>
+                  </li>
+                  <li class="col-l-4">
+                    <a href="#" data-open="brandnav">Support</a>
+                    <div class="brandnav brandnav-lvl-3">
+                      <ul class="nav">
+                        <li><a href="#">Top Queries</a></li>
+                        <li><a href="#">Latest</a></li>
+                      </ul>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="navbar-persistent">
+        <button type="button" class="btn btn-clean navbar-btn navbar-toggle" data-open="brandnav" data-target="#MainMenu">
+          <span class="sr-only">Open Navigation</span>
+          <span class="icon icon-list-view"></span>
+        </button>
+        <ul class="nav navbar-nav navbar-nav-icons navbar-right">
+          <li><a href="#"><span class="sr-only">Search</span><span class="icon icon-search"></span></a></li>
+          <li><a href="#"><span class="sr-only">Shoppingcart</span><span class="icon icon-shopping-cart"></span></a></li>
+          <li><a href="#"><span class="sr-only">My Profile</span><span class="icon icon-my-profile"></span></a></li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+</header>
+```