Stage

Stage Big

Headline

subline

Button
<div class="stage is-big" style="background-image: url('/images/placeholder.jpg');"> <div class="overlay invert"> <div class="container"> <div class="stage__body"> <h1 class="stage__headline">Headline</h1> <p class="stage__subline">subline</p> <a class="btn btn-default btn-invert"> Button </a> </div> </div> </div> </div>

Stage Sidebar

<div class="stage " style="background-image: url('/images/placeholder.jpg');"> <div class="container"> <div class="stage__sidebar"> <div class="stage__sidebar-header"> <button class="stage__sidebar-toggle collapsed" role="button" data-toggle="collapse" href="#stageSidebarBody" aria-expanded="false" aria-controls="collapseExample"> Headline Subkategorien <span class="toggle-icons"> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#plus"></use> </svg> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#minus"></use> </svg> </span> </button> </div> <div id="stageSidebarBody" class="stage__sidebar-body collapse"> <h3 class="hidden-xs hidden-sm hidden-hd">Headline</h3> <div class="list-group"> <div class="list-group-item"> <a href="#">Sub Category</a> </div> <div class="list-group-item"> <a href="#">Sub Category</a> </div> <div class="list-group-item"> <a href="#">Sub Category</a> </div> <div class="list-group-item"> <a href="#">Sub Category</a> </div> <div class="list-group-item"> <a href="#">Sub Category</a> </div> <div class="list-group-item"> <a href="#">Sub Category</a> </div> <div class="list-group-item"> <a href="#">Sub Category</a> </div> <div class="list-group-item"> <a href="#">Sub Category</a> </div> </div> </div> </div> <div class="stage__body"> </div> </div> </div>

Stage small

<div class="stage is-small" style="background-image: url('/images/placeholder.jpg');"> <div class="container"> <div class="stage__body"> </div> </div> </div>