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

Philosophy is considered a science but it is difficult to say, when one has to compare.

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

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

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

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

Philosophy is considered a science but it is difficult to say, when one has to compare.

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