Beispiele

WP Theme Dokumentation

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, sint dolores veritatis? Mollitia animi quae, suscipit, commodi libero nihil pariatur iusto quo voluptatibus minima dicta hic facere dolor consectetur ratione!

Buttons

Basic

Default Button

<a class="button" href="#">Default Button</a>

Advanced

Tiny Button Small Button Large Button Secondary Button Success Button Alert Button Radius Button Round Button Disabled Button Expanded Button

<a class="button tiny" href="#">Tiny Button</a>
<a class="button small" href="#">Small Button</a>
<a class="button large" href="#">Large Button</a>

<!-- Color Classes -->
<a class="button secondary" href="#">Secondary Button</a>
<a class="button success" href="#">Success Button</a>
<a class="button alert" href="#">Alert Button</a>

<!-- Radius Classes -->
<a class="button radius" href="#">Radius Button</a>
<a class="button round" href="#">Round Button</a>

<!-- Disabled Class -->
<a class="button disabled" href="#">Disabled Button</a>

<!-- Expand Class -->
<a class="button expand" href="#">Expanded Button</a>

Panels

Basic

This is a regular panel.

It has an easy to override visual style, and is appropriately subdued.

This is a callout panel.

It has an easy to override visual style, and is appropriately subdued.

<div class="panel">
  <h5>This is a regular panel.</h5>
  It has an easy to override visual style, and is appropriately subdued.
</div>

<div class="panel callout radius">
  <h5>This is a callout panel.</h5>
  It has an easy to override visual style, and is appropriately subdued.
</div>

Advanced

Regular panel with 3 columns

<div class="panel">
  <h5>Regular panel with 3 columns</h5>
  <div class="row">
    <div class="small-12 large-4 columns">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div class="small-12 large-4 columns">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div class="small-12 large-4 columns">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
</div>

small-12 medium-4 large-4 column + panel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

small-12 medium-4 large-4 column + panel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

small-12 medium-4 large-4 column + panel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

<div class="row">
  <div class="small-12 medium-4 large-4 columns">
    <div class="panel">
      <h5>small-12 medium-4 large-4 column + panel</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
      <hr />
      <div class="text-center"><a class="button small" href="#">weiterlesen   <i class="fa fa-angle-right"></i></a></div>
    </div><!-- .panel -->
  </div><!-- .columns -->

  <div class="small-12 medium-4 large-4 columns">
    <div class="panel">
      <h5>small-12 medium-4 large-4 column + panel</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
      <hr />
      <div class="text-center"><a class="button small" href="#">weiterlesen   <i class="fa fa-angle-right"></i></a></div>
    </div><!-- .panel -->
  </div><!-- .columns -->

  <div class="small-12 medium-4 large-4 columns">
    <div class="panel">
      <h5>small-12 medium-4 large-4 column + panel</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
      <hr />
      <div class="text-center"><a class="button small" href="#">weiterlesen   <i class="fa fa-angle-right"></i></a></div>
    </div><!-- .panel -->
  </div><!-- .columns -->
</div><!-- .row -->

Als Berechnungshilfe können Sie in folgendem Fenster die Anwaltsgebühren (nach RVG) und die Gerichtskosten (nach GKG) unverbindlich ausrechnen lassen:

Zum Kostenrechner

<div class="panel clearfix">
  <div class="large-12 medium-12 small-12 columns">
    <p>Als Berechnungshilfe können Sie in folgendem Fenster die Anwaltsgebühren (nach RVG) und die Gerichtskosten (nach GKG) unverbindlich ausrechnen lassen:</p>
    <a class="button small" href="http://www.anwalt-suchservice.de/kostenrechner/ass/anwaltskosten/index.htm" target="_blank">Zum Kostenrechner</a>
  </div>
</div>

Dividers

SIMPLE

Lorem ipsum Nisi minim fugiat sit consectetur aliquip commodo velit Ut in commodo sunt incididunt et qui nisi consectetur deserunt consectetur qui fugiat non irure fugiat deserunt Excepteur Excepteur commodo et eiusmod minim sint nulla officia occaecat adipisicing enim id enim consequat voluptate incididunt magna in.

<p>Lorem ipsum Nisi minim fugiat sit consectetur aliquip commodo velit Ut in commodo sunt incididunt et qui nisi consectetur deserunt consectetur qui fugiat non irure fugiat deserunt Excepteur Excepteur commodo et eiusmod minim sint nulla officia occaecat adipisicing enim id enim consequat voluptate incididunt magna in.</p>

<hr />

<p>Lorem ipsum Nisi minim fugiat sit consectetur aliquip commodo velit Ut in commodo sunt incididunt et qui nisi consectetur deserunt consectetur qui fugiat non irure fugiat deserunt Excepteur Excepteur commodo et eiusmod minim sint nulla officia occaecat adipisicing enim id enim consequat voluptate incididunt magna in.</p>

DOUBLE

<p>Lorem ipsum Nisi minim fugiat sit consectetur aliquip commodo velit Ut in commodo sunt incididunt et qui nisi consectetur deserunt consectetur qui fugiat non irure fugiat deserunt Excepteur Excepteur commodo et eiusmod minim sint nulla officia occaecat adipisicing enim id enim consequat voluptate incididunt magna in.</p>

<div class="fusion-separator sep-double"></div>

<p>Lorem ipsum Nisi minim fugiat sit consectetur aliquip commodo velit Ut in commodo sunt incididunt et qui nisi consectetur deserunt consectetur qui fugiat non irure fugiat deserunt Excepteur Excepteur commodo et eiusmod minim sint nulla officia occaecat adipisicing enim id enim consequat voluptate incididunt magna in.</p>

Typographynach

SECTIONS HEADERS

BOX STYLE

Tätigkeitsbereiche h1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tätigkeitsbereiche h2

Tätigkeitsbereiche h3

Tätigkeitsbereiche h4

<h1 class="section primary-bg">Tätigkeitsbereiche h1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<h2 class="section primary-bg">Tätigkeitsbereiche h2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<h3 class="section primary-bg">Tätigkeitsbereiche h3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<h4 class="section primary-bg">Tätigkeitsbereiche h4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>