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.

The Servicepanel can be used for highlighting and centrally positioning a service section. It consists of three regions and can be combined with classes from Blocks and Panels (see Elements -> Blocks and Panels). The Servicepanel can also span the entire page width. It is an interrupter element and must not be used multiple times in succession.

Abstract

Optional outer left content (e.g. icon)

Main text area

Main action area

Optional outer right content

<div class="modul-servicepanel fullwidth panel--heavy"> 
        <div class="servicepanel__left">
            Optional outer left content (e.g. icon)
        </div>
        <div class="servicepanel__main">
             <div class="inner">
                <div class="inner__left">
                        Main text area
                </div>
                <div class="inner__right">
                        Main action area
                </div>
             </div>
        </div>
        <div class="servicepanel__right">
            Optional outer right content
        </div>
</div>

Examples

.modul-servicepanel.fullwidth.panel--heavy

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">
             <div class="inner">
                <div class="inner__left">
                        <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="inner__right">
                        <a class="button">Action</a>
                </div>
             </div>
        </div>
        <div class="servicepanel__right">
        </div>
</div>

.modul-servicepanel.fullwidth.panel--dark

Fullwidth dark

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">
             <div class="inner">
                <div class="inner__left">
                        <h2 class="title">Fullwidth dark</h2>
                        <p>Philosophy is considered a science but it is difficult to say, when one has to compare.</p>
                </div>
                <div class="inner__right">
                        <a class="button">Action</a>
                </div>
             </div>
        </div>
        <div class="servicepanel__right">
        </div>
</div>

.modul-servicepanel.fullwidth.panel--colored

Fullwidth colored

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

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">
             <div class="inner">
                <div class="inner__left">
                        <h2 class="title">Fullwidth colored</h2>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                </div>
                <div class="inner__right">
                        <a class="button">Action</a>
                </div>
             </div>
        </div>
        <div class="servicepanel__right">
        </div>
</div>

.modul-servicepanel.fullwidth.panel--colored2

Fullwidth colored 2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Action

<div class="modul-servicepanel fullwidth panel--colored2"> 
        <div class="servicepanel__left">
            <i class="bicon bicon-rocket bicon-3x" aria-hidden="true"></i>
        </div>
        <div class="servicepanel__main">
             <div class="inner">
                <div class="inner__left">
                        <h2 class="title">Fullwidth colored 2</h2>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                </div>
                <div class="inner__right">
                        <a class="button">Action</a>
                </div>
             </div>
        </div>
        <div class="servicepanel__right">
        </div>
</div>

.modul-servicepanel.fullwidth.panel--boxed

Fullwidth boxed with a lot of text and the action in outer right area

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Action

<div class="modul-servicepanel fullwidth panel--boxed"> 
        <div class="servicepanel__left">
            <i class="bicon bicon-rocket bicon-3x" aria-hidden="true"></i>
        </div>
        <div class="servicepanel__main">
             <div class="inner">
                <div class="inner__left">
                        <h2 class="title">Fullwidth boxed with a lot of text and the action in outer right area</h2>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                </div>
             </div>
        </div>
        <div class="servicepanel__right">
            <a class="button">Action</a>
        </div>
</div>

Not fullwidth

.modul-servicepanel.panel--heavy

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">
             <div class="inner">
                <div class="inner__left">
                        <p>Philosophy is considered a science but it is difficult to say, when one has to compare.</p>
                </div>
                <div class="inner__right">
                        <a class="button">Action</a>
                </div>
             </div>
        </div>
        <div class="servicepanel__right">
        </div>
</div>

.modul-servicepanel.panel--dark

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

Action

<div class="modul-servicepanel panel--dark"> 
        <div class="servicepanel__left">
            <i class="bicon bicon-lightbulb bicon-3x" aria-hidden="true"></i>
        </div>
        <div class="servicepanel__main">
             <div class="inner">
                <div class="inner__left">
                        <p>Philosophy is considered a science but it is difficult to say, when one has to compare.</p>
                </div>
                <div class="inner__right">
                        <a class="button">Action</a>
                </div>
             </div>
        </div>
        <div class="servicepanel__right">
        </div>
</div>

.modul-servicepanel.panel--colored

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

Action

<div class="modul-servicepanel panel--colored"> 
        <div class="servicepanel__left">
            <i class="bicon bicon-lightbulb bicon-3x" aria-hidden="true"></i>
        </div>
        <div class="servicepanel__main">
             <div class="inner">
                <div class="inner__left">
                        <p>Philosophy is considered a science but it is difficult to say, when one has to compare.</p>
                </div>
                <div class="inner__right">
                        <a class="button">Action</a>
                </div>
             </div>
        </div>
        <div class="servicepanel__right">
        </div>
</div>

.modul-servicepanel.panel--colored2

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

Action

<div class="modul-servicepanel panel--colored2"> 
        <div class="servicepanel__left">
            <i class="bicon bicon-lightbulb bicon-3x" aria-hidden="true"></i>
        </div>
        <div class="servicepanel__main">
             <div class="inner">
                <div class="inner__left">
                        <p>Philosophy is considered a science but it is difficult to say, when one has to compare.</p>
                </div>
                <div class="inner__right">
                        <a class="button">Action</a>
                </div>
             </div>
        </div>
        <div class="servicepanel__right">
        </div>
</div>

.modul-servicepanel.panel--light

light with headline and more text

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

Action

<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">
             <div class="inner">
                <div class="inner__left">
                        <h2 class="title">light with headline and more text</h2>
                        <p>Philosophy is considered a science but it is difficult to say, when one has to compare a science but it is difficult to say. Philosophy is considered a science but it is difficult to say, when one has to compare is considered a science but it is difficult. Philosophy is considered a science but it is difficult to say, when one has to compare.</p> 
                </div>
                <div class="inner__right">
                        <a class="button">Action</a>
                </div>
             </div>
        </div>
        <div class="servicepanel__right">
        </div>
</div>