<div class="section-bar">
  <div class="section-icon"><span class="icon-Chat-active">&nbsp;</span></div>
  <h1 class="heading">Touch the Cornballer</h1>
</div>

<div class="section-bar {$modifiers}" data-section-bar>
  <div class="section-icon"><span class="icon-Chat-active">&nbsp;</span></div>
  <h1 class="heading">Touch the Cornballer</h1>
</div>

<div class="section-bar">
  <div class="section-icon"><span class="icon-Chat-active">&nbsp;</span></div>
  <h1 class="heading">icon font</h1>
</div>
<div class="section-bar">
  <div class="section-icon"><img src="http://gfx.dagbladet.no/styleguide/icons/icon-chat-active.png" />&nbsp;</div>
  <h1 class="heading">image</h1>
</div>
<div class="section-bar">
  <div class="section-icon">
    <svg x="0px" y="0px" viewBox="0 0 60 60">
      <path d="M30.399,4.246C13.866,3.92,0.257,14.108,0.004,27c-0.088,4.482,1.45,8.701,4.188,12.312H4.191c4.709,6.05-0.43,16.45-0.43,16.45l15.174-6.535c3.269,1.033,6.822,1.635,10.544,1.708c16.533,0.326,30.141-9.862,30.395-22.755C60.129,15.287,46.932,4.572,30.399,4.246z M17.14,31.298c-2.037,0-3.688-1.651-3.688-3.688c0-2.037,1.651-3.688,3.688-3.688s3.688,1.651,3.688,3.688C20.828,29.647,19.177,31.298,17.14,31.298z M29.433,31.298c-2.037,0-3.688-1.651-3.688-3.688c0-2.037,1.651-3.688,3.688-3.688s3.688,1.651,3.688,3.688C33.121,29.647,31.47,31.298,29.433,31.298z M41.725,31.298c-2.037,0-3.688-1.651-3.688-3.688c0-2.037,1.651-3.688,3.688-3.688c2.037,0,3.688,1.651,3.688,3.688C45.413,29.647,43.762,31.298,41.725,31.298z"/>
    </svg>
  </div>
  <h1 class="heading">inline svg</h1>
</div>
<div class="section-bar">
  <div class="section-icon"></div>
  <h1 class="heading">no icon</h1>
</div>

<div class="section-bar" data-section-bar>
  <div class="section-icon"><span class="icon-Chat-active">&nbsp;</span></div>
  <h1 class="heading">Touch the Cornballer</h1>
  <nav>
    <a class="tiny primary button toggle" href="#">People</a>
    <ul>
      <li><a class="small primary button" href="#">Annyong</a></li>
      <li><a class="small primary button" href="#">Buster</a></li>
      <li><a class="small primary button" href="#">Michael</a></li>
    </ul>
  </nav>
</div>

<div class="section-bar pluss" data-section-bar>
  <div class="section-icon">
    <svg width="100%" height="100%" viewBox="0 0 485 117" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
     <path d="M106.104,76.002c-0.946,0 -1.687,-0.259 -2.2,-0.774c-0.704,-0.705 -1.062,-1.916 -1.062,-3.6c0,-20.731 0,-20.74 0,-20.753c-0.093,-2.707 0.355,-4.714 1.262,-5.652c0.437,-0.453 0.964,-0.663 1.658,-0.663c1.054,0 1.845,0.279 2.42,0.853c0.854,0.855 1.27,2.398 1.27,4.718l0,20.385c0,3.897 -0.97,5.486 -3.348,5.486M87.385,91.751c0.388,12.522 8.98,14.248 18.206,14.248c6.662,0 11.684,-1.643 14.925,-4.884c2.688,-2.688 4.051,-6.423 4.051,-11.098l0,-56.724l-14.174,0l0,4.059c-2.372,-3.441 -5.782,-5.267 -10.163,-5.426c-4.397,-0.001 -7.726,1.94 -9.912,5.769c-1.671,2.927 -2.591,6.979 -2.591,11.41l0,23.721c0,5.162 1.606,9.73 4.406,12.53c2.177,2.177 4.979,3.281 8.326,3.281c3.202,0 6.25,-1.43 9.078,-4.245l0,7.935c-0.07,2.517 -0.791,2.942 -3.415,3.179c-1.489,0.097 -2.451,-0.074 -2.933,-0.526c-0.572,-0.535 -0.69,-1.687 -0.69,-3.251l-15.114,0.022Z" style="fill:#fff;"/>
     <path d="M151.225,71.538c0.004,2.143 0.01,5.078 -1.345,6.437c-0.513,0.514 -1.196,0.764 -2.089,0.764c-0.651,0.016 -1.16,-0.182 -1.614,-0.626c-1.156,-1.125 -1.818,-3.833 -1.818,-7.426l0,-18.418c0,-2.262 0.162,-5.43 1.563,-6.832c0.533,-0.533 1.229,-0.792 2.126,-0.792c0.781,0 1.364,0.219 1.834,0.688c1.343,1.343 1.343,4.349 1.343,6.337l0,19.868ZM153.95,31.925c-4.187,0 -7.469,1.319 -9.591,3.829l0,-18.711l-15.115,0l0,72.79l14.173,0l0,-3.844c2.406,3.239 6.131,5.223 10.246,5.384c8.423,-0.288 12.677,-6.53 12.677,-18.547l0,-23.722c0,-3.561 -0.594,-10.129 -4.57,-14.106c-2.04,-2.039 -4.67,-3.073 -7.82,-3.073" style="fill:#fff;"/>
     <path d="M210.873,79.851c-1.3,0 -2.378,-0.391 -3.118,-1.13c-0.766,-0.766 -1.17,-1.888 -1.17,-3.244l0,-3.407c0,-3.145 1.518,-4.61 2.841,-5.537c0.997,-0.747 2.247,-1.317 3.693,-1.977c0.649,-0.296 1.297,-0.6 1.956,-0.923l0,9.706c-0.082,2.963 -0.879,6.512 -4.202,6.512M211.13,31.925c-6.925,0 -12.087,1.736 -15.344,5.16c-2.781,2.922 -4.059,7.007 -3.803,12.143l0.036,0.72l15.104,0l0.004,-1.199c0.24,-3.893 0.384,-6.243 4.43,-6.243c0.917,0 1.72,0.32 2.322,0.922c0.761,0.76 1.196,1.956 1.196,3.282l0,2.574c0,3.642 -3.402,4.635 -8.113,6.008c-1.03,0.301 -2.096,0.612 -3.172,0.97c-6.134,2.016 -12.406,5.609 -12.406,16.97l0,4.554c0,4.076 1.295,7.526 3.743,9.975c2.364,2.362 5.649,3.613 9.502,3.613c5.053,0 7.977,-1.704 10.957,-4.68l-0.005,3.139l14.591,0l0.019,-42.524c0,-5.14 -1.136,-8.669 -3.573,-11.106c-2.919,-2.919 -7.839,-4.278 -15.488,-4.278" style="fill:#fff;"/>
     <path d="M64.29,79.851c-1.3,0 -2.378,-0.391 -3.117,-1.13c-0.766,-0.766 -1.172,-1.888 -1.172,-3.244l0,-3.407c0,-3.145 1.519,-4.611 2.842,-5.537c0.997,-0.747 2.247,-1.317 3.694,-1.977c0.649,-0.296 1.297,-0.6 1.955,-0.923l0,9.706c-0.082,2.963 -0.878,6.512 -4.202,6.512M64.547,31.925c-6.925,0 -12.087,1.736 -15.343,5.159c-2.781,2.923 -4.06,7.008 -3.804,12.144l0.036,0.72l15.105,0l0.002,-1.199c0.241,-3.893 0.385,-6.243 4.431,-6.243c0.917,0 1.72,0.32 2.323,0.923c0.76,0.759 1.195,1.955 1.195,3.281l0,2.574c0,3.642 -3.402,4.635 -8.112,6.008c-1.036,0.303 -2.101,0.614 -3.172,0.97c-6.134,2.016 -12.407,5.609 -12.407,16.97l0,4.554c0,4.076 1.294,7.526 3.743,9.975c2.364,2.362 5.651,3.613 9.502,3.613c5.055,0 7.979,-1.706 10.959,-4.682l-0.001,3.141l14.585,0l0.019,-42.524c0,-5.14 -1.135,-8.669 -3.572,-11.106c-2.919,-2.919 -7.841,-4.278 -15.489,-4.278" style="fill:#fff;"/>
     <path d="M249.465,51.931c-0.004,-2.079 -0.01,-5.22 1.381,-6.614c0.508,-0.51 1.18,-0.758 2.052,-0.758c0.605,-0.015 1.073,0.164 1.482,0.563c0.773,0.754 1.695,2.694 1.695,7.66l0,18.417c0,5.566 -0.898,7.539 -3.433,7.539c-0.791,0 -1.38,-0.22 -1.852,-0.691c-1.325,-1.325 -1.325,-4.288 -1.325,-6.249l0,-19.53l0,-0.337ZM256.546,17.042l-0.471,0l0,19.356c-2.53,-2.967 -5.663,-4.474 -9.334,-4.474c-11.497,0 -12.39,13.15 -12.39,17.18l0,23.721c0,12.018 4.245,18.258 12.619,18.548c3.838,0 7.494,-2.04 10.046,-5.522l0,3.982l14.174,0l0,-0.47l0,-71.85l0,-0.471l-0.47,0l-14.174,0Z" style="fill:#fff;"/>
     <path d="M298.441,56.187l-7.892,0l0,-8.11c0,-2.234 0.45,-3.818 1.338,-4.706c0.63,-0.63 1.537,-0.95 2.694,-0.95c1.063,0 1.941,0.338 2.607,1.004c0.925,0.925 1.253,2.255 1.253,3.113l0,9.649ZM294.489,31.925c-5.852,0.047 -10.413,1.32 -13.559,3.785c-3.648,2.859 -5.496,7.365 -5.496,13.394l0,26.629c0,4.451 1.36,8.058 4.04,10.715c4.18,4.143 10.48,4.965 15.028,4.925c6.535,-0.094 11.432,-1.84 14.555,-5.191c2.973,-3.189 4.314,-7.813 3.985,-13.741l-0.039,-0.716l-15.043,0c0,0 0.004,1.697 -0.016,2.179c-0.09,2.275 -0.176,4.405 -1.292,5.425c-0.577,0.528 -1.439,0.754 -2.632,0.694c-3.021,-0.173 -3.471,-2.762 -3.471,-4.29l0,-9.049l23.007,0l0,-20.146c0,-3.993 -1.255,-7.262 -3.733,-9.717c-4.161,-4.124 -10.636,-4.939 -15.334,-4.896" style="fill:#fff;"/>
     <path d="M334.161,33.293l0,-10.121l-15.115,0l0,10.121l-3.767,0l0,11.352l3.767,0l0,34.082c0,3.736 1.021,6.651 3.035,8.664c2.076,2.074 5.136,3.127 9.099,3.127c3.116,0 6.087,-0.373 8.835,-0.778l0.647,-0.095l0,-10.989l-0.825,-0.01c-0.87,-0.013 -2.267,-0.022 -3.488,0.177c-0.812,-0.006 -1.316,-0.148 -1.628,-0.46c-0.373,-0.37 -0.56,-1.083 -0.56,-2.116l0,-31.602l6.501,0l0,-11.352l-6.501,0Z" style="fill:#fff;"/>
     <path d="M25.054,65.513c0,4.979 0.154,8.138 -1.559,9.788c-1.205,1.161 -3.389,1.628 -6.847,1.467l0,-46.686c6.445,0.178 8.329,0.675 8.406,7.357l0,28.074ZM33.913,20.096c-4.935,-2.857 -11.526,-3.097 -17.316,-3.097l-16.597,0l0,72.793l20.531,0c4.44,0 9.546,-0.371 13.757,-3.116c4.453,-2.794 6.666,-7.533 6.759,-14.481l0,-35.62c0,-6.074 -0.847,-12.781 -7.134,-16.479" style="fill:#fff;"/>
     <path d="M189.39,80.785c-1.3,0 -2.223,-0.292 -2.823,-0.89c-0.768,-0.769 -1.141,-2.161 -1.141,-4.259l0.003,-58.637l-15.063,0l-0.001,56.746c0,6.603 1.614,10.877 5.078,13.45c2.954,2.195 7.126,3.13 13.947,3.13l0,-9.54Z" style="fill:#fff;"/>
     <rect x="367.331" y="0" width="117" height="117" style="fill:#222;"/>
     <rect x="421.331" y="41.999" width="9" height="33" style="fill:#fff;"/>
     <rect x="409.331" y="53.999" width="33" height="9" style="fill:#fff;"/>
  </svg>
  </div>
  <nav>
    <a class="tiny primary button toggle" href="#">Mer</a>
    <ul>
      <li><a class="small primary button" href="#">Bli abonnent</a></li>
    </ul>
  </nav>
</div>

<h4 class="section-title"><span>Dette er saken</span></h4>

<h4 class="section-title {$modifiers}"><span>Dette er saken</span></h4>

<h4 class="section-title {$modifiers}"><span>Dette er saken</span></h4>

<h1 class="section-title"><span>Dette er saken</span></h1>
<h2 class="section-title"><span>Dette er saken</span></h2>
<h3 class="section-title"><span>Dette er saken</span></h3>
<h4 class="section-title"><span>Dette er saken</span></h4>
<h5 class="section-title"><span>Dette er saken</span></h5>
<h6 class="section-title"><span>Dette er saken</span></h6>

<h4 class="section-title read-more"><span>Les mer</span></h4>

<h5 class="section-header heading">It's Sunday, but screw it — juice box time</h5>

<h1 class="section-header heading">Juice box time</h1>
<h2 class="section-header heading">Juice box time</h2>
<h3 class="section-header heading">Juice box time</h3>
<h4 class="section-header heading">Juice box time</h4>
<h5 class="section-header heading">Juice box time</h5>
<h6 class="section-header heading">Juice box time</h6>

<h6 class="section-header heading"><a href="#"><a href="#"><span class="icon-Arrow-alt-down"></span> Juice box time</a></h6>
<h6 class="section-header heading"><a href="#"><a href="#"><span class="icon-Add"></span> Juice box time</a></h6>

<div class="small-12 medium-12 large-12 columns content-marketing-ribbon"><p>Annonsørinnhold</p></div>