Switch to Wilmington
Overview

Header

The header appears at the top of every screen, providing a consistent frame for all content across an experience. It can also include navigational elements when appropriate.

Structure

Header
The two-toned header bar and M&T logo gives this pattern visual impact and branding presence. Link navigation can be added to the right corner of the header for simple, universal actions such as Log Out.
<header class="p-main-header">
    <div class="p-main-header__logo">
      <svg height="21px" viewBox="0 0 182 33" version="1.1">
        <title>mtb-svg-sprite</title>
        <desc>Created with Sketch.</desc>
        <defs />
        <g
          id="Page-1"
          stroke="none"
          stroke-width="1"
          fill="none"
          fill-rule="evenodd"F
        >
          <g
            id="Artboard"
            transform="translate(-1.000000, 0.000000)"
            fill-rule="nonzero"
            fill="#FFFFFF"
          >
            <g id="mtb-svg-sprite" transform="translate(1.000000, 0.000000)">
              <g id="svg-mtb-logo">
                <path
                  d="M112.16,15.72 C115.82,14.89 118.18,12.25 118.18,8.21 C118.18,3.3 114.98,0.01 108.36,0.01 L97.66,0.01 L97.66,32.45 L108.73,32.45 C115.63,32.45 119.34,29.21 119.34,23.69 C119.34,19.28 116.7,16.46 112.16,15.72 Z M99.7,1.68 L108.32,1.68 C113.56,1.68 116.06,4.23 116.06,8.35 C116.06,12.47 113.56,14.98 108.32,14.98 L99.7,14.98 L99.7,1.68 Z M108.64,30.78 L99.7,30.78 L99.7,16.64 L108.64,16.64 C114.43,16.64 117.21,19.28 117.21,23.68 C117.21,28.13 114.43,30.78 108.64,30.78 Z M130.97,9.37 C126.71,9.37 123.65,11.73 122.54,15.16 L124.3,15.72 C125.46,12.52 127.87,10.95 130.97,10.95 C134.86,10.95 137.09,12.8 137.09,17.67 L137.09,18.97 L134.12,19.11 C124.16,19.43 121.33,22.54 121.33,26.48 C121.33,30.51 124.57,33.01 128.88,33.01 C132.68,33.01 135.6,31.2 137.08,27.96 L137.08,32.46 L139.03,32.46 L139.03,18.13 C139.04,12.06 136.07,9.37 130.97,9.37 Z M137.09,23.69 C137.09,28 134.03,31.43 129.12,31.43 C125.69,31.43 123.33,29.44 123.33,26.47 C123.33,23.32 125.51,20.82 134.22,20.54 L137.09,20.45 L137.09,23.69 Z M153.17,9.37 C149.05,9.37 145.99,12.01 144.6,15.67 L144.6,9.92 L142.61,9.92 L142.61,32.44 L144.6,32.44 L144.6,21.14 C144.6,15.16 147.94,11.04 152.8,11.04 C156.6,11.04 158.55,13.31 158.55,17.76 L158.55,32.45 L160.54,32.45 L160.54,17.34 C160.54,12.52 157.94,9.37 153.17,9.37 Z"
                  id="Shape"
                />
                <polygon
                  id="Shape"
                  points="172.5 18.77 180.6 9.92 178.2 9.92 166.1 23.27 166.1 0.01 164.11 0.01 164.11 32.44 166.1 32.44 166.1 25.68 171.2 20.16 179.63 32.44 181.9 32.44"
                />
                <path
                  d="M63.24,8.75 L65.22,8.75 C65.22,8.75 65.2,1.66 71.68,1.66 L73.65,1.66 L73.65,30.78 L70.55,30.78 C68.57,30.59 66.92,29.31 65.33,27.8 L63,25.55 C63.51,24.86 64.18,23.82 64.66,22.73 C65.2,21.5 65.59,19.18 65.83,18.6 C65.91,18.41 66,18.23 66.11,18.06 C66.42,17.58 66.93,17.17 67.46,16.94 C67.86,16.77 68.35,16.65 68.79,16.65 L69.09,16.65 L69.09,14.97 L59.38,14.97 L59.38,16.65 L60.04,16.65 C61.81,16.66 63.25,18.09 63.25,19.89 C63.25,22.2 61.52,24.1 61.52,24.1 L52.64,15.48 C56.6,14.04 59.94,12.06 59.94,8.33 C59.94,4.41 56.95,1.65 51.55,1.65 C46.07,1.65 42.42,4.68 42.42,9.57 C42.42,12.79 43.9,14.89 45.33,16.33 C40.83,18.08 38.15,20.37 38.15,24.56 C38.15,30.46 43.47,32.83 49.38,32.83 C53.26,32.83 56.53,31.66 59.05,29.8 C59.09,29.77 60.73,32.44 65.57,32.44 C65.92,32.44 84,32.43 84,32.43 L84,30.77 L80.45,30.77 L80.45,1.65 L82.42,1.65 C88.88,1.65 88.88,8.74 88.88,8.74 L90.86,8.74 L90.86,0.01 L63.24,0.01 L63.24,8.75 Z M51.35,3.31 C53.49,3.31 54.81,5.03 54.81,7.48 C54.81,10.2 53.6,12.54 51,13.94 C49.33,12.31 47.89,10.09 47.89,7.41 C47.89,4.99 49.21,3.31 51.35,3.31 Z M51.15,30.02 C47.31,30.02 44.43,27.18 44.43,23.37 C44.43,20.69 45.05,19.06 46.84,17.9 L57.56,28.42 C55.81,29.63 53.56,30.02 51.15,30.02 Z M34.85,1.66 L38.69,1.66 L38.69,0 L28.34,0 C28.34,0 19.78,21.39 19.5,22.08 C19.23,21.39 10.62,0 10.62,0 L0,0 L0,1.66 L3.84,1.66 L3.84,30.78 L0.66,30.78 L0.66,32.44 L10.03,32.44 L10.03,30.78 L5.87,30.78 L5.87,5.38 C6.36,6.61 16.31,31.71 16.31,31.71 L17.99,31.71 C17.99,31.71 27.81,6.62 28.29,5.38 C28.29,6.74 28.28,30.79 28.28,30.79 L25.02,30.79 L25.02,32.44 L38.14,32.44 L38.14,30.79 L34.86,30.79 L34.86,1.66 L34.85,1.66 Z"
                  id="Shape"
                />
              </g>
            </g>
          </g>
        </g>
      </svg>
    </div>
  </header>
Copy