styleguide 0.30.11

12 - Section markers

Used to mark sections and blocks of editorial content.

12.1 - Section-bar

Used to mark large editorial blocks of content.

 

Touch the Cornballer

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

12.1.1 - Colors

 

Touch the Cornballer

.orange

Orange

 

Touch the Cornballer

.yellow

Yellow

 

Touch the Cornballer

.green

Green

 

Touch the Cornballer

.blue

Blue

 

Touch the Cornballer

.purple

Purple

 

Touch the Cornballer

.burgundy

Burgundy

 

Touch the Cornballer

.pink

Pink

 

Touch the Cornballer

.black

Black

 

Touch the Cornballer

.teal

Teal

 

Touch the Cornballer

.pluss

Pluss

 

Touch the Cornballer

<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>

12.1.2 - Icon

The .section-bar can be used both with and without a icon, though with is preferred.
Icons can be added both as icon font, images and inline-svg. Icon font or inline-svg's are preferred since this allows for better scaling and customizing colors.

 

icon font

 

image

inline svg

no icon

<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>

12.1.3 - Links

Requires javascript

Add contextual links. Note that this requires a tiny javascript and the data-section-bar attribute.

 

Touch the Cornballer

<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>

12.1.4 - Pluss

Custom header for pluss

<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>

12.2 - Section-title

Used to mark small editorial blocks of content.

Dette er saken

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

12.2.1 - Colors

Dette er saken

.primary

Primary

Dette er saken

.orange

Orange

Dette er saken

.yellow

Yellow

Dette er saken

.green

Green

Dette er saken

.blue

Blue

Dette er saken

.purple

Purple

Dette er saken

.burgundy

Burgundy

Dette er saken

.pink

Pink

Dette er saken

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

12.2.2 - Alignment

Dette er saken

.center

success

Dette er saken

.right

info

Dette er saken

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

12.2.3 - Sizes

Dette er saken

Dette er saken

Dette er saken

Dette er saken

Dette er saken
Dette er saken
<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>

12.2.4 - Read more

Les mer

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

12.3 - Section-header

Used to mark editorial blocks of content. Combine with text colors for variation.

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

12.3.1 - Size

Used to mark editorial blocks of content.

Juice box time

Juice box time

Juice box time

Juice box time

Juice box time
Juice box time
<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>

12.3.2 - Link & icons

Used to mark editorial blocks of content.

<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>

12.4 - Content Marketing

Used to mark content as content marketing.

Annonsørinnhold

<div class="content-marketing-ribbon"><p>Annonsørinnhold</p></div>