Servicepanel
Mit dem Servicepanel lässt sich ein Service hervorheben und zentral platzieren. Es besteht aus drei Regionen und kann mit den Klassen aus Blocks and Panels (siehe Elements -> Blocks and Panels) kombiniert werden. Außerdem kann sich das Servicepanel über die komplette Breite der Seite erstrecken. Es handelt sich um ein Unterbrecherelement, dass nicht mehrfach aufeinander folgen darf.
.modul-servicepanel
<div class="modul-servicepanel panel--heavy">
<div class="servicepanel__left">
<i class="bicon bicon-lightbulb bicon-3x" aria-hidden="true"></i>
</div>
<div class="servicepanel__main">
<p>Philosophy is considered a science but it is difficult to say, when one has to compare.</p>
</div>
<div class="servicepanel__right">
<a class="button">Action</a>
</div>
</div>
Philosophy is considered a science but it is difficult to say, when one has to compare.
<div class="modul-servicepanel panel--light">
<div class="servicepanel__left">
<i class="bicon bicon-rocket bicon-3x" aria-hidden="true"></i>
</div>
<div class="servicepanel__main">
<p>Philosophy is considered a science but it is difficult to say, when one has to compare.</p>
</div>
<div class="servicepanel__right">
</div>
</div>
Fullwidth
Philosophy is considered a science but it is difficult to say, when one has to compare.
<div class="modul-servicepanel fullwidth panel--heavy">
<div class="servicepanel__left">
<i class="bicon bicon-rocket bicon-3x" aria-hidden="true"></i>
</div>
<div class="servicepanel__main">
<h2 class="title">Fullwidth</h2>
<p>Philosophy is considered a science but it is difficult to say, when one has to compare.</p>
</div>
<div class="servicepanel__right">
<a class="button">Action</a>
</div>
</div>
Fullwidth dark with headline
Philosophy is considered a science but it is difficult to say, when one has to compare.
<div class="modul-servicepanel fullwidth panel--dark">
<div class="servicepanel__left">
<i class="bicon bicon-rocket bicon-3x" aria-hidden="true"></i>
</div>
<div class="servicepanel__main">
<h2 class="title">Fullwidth dark with headline</h2>
<p>Philosophy is considered a science but it is difficult to say, when one has to compare.</p>
</div>
<div class="servicepanel__right">
<a class="button button--negative">Action</a>
</div>
</div>
Fullwidth colored with headline
Philosophy is considered a science but it is difficult to say, when one has to compare.
<div class="modul-servicepanel fullwidth panel--colored">
<div class="servicepanel__left">
<i class="bicon bicon-rocket bicon-3x" aria-hidden="true"></i>
</div>
<div class="servicepanel__main">
<h2 class="title">Fullwidth colored with headline</h2>
<p>Philosophy is considered a science but it is difficult to say, when one has to compare.</p>
</div>
<div class="servicepanel__right">
<a class="button">Action</a>
</div>
</div>
<div class="modul-servicepanel panel--boxed">
<div class="servicepanel__left">
</div>
<div class="servicepanel__main">
<p>Philosophy is considered a science but it is difficult to say, when one has to compare.</p>
</div>
<div class="servicepanel__right">
<a class="button">Action</a>
</div>
</div>