Pattern Library – “Wer liefert was”
Version 7.6.1

Atoms

In chemistry, atoms are the basic building blocks of matter. They have distinct properties and can’t be broken down further without losing their meaning.

Translated to interfaces, atoms are basic tags, such as form labels, inputs or buttons. They also include more abstract elements like color palettes, fonts, and animations.

Atoms are abstract and aren’t often terribly useful on their own, but they provide a useful reference and allow you to see all your global styles laid out at a glance.

BasicsDirect link

ColorsDirect linkRaw Link

Primary Colors

  • Brand bluePantone 289#00193c
  • Brand greenPantone 376#89ba17

Color Shades & Variables

  • BluePantone 289#00193c
  • #00193c
    $blue-darkest
  • #00a3de
    $blue
    Pantone 299 C
  • #7fd1ee
    $blue-light
    Pantone 299 C with 50% white
  • #e5f6fc
    $blue-lightest
    Pantone 299 C with 90% white
  • GreenPantone 376#89ba17
  • #608210
    $green-dark
    with 30% black
  • #89ba17
    $green
  • #dbeab9
    $green-light
    with 70% white
  • RedPantone 192 C#e41648
  • #9f0f32
    $red-darkest
    with 30% black
  • #e41648
    $red
  • #f4a2b6
    $red-light
    with 60% white
  • #fce7ec
    $red-lightest
    with 90% white
  • OrangePantone 144 C#ff8700
  • #ff8700
    $orange-darkest
  • #ffcf99
    $orange
    with 50% white
  • #fff3e5
    $orange-lightest
    with 90% white
  • YellowPantone 395 C#f4e73c
  • #f4e73c
    $yellow
  • #fefdeb
    $yellow-lightest
    with 90% white
  • AquaHEX #00b2a9#00b2a9
  • #00b2a9
    $aqua
  • #33c1ba
    $aqua-light
    with 80% white
  • #66d1ce
    $aqua-lightest
    with 60% white
  • TurquoisePantone 569 C#009399
  • #009399
    $turquoise
  • IrisHEX #606eb2#606eb2
  • #606eb2
    $iris
  • #808bc1
    $iris-light
    with 80% white
  • #a0a8d1
    $iris-lightest
    with 60% white
  • GreyPantone 432 C#47535b
  • #47535b
    $grey-darkest
  • #6c757c
    $grey-darker
    with 20% white
  • #91989d
    $grey-dark
    with 40% white
  • #b5babd
    $grey
    with 60% white
  • #daddde
    $grey-light
    with 80% white
  • #ecedee
    $grey-lighter
    with 90% white
  • #f6f6f7
    $grey-lightest
    with 95% white
  • #000000
    $black
  • #ffffff
    $white

TypographyDirect link

Font FamiliesDirect linkRaw Link

Source Sans Pro Light Web font
Grumpy wizards make toxic brew for the evil Queen and Jack.
Source Sans Pro Regular Web font
Grumpy wizards make toxic brew for the evil Queen and Jack.
Source Sans Pro Semibold Web font
Grumpy wizards make toxic brew for the evil Queen and Jack.
Arial Regular Fallback
Grumpy wizards make toxic brew for the evil Queen and Jack.

Font SizesDirect linkRaw Link

The font size helper classes are provided without any margins or padding.

giga 56px .font-giga
mega 48px .font-mega
kilo 36px .font-kilo
h1 24px .font-h1
h2 20px .font-h2
h3 18px .font-h3
h4 16px .font-h4
h5 14px .font-h5
h6 12px .font-h6
small 13px .font-small
mini 11px .font-mini

HeadingsDirect linkRaw Link

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

<h1> or .h1 Heading secondary
<h2> or .h2 Heading secondary
<h3> or .h3 Heading secondary
<h4> or .h4 Heading secondary
<h5> or .h5 Heading secondary
<h6> or .h6 Heading secondary

Address BlockDirect linkRaw Link

Address should wrapped by an <address> element.

Wer liefert was? GmbH
ABC-Straße 21
20453 Hamburg

Tel: 0123/4567890123
Website: mail@example.org
<address>
  <div>
    <strong>Wer liefert was? GmbH</strong>
  </div>
  <div>
    ABC-Straße 21
  </div>
  <div>
    20453 Hamburg
  </div>
  <br>
  <div>
    Tel: 0123/4567890123
  </div>
  <div>
    Website: <a href="mailto:mail@example.org">mail@example.org</a>
  </div>
</address>

Font WeightsDirect linkRaw Link

Transform a text shape in a specific font-weight.

Class name Style definition
.font-weight-light There is unrest in the Galactic Senate. Several thousand solar systems have declared their int...100
.font-weight-normal There is unrest in the Galactic Senate. Several thousand solar systems have declared their int...100
.font-weight-bold There is unrest in the Galactic Senate. Several thousand solar systems have declared their int...100

Contextual ColorsDirect linkRaw Link

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

Class name Style definition
.text-base As the Separatist Droid Army attempts to flee the besieged capital with their valuable hostage...100
.text-brand As the Separatist Droid Army attempts to flee the besieged capital with their valuable hostage...100
.text-bright As the Separatist Droid Army attempts to flee the besieged capital with their valuable hostage...100
.text-info As the Separatist Droid Army attempts to flee the besieged capital with their valuable hostage...100
.text-muted As the Separatist Droid Army attempts to flee the besieged capital with their valuable hostage...100
.text-primary As the Separatist Droid Army attempts to flee the besieged capital with their valuable hostage...100

Available classes for alignmentsDirect link

For faster mobile-friendly development, use these utility classes for changing the content behaviour by device via media query. Use a single or combination of the available classes for changing the text alignment across viewport breakpoints.

Extra small devices
Phones (≥480px)
Small devices
Tablets (≥768px)
Medium devices
Desktops (≥992px)
Large devices
Desktops (≥1200px)
.text-center-xs-down Visible Hidden Hidden Hidden

Text truncateDirect linkRaw Link

Sometimes a container is smaller than an actual text and you’d like to shorten this text. The pattern library provides the helper class .text-truncate for cases like that. Use a single or combination of the available classes for changing the text truncation across viewport breakpoints.

Extra small devices
Phones (≥480px)
Small devices
Tablets (≥768px)
Medium devices
Desktops (≥992px)
Large devices
Desktops (≥1200px)
.text-truncate Applied Applied Applied Applied
.text-truncate-sm-up Not applied Applied Applied Applied
This is a example text to demonstrate how truncate works. The end of this text should and with “…”
This is a example text to demonstrate how truncate works. The end of this text should and with “…”
This is a example text to demonstrate how truncate works. The end of this text should and with “…”
<div class="row">
  <div class="col-xs-2">
    <div class="text-truncate">
      This is a example text to demonstrate how truncate works. The end of this text should and with “…”
    </div>
  </div>
  <div class="col-xs-4">
    <div class="text-truncate">
      This is a example text to demonstrate how truncate works. The end of this text should and with “…”
    </div>
  </div>
  <div class="col-xs-6">
    <div class="text-truncate">
      This is a example text to demonstrate how truncate works. The end of this text should and with “…”
    </div>
  </div>
</div>

Vertically Center TextDirect linkRaw Link

Vertically centered
Vertically centered
With two lines
Vertically centered
With second
and third line
<div class="row" style="height: 100px">
  <div class="col-xs-4 text-vcenter">
    Vertically centered
  </div>
  <div class="col-xs-4 text-vcenter">
    Vertically centered<br>With two lines
  </div>
  <div class="col-xs-4 text-vcenter">
    Vertically centered<br>With second<br>and third line
  </div>
</div>

ListsDirect link

Checked ListDirect linkRaw Link

  • War! The Republic is crumbling under atta...46
  • In a stunning move, the fiendish droid leader, General Grievous, has swept into the Republic capital and kidnapped Chancellor Palpatine, leader of the Galactic Senate. Senator Amidala, the former Queen of Nabo...215
  • While the Congress of the Republic endlessly debates this alarming chain of events, the Supreme Chancellor has secretly dispatched two Jedi Knights, the guardians of peace and justice in the galaxy, to settle the con...222
<ul class="list-check">
  <li>
    This separatist movement, under the leadership of the mysterious Count Dooku, has made it difficult for the limited number of Jedi...136
  </li>
  <li>
    War! The Republic is crumbling under attacks by the ruthless Sith Lord...75
  </li>
  <li>
    In a stunning move, the fiendish droid leader, General Grievous, has swept into the Republic capital and kidnapped Chancellor Pal...135
  </li>
</ul>

List SizeDirect linkRaw Link

For larger lists use .list-md.

  • Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vote on the critical issue of creating an ARMY OF THE REPUBLIC to assist the overwhelmed Jedi. War! The Republic is crumbling under attacks by the ruthless Sith L...251
  • War! The Republic is crumbling under attacks by the ruthless Sith Lord, Count Dooku. There are heroes on both sides. Evil is everywhere. This separatist movement, under the leadership of the mysterious Count Dooku, has made it difficul...241
  • There is unrest in the Galactic Senate. Several thousand solar systems have declared their intentions to leave the Republic. Turmoil h...140
<ul class="list-check list-md">
  <li>
    Turmoil has engulfed the Galactic Republic. The taxation of trade routes to outlying star systems is in dispute. Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vote on the critical...222
  </li>
  <li>
    While the Congress of the Republic endlessly debates this alarming chain of events, the Supreme Chancellor has secretly dispatched two Jedi Knights, the guardians of peace and justice in the galaxy, to settle the conflict. There is unres...243
  </li>
  <li>
    Hoping to resolve the matter with a blockade of deadly battleships, the greedy Trade Federation has stopped all shipping to the small planet of Naboo. There is unrest in the Galactic Senate. Several thousand sol...217
  </li>
</ul>

Icons Inline ListDirect linkRaw Link

<ul class="list-inline list-inline-slim">
  <li>
    <i aria-hidden="true" class="svg-icon icon-md" role="img"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M27.519 15.83c-.031-.553-.47-.817-.975-.585l-4.25 1.96c-.505.233-.919-.032-.919-.588v-.784c0-.555-.41-.82-.917-.587l-4.251 1.96c-.505.233-.918-.032-.918-.588v-.785c0-.555-.412-.82-.917-.587l-4.252 1.96c-.504.233-.962-.03-1.016-.583l-.856-8.62A1.14 1.14 0 0 0 7.14 7h-.502c-.556 0-1.053.451-1.106 1.005L4.005 24.34a.904.904 0 0 0 .915 1.007h22.127a.945.945 0 0 0 .951-1.01l-.48-8.507zm-13.947 7.632h-3.067a.697.697 0 1 1 0-1.394h3.067a.696.696 0 1 1 0 1.394zm6.086 0h-3.066a.696.696 0 1 1 0-1.394h3.066c.387 0 .698.31.698.697 0 .386-.31.697-.698.697zm6.087 0h-3.066a.696.696 0 1 1 0-1.394h3.066a.697.697 0 1 1 0 1.394z" fill-rule="nonzero"/></svg></i>
  </li>
  <li>
    <i aria-hidden="true" class="svg-icon icon-md" role="img"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M24.11 14.027a2.445 2.445 0 1 1 0-4.89 2.445 2.445 0 0 1 0 4.89zm-15.219 0a2.446 2.446 0 1 1 0-4.89 2.446 2.446 0 0 1 0 4.89zm7.644.083a3.555 3.555 0 1 1 0-7.11 3.555 3.555 0 0 1 0 7.11zm2.958.952l1.783.014c2.37 0 2.37 1.59 2.37 3.552v5.927H9.426v-5.927c0-1.961 0-3.552 2.369-3.552l1.803-.014 2.947 2.483 2.948-2.483zm-11.11 3.566v2.584H4v-4.076c0-1.35 0-2.445 1.63-2.445l1.239-.01 1.755 1.477c-.236.813-.24 1.721-.24 2.47zm18.988-3.938C29 14.69 29 15.785 29 17.133v4.076h-4.313v-2.582c0-.764-.004-1.688-.251-2.509l1.708-1.439 1.227.011z" fill-rule="nonzero"/></svg></i>
  </li>
  <li>
    <i aria-hidden="true" class="svg-icon icon-md" role="img"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M14.013 23.024L8.18 4.608a.14.14 0 0 0-.069-.078.122.122 0 0 0-.103-.012l-1.552.492L6 3.568l1.548-.491c.42-.131.866-.095 1.258.111.392.203.68.546.814.963l6.028 19.033a.152.152 0 0 0 .182.095l7.774-2.396.446 1.445-7.615 2.347.03.087a2.488 2.488 0 1 1-4.745 1.5 2.494 2.494 0 0 1 2.293-3.238zm5.597-12.91c.224.7-.168 1.458-.87 1.682l-3.722 1.183a1.34 1.34 0 0 1-1.679-.872l-.816-2.577c-.22-.701.17-1.459.873-1.683l3.722-1.183a1.341 1.341 0 0 1 1.68.872l.812 2.577zm5.581 7.648c.224.7-.17 1.458-.87 1.68l-6.757 2.138a1.343 1.343 0 0 1-1.68-.87l-1.602-5.053a1.346 1.346 0 0 1 .873-1.681l6.755-2.14a1.34 1.34 0 0 1 1.678.872l1.603 5.054zm-11.1 8.953a1.203 1.203 0 1 0 .001-2.405 1.203 1.203 0 0 0-.002 2.405z" fill-rule="nonzero"/></svg></i>
  </li>
  <li>
    <i aria-hidden="true" class="svg-icon icon-md" role="img"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M24.594 24.035a2.077 2.077 0 1 1 0-4.154 2.077 2.077 0 0 1 0 4.154zM17.998 8c.548 0 .996.45.997 1v11.412c0 .549-.448 1-.997 1h-6.13a3.005 3.005 0 0 0-2.95-2.456 3.004 3.004 0 0 0-2.948 2.455H5c-.55 0-1-.45-1-.999V9c0-.55.45-1 1-1h12.998zM8.917 24.035a2.077 2.077 0 1 1 0-4.154 2.077 2.077 0 0 1 0 4.154zm19.469-8.013c.338.432.613 1.235.614 1.783v2.605c0 .551-.45 1.001-.998 1.001h-.459a3.005 3.005 0 0 0-2.95-2.455 3.007 3.007 0 0 0-2.948 2.455h-.686c-.549 0-.998-.45-.998-1.001v-8.474c0-.548.45-.998.998-.998h2.465c.547 0 1.274.352 1.611.787l3.35 4.297zm-7.229-.273h5.497l-2.561-3.288c-.11-.138-.492-.327-.67-.327h-2.266v3.615z" fill-rule="nonzero"/></svg></i>
  </li>
</ul>

Splitted Inline ListDirect linkRaw Link

  • In a ...9
  • Senat...9
  • This ...9
  • As th...9
  • While...9
  • While...9
<div class="row">
  <div class="col-sm-6">
    <ul class="list-inline-splitted">
      <li>
        As th...9
      </li>
      <li>
        Hopin...9
      </li>
      <li>
        War! ...9
      </li>
    </ul>
  </div>
  <div class="col-sm-6">
    <ul class="list-inline-splitted pull-right">
      <li>
        Hopin...9
      </li>
      <li>
        Turmo...9
      </li>
      <li>
        Turmo...9
      </li>
    </ul>
  </div>
</div>

List groupDirect linkRaw Link

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul class="list-group">
  <li class="list-group-item">
    Cras justo odio
  </li>
  <li class="list-group-item">
    Dapibus ac facilisis in
  </li>
  <li class="list-group-item">
    Morbi leo risus
  </li>
  <li class="list-group-item">
    Porta ac consectetur ac
  </li>
  <li class="list-group-item">
    Vestibulum at eros
  </li>
</ul>

List group in panel contextDirect linkRaw Link

<div class="row">
  <div class="col-md-6">
    <div class="panel">
      <div class="panel-body">
        <div class="list-group">
          <a class="list-group-item" href="javascript:void()">Cras justo odio</a><a class="list-group-item" href="javascript:void()">Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vote on the critical issue of creating an ARMY OF THE REPUBLIC to assist the overwhelmed Jedi. Hoping to resolv...200</a><a class="list-group-item" href="javascript:void()">Morbi leo risus</a><a class="list-group-item active" href="javascript:void()">Morbi leo risus</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="panel">
      <div class="panel-body">
        <div class="list-group">
          <div class="list-group-item">
            Cras justo odio
          </div>
          <div class="list-group-item">
            Dapibus ac facilisis in
          </div>
          <div class="list-group-item">
            Vestibulum at eros
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

List group large-themeDirect linkRaw Link

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros
Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros
<div class="row">
  <div class="col-md-6">
    <div class="list-group list-group--large">
      <div class="list-group-item">
        Cras justo odio
      </div>
      <div class="list-group-item">
        Dapibus ac facilisis in
      </div>
      <div class="list-group-item">
        Vestibulum at eros
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="panel">
      <div class="panel-body">
        <div class="list-group list-group--large">
          <div class="list-group-item">
            Cras justo odio
          </div>
          <div class="list-group-item">
            Dapibus ac facilisis in
          </div>
          <div class="list-group-item">
            Vestibulum at eros
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

IconsDirect link

We distinguish between icons and symbols. Symbols are image based resources and can be of different sizes. Icons are meant to all fit together.

Icons with SVGDirect linkRaw Link

The wlw_styleguide gem provides an icon_tag rails helper to render SVG icons. You have to set one of the available shape names.

General Icons

  • arrow-down
  • arrow-left
  • arrow-right
  • arrow-up
  • arrow-downgrade
  • arrow-upgrade
  • bookmark
  • bulb
  • chevron-left
  • chevron-right
  • clock
  • download
  • earphone
  • earphone-alt
  • email
  • email-alt
  • employees
  • envelope
  • eye
  • filter
  • home
  • link
  • map-marker
  • map-marker-alt
  • ok
  • ok-sign
  • pencil
  • pdf
  • play-sign
  • plus
  • print
  • profile
  • question-sign
  • search
  • share
  • star-bookmark
  • trash
  • user
  • users
  • upload
  • website

Specific Web/Product Icons

Icons which are used in the company context.

  • article-block
  • catalog
  • company-catalog
  • company-categories
  • company-info
  • company-location
  • company-logo
  • company-pictures
  • company-profile
  • company-references
  • gauge
  • product

Distribution Icons

Represents the distribution area of a supplier.

  • regional
  • national
  • europe
  • international

Category Icons

Represents the type of a supplier.

  • manufacturer
  • distributor
  • service-provider
  • wholesaler

Sizes

Base sizes Variable name
icon-xl
icon-lg
icon-md
icon-sm
icon-xs

Colors

The icon assumes the current font color by default. Use one of the color helper classes to override this.

Icons with web font DeprecatedDirect linkRaw Link

The web font which provides the icons is generated from SVG files via a GruntJS task.

The class selector is build with the prefix icon- and the explicit name. We recommend to use an extra tag to represent the icon. Because you have more control with an additional icon e.g.<i class="icon-search icon"></i>.

Available Icons

  • icon-arrow-down
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-downgrade
  • icon-arrow-upgrade
  • icon-bookmark
  • icon-bulb
  • icon-chevron-left
  • icon-chevron-right
  • icon-clock
  • icon-download
  • icon-earphone
  • icon-earphone-alt
  • icon-email
  • icon-email-alt
  • icon-employees
  • icon-envelope
  • icon-eye
  • icon-filter
  • icon-home
  • icon-link
  • icon-map-marker
  • icon-map-marker-alt
  • icon-ok
  • icon-ok-sign
  • icon-pencil
  • icon-pdf
  • icon-play-sign
  • icon-plus
  • icon-print
  • icon-profile
  • icon-question-sign
  • icon-search
  • icon-share
  • icon-star-bookmark
  • icon-trash
  • icon-user
  • icon-users
  • icon-upload
  • icon-website

Distribution Icons

  • icon-regional
  • icon-national
  • icon-europe
  • icon-international

Category Icons

  • icon-manufacturer
  • icon-distributor
  • icon-service-provider
  • icon-wholesaler

Symbols – graphicsDirect linkRaw Link

We distinguish between icons and symbols. Symbols are image based resources and can be of different sizes. Icons are meant to all fit together.

  • symbol-facebook
  • symbol-googleplus
  • symbol-linkedin
  • symbol-pinterest
  • symbol-twitter
  • symbol-xing
  • symbol-youtube

ShapesDirect linkRaw Link

Shapes are made to be used in combination with SVG icons.

The pattern library provides circles in several colors.

UX Usage: Use them in content-oriented contexts, such as marketing / sales proof points, dashboards and so on.

<div class="row">
  <div class="col-sm-3">
    <i aria-hidden="true" class="svg-icon icon-sm circle" role="img"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M16 12h-4c-1.65 0-3 .9-3 2v2h10v-2c0-1.1-1.35-2-3-2zm-5-3a3 3 0 1 1 6 0 3 3 0 0 1-6 0zM9 22h14v2H9v-2zm0-4h14v2H9v-2zm18 10H5V4h22v24zm1-28H4C2.35 0 1 1.35 1 3v26c0 1.65 1.35 3 3 3h24c1.65 0 3-1.35 3-3V3c0-1.65-1.35-3-3-3z" fill-rule="evenodd"/></svg></i>
  </div>
  <div class="col-sm-3">
    <i aria-hidden="true" class="svg-icon icon-sm circle circle-info" role="img"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M16 12h-4c-1.65 0-3 .9-3 2v2h10v-2c0-1.1-1.35-2-3-2zm-5-3a3 3 0 1 1 6 0 3 3 0 0 1-6 0zM9 22h14v2H9v-2zm0-4h14v2H9v-2zm18 10H5V4h22v24zm1-28H4C2.35 0 1 1.35 1 3v26c0 1.65 1.35 3 3 3h24c1.65 0 3-1.35 3-3V3c0-1.65-1.35-3-3-3z" fill-rule="evenodd"/></svg></i>
  </div>
  <div class="col-sm-3">
    <i aria-hidden="true" class="svg-icon icon-sm circle circle-green" role="img"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M16 12h-4c-1.65 0-3 .9-3 2v2h10v-2c0-1.1-1.35-2-3-2zm-5-3a3 3 0 1 1 6 0 3 3 0 0 1-6 0zM9 22h14v2H9v-2zm0-4h14v2H9v-2zm18 10H5V4h22v24zm1-28H4C2.35 0 1 1.35 1 3v26c0 1.65 1.35 3 3 3h24c1.65 0 3-1.35 3-3V3c0-1.65-1.35-3-3-3z" fill-rule="evenodd"/></svg></i>
  </div>
  <div class="col-sm-3">
    <i aria-hidden="true" class="svg-icon icon-sm circle circle-orange" role="img"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M16 12h-4c-1.65 0-3 .9-3 2v2h10v-2c0-1.1-1.35-2-3-2zm-5-3a3 3 0 1 1 6 0 3 3 0 0 1-6 0zM9 22h14v2H9v-2zm0-4h14v2H9v-2zm18 10H5V4h22v24zm1-28H4C2.35 0 1 1.35 1 3v26c0 1.65 1.35 3 3 3h24c1.65 0 3-1.35 3-3V3c0-1.65-1.35-3-3-3z" fill-rule="evenodd"/></svg></i>
  </div>
</div>

ImagesDirect link

Image placeholderDirect linkRaw Link

Image placeholder are used as fallback media when no image given.

Name Media Ratio Size recommendation
company_logo Company logo.aab40744 4x3 144x108, 72x54
company_image Company image.adca01f3 1x1 500x500, 120x120, 80x80
product Product.2f70de1a 4x3 144x108, 72x54

ButtonsDirect link

Usage

A button can contain a simple text and/or an icon. Buttons should clearly communitcate which action is behind them.

Types

We distinguish between primary, default and info buttons. The primary button has a stronger visual expression, in order to emphasize its priority.

Position

The button with the highest priority is always located on the right, buttons with lower priority are to the left next to the high priority button. Avoid using two primary buttons in the same context.

Space

For a better indentification of interaction elements there should be a suitable amount of space between them and other elements.

TypesDirect linkRaw Link

We provide 4 button types. We prefer the default and primary variants. Please avoid to use the button type info.

<button class="btn btn-default" type="button">default</button>  <button class="btn btn-primary" type="button">primary</button>  <button class="btn btn-info" type="button">info</button>  <button class="btn btn-info-outlined" type="button">info-outlined</button>  

Buttons with iconsDirect linkRaw Link

Buttons can handle icons as child.

xs

sm

md

lg

<h4>
  xs
</h4>
<div class="btn-group">
  <button class="btn btn-default btn-xs"><i aria-hidden="true" class="svg-icon icon-xs" role="img"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M30 6.375a4.366 4.366 0 0 1-1.75 3.5L12.5 25.625 6.375 19.5l15.75-15.75A4.375 4.375 0 0 1 30 6.375zM2 30l2.625-8.75 6.125 6.125L2 30z" fill-rule="nonzero"/></svg></i></button><button class="btn btn-default btn-xs">Label</button><button class="btn btn-default btn-xs"><i aria-hidden="true" class="svg-icon icon-xs" role="img"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M24.927 22.114l5.136 4.973c.791.77.81 2.059.04 2.853-.395.403-.944.57-1.467.57-.502 0-.995-.152-1.386-.529l-5.136-5.054a13.774 13.774 0 0 0 2.813-2.813zM14.004 2.157c6.484 0 11.74 5.256 11.74 11.74 0 6.482-5.256 11.738-11.74 11.738-6.483 0-11.739-5.256-11.739-11.739 0-6.483 5.256-11.739 11.74-11.739zm-.78 4.402c-3.699.376-6.557 3.538-6.557 7.337a7.337 7.337 0 1 0 7.337-7.337c-.253 0-.533-.025-.78 0z" fill-rule="nonzero"/></svg></i>Label</button><button class="btn btn-default btn-xs"><i aria-hidden="true" class="svg-icon icon-xs" role="img"><svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M5 10v20c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V10H5zm6 18H9V14h2v14zm4 0h-2V14h2v14zm4 0h-2V14h2v14zm4 0h-2V14h2v14zM27.5 4H21V1.5c0-.8-.7-1.5-1.5-1.5h-7c-.8 0-1.5.7-1.5 1.5V4H4.5C3.7 4 3 4.7 3 5.5V8h26V5.5c0-.8-.7-1.5-1.5-1.5zM19 4h-6V2h6v2z"/></svg></i></button>
</div><h4>
  sm
</h4>
<div class="btn-group">
  <button class="btn btn-default btn-sm"><i aria-hidden="true" class="svg-icon icon-sm" role="img"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M30 6.375a4.366 4.366 0 0 1-1.75 3.5L12.5 25.625 6.375 19.5l15.75-15.75A4.375 4.375 0 0 1 30 6.375zM2 30l2.625-8.75 6.125 6.125L2 30z" fill-rule="nonzero"/></svg></i></button><button class="btn btn-default btn-sm">Label</button><button class="btn btn-default btn-sm"><i aria-hidden="true" class="svg-icon icon-sm" role="img"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M24.927 22.114l5.136 4.973c.791.77.81 2.059.04 2.853-.395.403-.944.57-1.467.57-.502 0-.995-.152-1.386-.529l-5.136-5.054a13.774 13.774 0 0 0 2.813-2.813zM14.004 2.157c6.484 0 11.74 5.256 11.74 11.74 0 6.482-5.256 11.738-11.74 11.738-6.483 0-11.739-5.256-11.739-11.739 0-6.483 5.256-11.739 11.74-11.739zm-.78 4.402c-3.699.376-6.557 3.538-6.557 7.337a7.337 7.337 0 1 0 7.337-7.337c-.253 0-.533-.025-.78 0z" fill-rule="nonzero"/></svg></i>Label</button><button class="btn btn-default btn-sm"><i aria-hidden="true" class="svg-icon icon-sm" role="img"><svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M5 10v20c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V10H5zm6 18H9V14h2v14zm4 0h-2V14h2v14zm4 0h-2V14h2v14zm4 0h-2V14h2v14zM27.5 4H21V1.5c0-.8-.7-1.5-1.5-1.5h-7c-.8 0-1.5.7-1.5 1.5V4H4.5C3.7 4 3 4.7 3 5.5V8h26V5.5c0-.8-.7-1.5-1.5-1.5zM19 4h-6V2h6v2z"/></svg></i></button>
</div><h4>
  md
</h4>
<div class="btn-group">
  <button class="btn btn-default btn-md"><i aria-hidden="true" class="svg-icon icon-sm" role="img"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M30 6.375a4.366 4.366 0 0 1-1.75 3.5L12.5 25.625 6.375 19.5l15.75-15.75A4.375 4.375 0 0 1 30 6.375zM2 30l2.625-8.75 6.125 6.125L2 30z" fill-rule="nonzero"/></svg></i></button><button class="btn btn-default btn-md">Label</button><button class="btn btn-default btn-md"><i aria-hidden="true" class="svg-icon icon-sm" role="img"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M24.927 22.114l5.136 4.973c.791.77.81 2.059.04 2.853-.395.403-.944.57-1.467.57-.502 0-.995-.152-1.386-.529l-5.136-5.054a13.774 13.774 0 0 0 2.813-2.813zM14.004 2.157c6.484 0 11.74 5.256 11.74 11.74 0 6.482-5.256 11.738-11.74 11.738-6.483 0-11.739-5.256-11.739-11.739 0-6.483 5.256-11.739 11.74-11.739zm-.78 4.402c-3.699.376-6.557 3.538-6.557 7.337a7.337 7.337 0 1 0 7.337-7.337c-.253 0-.533-.025-.78 0z" fill-rule="nonzero"/></svg></i>Label</button><button class="btn btn-default btn-md"><i aria-hidden="true" class="svg-icon icon-sm" role="img"><svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M5 10v20c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V10H5zm6 18H9V14h2v14zm4 0h-2V14h2v14zm4 0h-2V14h2v14zm4 0h-2V14h2v14zM27.5 4H21V1.5c0-.8-.7-1.5-1.5-1.5h-7c-.8 0-1.5.7-1.5 1.5V4H4.5C3.7 4 3 4.7 3 5.5V8h26V5.5c0-.8-.7-1.5-1.5-1.5zM19 4h-6V2h6v2z"/></svg></i></button>
</div><h4>
  lg
</h4>
<div class="btn-group">
  <button class="btn btn-default btn-lg"><i aria-hidden="true" class="svg-icon icon-sm" role="img"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M30 6.375a4.366 4.366 0 0 1-1.75 3.5L12.5 25.625 6.375 19.5l15.75-15.75A4.375 4.375 0 0 1 30 6.375zM2 30l2.625-8.75 6.125 6.125L2 30z" fill-rule="nonzero"/></svg></i></button><button class="btn btn-default btn-lg">Label</button><button class="btn btn-default btn-lg"><i aria-hidden="true" class="svg-icon icon-sm" role="img"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M24.927 22.114l5.136 4.973c.791.77.81 2.059.04 2.853-.395.403-.944.57-1.467.57-.502 0-.995-.152-1.386-.529l-5.136-5.054a13.774 13.774 0 0 0 2.813-2.813zM14.004 2.157c6.484 0 11.74 5.256 11.74 11.74 0 6.482-5.256 11.738-11.74 11.738-6.483 0-11.739-5.256-11.739-11.739 0-6.483 5.256-11.739 11.74-11.739zm-.78 4.402c-3.699.376-6.557 3.538-6.557 7.337a7.337 7.337 0 1 0 7.337-7.337c-.253 0-.533-.025-.78 0z" fill-rule="nonzero"/></svg></i>Label</button><button class="btn btn-default btn-lg"><i aria-hidden="true" class="svg-icon icon-sm" role="img"><svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M5 10v20c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V10H5zm6 18H9V14h2v14zm4 0h-2V14h2v14zm4 0h-2V14h2v14zm4 0h-2V14h2v14zM27.5 4H21V1.5c0-.8-.7-1.5-1.5-1.5h-7c-.8 0-1.5.7-1.5 1.5V4H4.5C3.7 4 3 4.7 3 5.5V8h26V5.5c0-.8-.7-1.5-1.5-1.5zM19 4h-6V2h6v2z"/></svg></i></button>
</div>

Button Types and IconsDirect linkRaw Link

Icons assume the text color of the respective button type.

<button class="btn btn-default"><i aria-hidden="true" class="svg-icon icon-sm" role="img"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M24.927 22.114l5.136 4.973c.791.77.81 2.059.04 2.853-.395.403-.944.57-1.467.57-.502 0-.995-.152-1.386-.529l-5.136-5.054a13.774 13.774 0 0 0 2.813-2.813zM14.004 2.157c6.484 0 11.74 5.256 11.74 11.74 0 6.482-5.256 11.738-11.74 11.738-6.483 0-11.739-5.256-11.739-11.739 0-6.483 5.256-11.739 11.74-11.739zm-.78 4.402c-3.699.376-6.557 3.538-6.557 7.337a7.337 7.337 0 1 0 7.337-7.337c-.253 0-.533-.025-.78 0z" fill-rule="nonzero"/></svg></i></button> <button class="btn btn-primary"><i aria-hidden="true" class="svg-icon icon-sm" role="img"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M24.927 22.114l5.136 4.973c.791.77.81 2.059.04 2.853-.395.403-.944.57-1.467.57-.502 0-.995-.152-1.386-.529l-5.136-5.054a13.774 13.774 0 0 0 2.813-2.813zM14.004 2.157c6.484 0 11.74 5.256 11.74 11.74 0 6.482-5.256 11.738-11.74 11.738-6.483 0-11.739-5.256-11.739-11.739 0-6.483 5.256-11.739 11.74-11.739zm-.78 4.402c-3.699.376-6.557 3.538-6.557 7.337a7.337 7.337 0 1 0 7.337-7.337c-.253 0-.533-.025-.78 0z" fill-rule="nonzero"/></svg></i></button> <button class="btn btn-info"><i aria-hidden="true" class="svg-icon icon-sm" role="img"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M24.927 22.114l5.136 4.973c.791.77.81 2.059.04 2.853-.395.403-.944.57-1.467.57-.502 0-.995-.152-1.386-.529l-5.136-5.054a13.774 13.774 0 0 0 2.813-2.813zM14.004 2.157c6.484 0 11.74 5.256 11.74 11.74 0 6.482-5.256 11.738-11.74 11.738-6.483 0-11.739-5.256-11.739-11.739 0-6.483 5.256-11.739 11.74-11.739zm-.78 4.402c-3.699.376-6.557 3.538-6.557 7.337a7.337 7.337 0 1 0 7.337-7.337c-.253 0-.533-.025-.78 0z" fill-rule="nonzero"/></svg></i></button> <button class="btn btn-info-outlined"><i aria-hidden="true" class="svg-icon icon-sm" role="img"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M24.927 22.114l5.136 4.973c.791.77.81 2.059.04 2.853-.395.403-.944.57-1.467.57-.502 0-.995-.152-1.386-.529l-5.136-5.054a13.774 13.774 0 0 0 2.813-2.813zM14.004 2.157c6.484 0 11.74 5.256 11.74 11.74 0 6.482-5.256 11.738-11.74 11.738-6.483 0-11.739-5.256-11.739-11.739 0-6.483 5.256-11.739 11.74-11.739zm-.78 4.402c-3.699.376-6.557 3.538-6.557 7.337a7.337 7.337 0 1 0 7.337-7.337c-.253 0-.533-.025-.78 0z" fill-rule="nonzero"/></svg></i></button>

Button StatesDirect linkRaw Link

Buttons could have a class .is-pending where the button label changes.

<!--default--><button class="btn btn-primary">
  <div class="btn-inner-default">
    Mehr Produkte anzeigen
  </div>
  <div class="btn-inner-pending">
    Produkte werden geladen
  </div>
</button><!--is-pending--> <button class="btn btn-primary is-pending" disabled="true">
  <div class="btn-inner-default">
    Mehr Produkte anzeigen
  </div>
  <div class="btn-inner-pending">
    Produkte werden geladen
  </div>
</button><!--demo--> <button class="btn btn-primary" id="docs-button-state-is-pending-demo">
  <div class="btn-inner-default">
    Demo (click me)
  </div>
  <div class="btn-inner-pending">
    Loading ...
  </div>
</button>

Toggle ButtonDirect linkRaw Link

Button that displays a state and displays an action on hover. On :hover it teases it’s slide effect.

<button class="btn-toggle fn-btn-toggle">
  <div class="btn-toggle-inner">
    <div class="btn-toggle-inner-active">
      Online
    </div>
    <div class="btn-toggle-inner-default">
      Offline
    </div>
  </div>
</button>

OthersDirect link

Labels and differents font sizesDirect linkRaw Link

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
<h1>Example heading <span class='label label'>New</span></h1><h2>Example heading <span class='label label'>New</span></h2><h3>Example heading <span class='label label'>New</span></h3><h4>Example heading <span class='label label'>New</span></h4><h5>Example heading <span class='label label'>New</span></h5><h6>Example heading <span class='label label'>New</span></h6>

Labels variantsDirect linkRaw Link

A label can have different variants

defaultinfodefault urgentinfo urgent
<span class="label">default</span><span class="label label--info">info</span><span class="label label--urgent">default urgent</span><span class="label label--urgent label--info">info urgent</span>

Labels as tag cloudDirect linkRaw Link

this is a list of words to show how a label words when it is used multiple times
<div class="row">
  <div class="col-sm-3 text-center">
    <span class="label">this</span>
    <span class="label">is</span>
    <span class="label">a</span>
    <span class="label">list</span>
    <span class="label">of</span>
    <span class="label">words</span>
    <span class="label">to</span>
    <span class="label">show</span>
    <span class="label">how</span>
    <span class="label">a</span>
    <span class="label">label</span>
    <span class="label">words</span>
    <span class="label">when</span>
    <span class="label">it</span>
    <span class="label">is</span>
    <span class="label">used</span>
    <span class="label">multiple</span>
    <span class="label">times</span>
  </div>
</div>

BadgesDirect linkRaw Link

Inbox 42

<a href="#">Inbox <span class="badge">42</span></a><br><br><button class="btn btn-primary" href="#">Message <span class="badge">42</span></button>

Background ColorsDirect linkRaw Link

Use these helper classes to change an elements background color. You can use it for any element.

Blue.background-blue
Green.background-green
Red.background-red
Grey.background-grey
Light Grey.background-grey-light

ShadowsDirect linkRaw Link

There are 3 main different types of shadow, each corresponding to the depth of the element’s position above the main surface. A fourth type is a used to make visible interaction.

Type Usages
$box-shadow-deep Highest level for elements such as Modals or other dialog prompts
$box-shadow-shallow Medium level for elements such as Dropdowns, auto completion etc.
$box-shadow-flat Lowest level for elements such as Alerts
$box-shadow-hover Use this only for interaction elements like a clickable panel

Static content

$box-shadow-deep
$box-shadow-shallow
$box-shadow-flat

Content with interaction

$box-shadow-hover
<div class="row">
  <div class="col-sm-6">
    <p>
      Static content
    </p>
    <div class="docs-shadow-square-overlaping">
      <div class="docs-shadow-square docs-shadow-deep">
        <code>$box-shadow-deep</code>
      </div>
      <div class="docs-shadow-square docs-shadow-shallow">
        <code>$box-shadow-shallow</code>
      </div>
      <div class="docs-shadow-square docs-shadow-flat">
        <code>$box-shadow-flat</code>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <p>
      Content with interaction
    </p>
    <div class="docs-shadow-square docs-shadow-hover">
      <code>$box-shadow-hover</code>
    </div>
  </div>
</div>

Scaffolding helperDirect link

Main containerDirect linkRaw Link

The .main-container selector should help to control the vertical offsets of the main content of the page.

This selector should only be used on the top level of the page.

body
  .head
  .body
     …
     .main-container
     …
  .foot

You can use this selector several times on the this level.

The .main-container selector is necessary because of our general page skeleton.

Single usage

header
Main page content
footer

Multiple usage

header
Main page content
Main page content
footer
<div class="row">
  <div class="col-sm-6">
    <p>
      <strong>Single usage</strong>
    </p>
    <div class="docs-example-highlight-box is-muted">
      header
    </div>
    <div class="body docs-example-highlight-box is-muted">
      <div class="main-container docs-example-highlight-box">
        Main page content
      </div>
    </div>
    <div class="docs-example-highlight-box is-muted">
      footer
    </div>
  </div>
  <div class="col-sm-6">
    <p>
      <strong>Multiple usage</strong>
    </p>
    <div class="docs-example-highlight-box is-muted">
      header
    </div>
    <div class="body docs-example-highlight-box is-muted">
      <div class="main-container docs-example-highlight-box">
        Main page content
      </div>
      <div class="main-container docs-example-highlight-box">
        Main page content
      </div>
    </div>
    <div class="docs-example-highlight-box is-muted">
      footer
    </div>
  </div>
</div>

Molecules

In chemistry, molecules are groups of atoms bonded together, which take on new properties as a result.

In interfaces, molecules are groups of elements that function together as a unit. For example, a form label, search input, and button atom can combine them together to form a search form molecule.

Building up from atoms to molecules encourages a “do one thing and do it well” mentality, and encourages creating reusable interface patterns.

NavigationDirect link

BreadcrumbsDirect linkRaw Link

The breadcrumbs allow users to identify their current location within the system by providing a clickable trail of proceeding pages to navigate by.

The wlw_markup gem provides a helper to render a breadcrumb navigation.

<ol class="breadcrumb">
  <li>
    <a href="#">
      <figure class="svg-icon icon-xs">
        <svg viewBox="0 0 32 32"><path d="M32 18.451L16 6.031 0 18.451v-5.064L16 .967l16 12.42zM28 18v12h-8v-8h-8v8H4V18l12-9z"></path></svg>
      </figure>
      Home</a>
  </li>
  <li>
    <a href="#">Library</a>
  </li>
  <li class="active">
    Data
  </li>
</ol>

TabsDirect linkRaw Link

We currently provide two different tab themes. It is recommended to use the version with a line at the bottom which is provided with the .nav-tabs-flat selector.
The other pattern is deprecated and should not be used.

Bootstrap difference

Unlike the bootstrap variant we use additional selectors, this prevent a deep nesting of styles .nav-tab-item and .nav-tab-action

Flat tabs – standalone

Deutschland Tab content
Österreich Tab content
Schweiz Tab content

Flat tabs with offset – standalone

Deutschland Tab content
Österreich Tab content
Schweiz Tab content

Flat tabs integration into panels

Deutschland Tab content
Österreich Tab content
Schweiz Tab content

Flat tabs with offset integration into panels

Deutschland Tab content
Österreich Tab content
Schweiz Tab content

Default tabs deprecated

Deutschland Tab content
Österreich Tab content
Schweiz Tab content
<p class="docs-h4">
  Flat tabs – standalone
</p>
<div class="fn-docs-tabs">
  <ul class="nav nav-tabs nav-tabs--flat" role="tablist">
    <li class="nav-tabs__item">
      <a class="nav-tabs__action" data-toggle="tab" href="#ex-standalone-tab-0">Deutschland</a>
    </li>
    <li class="nav-tabs__item">
      <a class="nav-tabs__action" data-toggle="tab" href="#ex-standalone-tab-1">Österreich</a>
    </li>
    <li class="nav-tabs__item">
      <a class="nav-tabs__action" data-toggle="tab" href="#ex-standalone-tab-2">Schweiz</a>
    </li>
    <li class="nav-tabs__item disabled">
      <a class="nav-tabs__action" data-toggle="tab">Disabled</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane" id="ex-standalone-tab-0">
      <strong>Deutschland</strong> Tab content
    </div>
    <div class="tab-pane" id="ex-standalone-tab-1">
      <strong>Österreich</strong> Tab content
    </div>
    <div class="tab-pane" id="ex-standalone-tab-2">
      <strong>Schweiz</strong> Tab content
    </div>
  </div>
</div>
<br>
<p class="docs-h4">
  Flat tabs with offset – standalone
</p>
<div class="fn-docs-tabs">
  <div class="row nav-tabs--flat__row">
    <ul class="col-md-8 col-md-offset-4 nav nav-tabs nav-tabs--flat" role="tablist">
      <li class="nav-tabs__item">
        <a class="nav-tabs__action" data-toggle="tab" href="#ex-standalone-tab-offset-0">Deutschland</a>
      </li>
      <li class="nav-tabs__item">
        <a class="nav-tabs__action" data-toggle="tab" href="#ex-standalone-tab-offset-1">Österreich</a>
      </li>
      <li class="nav-tabs__item">
        <a class="nav-tabs__action" data-toggle="tab" href="#ex-standalone-tab-offset-2">Schweiz</a>
      </li>
      <li class="nav-tabs__item disabled">
        <a class="nav-tabs__action" data-toggle="tab">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="tab-content">
    <div class="tab-pane" id="ex-standalone-tab-offset-0">
      <div class="row">
        <div class="col-md-8 col-md-offset-4">
          <strong>Deutschland</strong> Tab content
        </div>
      </div>
    </div>
    <div class="tab-pane" id="ex-standalone-tab-offset-1">
      <div class="row">
        <div class="col-md-8 col-md-offset-4">
          <strong>Österreich</strong> Tab content
        </div>
      </div>
    </div>
    <div class="tab-pane" id="ex-standalone-tab-offset-2">
      <div class="row">
        <div class="col-md-8 col-md-offset-4">
          <strong>Schweiz</strong> Tab content
        </div>
      </div>
    </div>
  </div>
</div>
<br>
<p class="docs-h4">
  Flat tabs integration into panels
</p>
<div class="panel fn-docs-tabs">
  <div class="panel-body">
    <ul class="nav nav-tabs nav-tabs--flat" role="tablist">
      <li class="nav-tabs__item">
        <a class="nav-tabs__action" data-toggle="tab" href="#ex-panel-tab-0">Deutschland</a>
      </li>
      <li class="nav-tabs__item">
        <a class="nav-tabs__action" data-toggle="tab" href="#ex-panel-tab-1">Österreich</a>
      </li>
      <li class="nav-tabs__item">
        <a class="nav-tabs__action" data-toggle="tab" href="#ex-panel-tab-2">Schweiz</a>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane" id="ex-panel-tab-0">
        <strong>Deutschland</strong> Tab content
      </div>
      <div class="tab-pane" id="ex-panel-tab-1">
        <strong>Österreich</strong> Tab content
      </div>
      <div class="tab-pane" id="ex-panel-tab-2">
        <strong>Schweiz</strong> Tab content
      </div>
    </div>
  </div>
  <div class="panel-footer">
    This is the footer
  </div>
</div>
<br>
<p class="docs-h4">
  Flat tabs with offset integration into panels
</p>
<div class="panel fn-docs-tabs">
  <div class="panel-body">
    <div class="row nav-tabs--flat__row">
      <ul class="col-md-8 col-md-offset-4 nav nav-tabs nav-tabs--flat" role="tablist">
        <li class="nav-tabs__item">
          <a class="nav-tabs__action" data-toggle="tab" href="#ex-panel-tab-offset-0">Deutschland</a>
        </li>
        <li class="nav-tabs__item">
          <a class="nav-tabs__action" data-toggle="tab" href="#ex-panel-tab-offset-1">Österreich</a>
        </li>
        <li class="nav-tabs__item">
          <a class="nav-tabs__action" data-toggle="tab" href="#ex-panel-tab-offset-2">Schweiz</a>
        </li>
      </ul>
    </div>
    <div class="tab-content">
      <div class="tab-pane" id="ex-panel-tab-offset-0">
        <div class="row">
          <div class="col-md-8 col-md-offset-4">
            <strong>Deutschland</strong> Tab content
          </div>
        </div>
      </div>
      <div class="tab-pane" id="ex-panel-tab-offset-1">
        <div class="row">
          <div class="col-md-8 col-md-offset-4">
            <strong>Österreich</strong> Tab content
          </div>
        </div>
      </div>
      <div class="tab-pane" id="ex-panel-tab-offset-2">
        <div class="row">
          <div class="col-md-8 col-md-offset-4">
            <strong>Schweiz</strong> Tab content
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="panel-footer">
    This is the footer
  </div>
</div>
<br>
<p class="docs-h4">
  Default tabs <small class="badge">deprecated</small>
</p>
<fn-docs-tabs>
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-tab-item">
      <a class="nav-tab-action" data-toggle="tab" href="#ex-deprected-tab-0">Deutschland</a>
    </li>
    <li class="nav-tab-item">
      <a class="nav-tab-action" data-toggle="tab" href="#ex-deprected-tab-1">Österreich</a>
    </li>
    <li class="nav-tab-item">
      <a class="nav-tab-action" data-toggle="tab" href="#ex-deprected-tab-2">Schweiz</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane" id="ex-deprected-tab-0">
      <strong>Deutschland</strong> Tab content
    </div>
    <div class="tab-pane" id="ex-deprected-tab-1">
      <strong>Österreich</strong> Tab content
    </div>
    <div class="tab-pane" id="ex-deprected-tab-2">
      <strong>Schweiz</strong> Tab content
    </div>
  </div>
</fn-docs-tabs>

PaginationDirect linkRaw Link

Pagination divides content up between pages and allows users to skip between pages or go in order through the content.

Gem recommendation

The pattern library supports the kaminari gem to render a pagination.
Please add it to your Gemfile, if you want to use it. The paginate(collection) call returns html markup as in example.

<ul class="pagination">
  <li>
    <a href="javascript:void()"> Previous</a>
  </li>
  <li class="hidden-xs">
    <a href="javascript:void()"> 1</a>
  </li>
  <li class="disabled hidden-xs">
    <a href="javascript:void()"> ...</a>
  </li>
  <li class="hidden-xs">
    <a href="javascript:void()"> 3</a>
  </li>
  <li class="hidden-xs">
    <a href="javascript:void()"> 4</a>
  </li>
  <li class="hidden-xs">
    <a href="javascript:void()"> 5</a>
  </li>
  <li class="hidden-xs active">
    <a href="javascript:void()"> 6</a>
  </li>
  <li class="hidden-xs">
    <a href="javascript:void()"> 7</a>
  </li>
  <li class="hidden-xs">
    <a href="javascript:void()"> 8</a>
  </li>
  <li class="hidden-xs">
    <a href="javascript:void()"> 9</a>
  </li>
  <li class="disabled hidden-xs">
    <a href="javascript:void()"> ...</a>
  </li>
  <li class="hidden-xs">
    <a href="javascript:void()"> 11</a>
  </li>
  <li>
    <a href="javascript:void()"> Next</a>
  </li>
</ul>

AlertsDirect link

Classification matrix

Informational events

.alert-info or .alert-success messages are typically events within normal operating boundaries. They are the types of “good” events. These events are typically an indication that something has worked as it should.

Warnings events

.alert-warnings messages are an early indicator or potential indicator of trouble. However, we need to understand that a warning is a flag to something being “unusual”, not necessarily negative.

Exceptions events

.alert-danger messages are the most typical precursor to incidents, but they will not always lead to an incident. Exception events will generally be of interest to it operations staff as they may be a sign of more trouble to come.

Dismissible alerts

Build on any alert by adding an optional .alert-dismissible and close button. For fully functioning, dismissible alerts, you must use the alerts JavaScript plugin.

The dismissable alerts should only be rendered by the rails helper render_flash_messages.

Alert VariationsDirect linkRaw Link

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it’s not super important.
Warning! Better check yourself, you’re not looking too good.
Oh snap! Change a few things up and try submitting again.
<div class="alert alert-dismissable alert-success">
  <button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button><strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-dismissable alert-info">
  <button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button><strong>Heads up!</strong> This alert needs your attention, but it’s not super important.
</div>
<div class="alert alert-dismissable alert-warning">
  <button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button><strong>Warning!</strong> Better check yourself, you’re not looking too good.
</div>
<div class="alert alert-dismissable alert-danger">
  <button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button><strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>

Progress barDirect link

Default progress barDirect linkRaw Link

The progress bar is adapted from the Bootstrap progress bar approach.

<div class="progress">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" class="progress-bar" role="progressbar" style="width: 0%;"></div>
</div>
<div class="progress">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="progress-bar" role="progressbar" style="width: 25%;"></div>
</div>
<div class="progress">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar" role="progressbar" style="width: 50%;"></div>
</div>
<div class="progress">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" class="progress-bar" role="progressbar" style="width: 75%;"></div>
</div>
<div class="progress">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" class="progress-bar" role="progressbar" style="width: 100%;"></div>
</div>

With labelsDirect linkRaw Link

50%
50%
<div class="progress">
  <div class="progress-label">
    50%
  </div>
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar" role="progressbar" style="width: 50%;"></div>
</div>
<div class="progress">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar" role="progressbar" style="width: 50%;">
    <div class="progress-label">
      50%
    </div>
  </div>
</div>

Contextual alternativesDirect linkRaw Link

<div class="progress">
  <div aria-valuemax="100" aria-valuemin="50" aria-valuenow="0" class="progress-bar" role="progressbar" style="width: 50%;"></div>
</div>
<div class="progress">
  <div aria-valuemax="100" aria-valuemin="50" aria-valuenow="0" class="progress-bar progress-bar-info" role="progressbar" style="width: 50%;"></div>
</div>

AccordionsDirect link

Default accordionDirect linkRaw Link

An extension of the bootstrap collapse plugin.

Notice

Do not use the element with the .collapse class as a wrapper for the content if it needs padding. Instead add another element inside to avoid content jumping.

Hoping to resolve the matter with a blockade of deadly battleships, the greedy Trade Federation has stopped all shipping to the small planet of Naboo. In a stunning move, the fiendish droid leader, General Grievous, has swept into the Republic capit...255
<div class="accordion">
  <a class="accordion__heading collapsed" data-toggle="collapse" href="#base-accordion-example"><i aria-hidden="true" class="svg-icon icon-sm accordion__icon" role="img"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M7.084 22.043a1.817 1.817 0 0 1-2.554 0 1.772 1.772 0 0 1 0-2.528l10.192-9.99a1.817 1.817 0 0 1 2.554 0l10.194 9.99a1.772 1.772 0 0 1 0 2.528c-.707.7-1.847.699-2.551.002L16 13.852l-8.916 8.19z" fill-rule="evenodd"/></svg></i><i aria-hidden="true" class="svg-icon icon-sm accordion__icon accordion__icon--collapsed" role="img"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M7.084 7.957a1.817 1.817 0 0 0-2.554 0 1.772 1.772 0 0 0 0 2.528l10.192 9.99c.707.7 1.85.7 2.554 0l10.194-9.99a1.772 1.772 0 0 0 0-2.528 1.816 1.816 0 0 0-2.551-.002L16 16.148l-8.916-8.19z"/></svg></i>In a stunning m...20</a>
  <div class="collapse" id="base-accordion-example">
    Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vote on the critical issue of creating an ARMY OF THE REPUBLIC to assist the overwhelmed Jedi. Turmoil has engulfed the Galactic Republic. The taxation of trade route...255
  </div>
</div>

Hollow accordion themeDirect linkRaw Link

Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vote on the critical issue of creating an ARMY OF THE REPUBLIC to assist the overwhelmed Jedi. As the Separatist Droid Army attempts to flee the besieged capital with...255
<div class="accordion accordion--hollow">
  <a class="accordion__heading collapsed" data-toggle="collapse" href="#hollow-accordion-example">
    <div class="accordion__title">
      <i aria-hidden="true" class="svg-icon icon-sm accordion__icon" role="img"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M7.084 22.043a1.817 1.817 0 0 1-2.554 0 1.772 1.772 0 0 1 0-2.528l10.192-9.99a1.817 1.817 0 0 1 2.554 0l10.194 9.99a1.772 1.772 0 0 1 0 2.528c-.707.7-1.847.699-2.551.002L16 13.852l-8.916 8.19z" fill-rule="evenodd"/></svg></i><i aria-hidden="true" class="svg-icon icon-sm accordion__icon accordion__icon--collapsed" role="img"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M7.084 7.957a1.817 1.817 0 0 0-2.554 0 1.772 1.772 0 0 0 0 2.528l10.192 9.99c.707.7 1.85.7 2.554 0l10.194-9.99a1.772 1.772 0 0 0 0-2.528 1.816 1.816 0 0 0-2.551-.002L16 16.148l-8.916-8.19z"/></svg></i>There is unrest...20
    </div>
  </a>
  <div class="accordion__body collapse" id="hollow-accordion-example">
    There is unrest in the Galactic Senate. Several thousand solar systems have declared their intentions to leave the Republic. Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vote on the critical issue of creating an...255
  </div>
</div>

Content BoxesDirect link

Default Content BoxDirect linkRaw Link

A bordered content box.

Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vote on the critical issue of creating an ARMY OF THE REPUBLIC to assist the overwhelmed Jedi. In a stunning move, the fiendish droid leader, General Grievous, has sw...255
Turmoil has engulfed the Galactic Republic. The taxation of trade routes to outlying star systems is in dispute. While the Congress of the Republic endlessly debates this alarming chain of events, the Supreme Chancellor has secretly dispatched two J...255
There is unrest in the Galactic Senate. Several thousand solar systems have declared their intentions to leave the Republic. In a stunning move, the fiendish droid leader, General Grievous, has swept into the Republic capital and kidnapped Chancello...255
Turmoil has engulfed the Galactic Republic. The taxation of trade routes to outlying star systems is in dispute. Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vote on the critical issue of creating an ARMY OF THE...255
<div class="content-box">
  <div class="row">
    <div class="col-xs-12 col-sm-6">
      Turmoil has engulfed the Galactic Republic. The taxation of trade routes to outlying star systems is in dispute. Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vote on the critical issue of creating an ARMY OF THE...255
    </div>
    <div class="col-xs-12 col-sm-6">
      In a stunning move, the fiendish droid leader, General Grievous, has swept into the Republic capital and kidnapped Chancellor Palpatine, leader of the Galactic Senate. While the Congress of the Republic endlessly debates this alarming chain of event...255
    </div>
  </div>
</div>
<div class="content-box">
  <div class="row">
    <div class="col-xs-12 col-sm-6">
      There is unrest in the Galactic Senate. Several thousand solar systems have declared their intentions to leave the Republic. In a stunning move, the fiendish droid leader, General Grievous, has swept into the Republic capital and kidnapped Chancello...255
    </div>
    <div class="col-xs-12 col-sm-6">
      This separatist movement, under the leadership of the mysterious Count Dooku, has made it difficult for the limited number of Jedi Knights to maintain peace and order in the galaxy. Hoping to resolve the matter with a blockade of deadly battleships,...255
    </div>
  </div>
</div>

PanelsDirect link

Panel variantsDirect link

Panels come with three optional parts: heading, title, body and footer.

Panel Body
Panel Heading
Panel Body
Panel Body
Panel Title
Panel Body
Panel Title
Panel Body
<div class="row">
  <div class="col-sm-3">
    <div class="panel">
      <div class="panel-body">
        Panel Body
      </div>
    </div>
    <div class="panel">
      <div class="panel-heading">
        Panel Heading
      </div>
      <div class="panel-body">
        Panel Body
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="panel">
      <div class="panel-body">
        Panel Body
      </div>
      <div class="panel-footer">
        Panel Footer
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="panel">
      <div class="panel-heading">
        <div class="panel-title">
          Panel Title
        </div>
      </div>
      <div class="panel-body">
        Panel Body
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="panel">
      <div class="panel-heading">
        <div class="panel-title">
          Panel Title
        </div>
      </div>
      <div class="panel-body">
        Panel Body
      </div>
      <div class="panel-footer">
        Panel Footer
      </div>
    </div>
  </div>
</div>

Panel BehavioursDirect link

The provided panel hover effect can be enabled by using one of the methods in the example.

Hover effect
Panel effect by using the .panel--hover modifier.
<div class="row">
  <div class="col-xs-6">
    <div class="panel panel--hover">
      <div class="panel-heading">
        <div class="panel-title">
          Hover effect
        </div>
      </div>
      <div class="panel-body">Panel effect by using the <code>.panel--hover</code> modifier.
      </div>
    </div>
  </div>
  <div class="col-xs-6">
    <a class="panel" href="javascript:void()">
      <div class="panel-heading">
        <div class="panel-title">
          Hover effect
        </div>
      </div>
      <div class="panel-body">Panel effect by an <code>&lt;a&gt;</code> element.
      </div>
    </a>
  </div>
</div>

Panel ThemesDirect linkRaw Link

Make a panel more meaningful to a particular context by adding any of the contextual state classes.

Theme name Usage
.panel-brand Used for primary upsell messages
.panel-inverted Used for secondary upsell messages
.panel-service Is only used for internal services support or others

These states only appear in conjunction with the class .is-shown.

Without theme

Panel title
Panel content

.panel-inverted

Panel title
Panel content

.panel-brand

Panel title
Panel content

.panel-service

Panel title
Panel content
<div class="row">
  <div class="col-xs-3">
    <p>
      Without theme
    </p>
    <div class="panel">
      <div class="panel-heading">
        <div class="panel-title">
          Panel title
        </div>
      </div>
      <div class="panel-body">
        Panel content
      </div>
      <div class="panel-footer">
        Panel footer
      </div>
    </div>
  </div>
  <div class="col-xs-3">
    <p>
      <code>.panel-inverted</code>
    </p>
    <div class="panel panel-inverted is-shown">
      <div class="panel-heading">
        <div class="panel-title">
          Panel title
        </div>
      </div>
      <div class="panel-body">
        Panel content
      </div>
      <div class="panel-footer">
        Panel footer
      </div>
    </div>
  </div>
  <div class="col-xs-3">
    <p>
      <code>.panel-brand</code>
    </p>
    <div class="panel panel-brand is-shown">
      <div class="panel-heading">
        <div class="panel-title">
          Panel title
        </div>
      </div>
      <div class="panel-body">
        Panel content
      </div>
      <div class="panel-footer">
        Panel footer
      </div>
    </div>
  </div>
  <div class="col-xs-3">
    <p>
      <code>.panel-service</code>
    </p>
    <div class="panel panel-service is-shown">
      <div class="panel-heading">
        <div class="panel-title">
          Panel title
        </div>
      </div>
      <div class="panel-body">
        Panel content
      </div>
      <div class="panel-footer">
        Panel footer
      </div>
    </div>
  </div>
</div>

Teaser panelsDirect linkRaw Link

Teaser panels contain images and have visible hover-states.

<div class="row">
  <div class="col-sm-6 col-md-3">
    <a class="panel teaser" href="javascript:void()">
      <div class="teaser-media">
        <img alt="5/4 320x180" class="teaser-media-background" data-src="holder.js/320x180?theme=vine&auto=yes">
      </div>
      <div class="panel-body">
        <span class="text-info teaser-hover-underline">Default panel with teaser-media</span>
      </div>
    </a>
  </div>
  <div class="col-sm-6 col-md-3">
    <a class="panel panel-sm teaser" href="javascript:void()">
      <div class="teaser-media">
        <img alt="5/4 320x180" class="teaser-media-background" data-src="holder.js/320x180?theme=vine&auto=yes">
        <div class="teaser-media-foreground">
          <button class="btn btn-info teaser-btn">Produkte ansehen<i class="icon icon-chevron-right"></i></button>
        </div>
      </div>
      <div class="panel-body">
        <span class="text-info teaser-hover-underline">Panel-sm with teaser-media and teaser-media-foreground</span>
      </div>
    </a>
  </div>
  <div class="col-sm-6 col-md-3">
    <a class="panel teaser" href="javascript:void()">
      <div class="panel-body">
        <div class="teaser-media">
          <img alt="5/4 320x180" class="teaser-media-background" data-src="holder.js/320x180?theme=vine&auto=yes">
        </div>
        <span class="text-info teaser-hover-underline">Default panel with teaser-media</span>
      </div>
    </a>
  </div>
  <div class="col-sm-6 col-md-3">
    <a class="panel panel-sm teaser" href="javascript:void()">
      <div class="panel-body">
        <div class="teaser-media">
          <img alt="5/4 320x180" class="teaser-media-background" data-src="holder.js/320x180?theme=vine&auto=yes">
          <div class="teaser-media-foreground">
            <button class="btn btn-info teaser-btn">Produkte ansehen<i class="icon icon-chevron-right"></i></button>
          </div>
        </div>
        <span class="text-info teaser-hover-underline">Panel-sm with teaser-media and teaser-media-foreground</span>
      </div>
    </a>
  </div>
</div>
<div class="row">
  <div class="col-sm-6">
    <div class="panel panel-sm teaser">
      <div class="row">
        <div class="col-sm-7">
          <div class="teaser-media">
            <img alt="5/4 320x180" class="teaser-media-background" data-src="holder.js/320x180?theme=vine&auto=yes">
          </div>
        </div>
        <div class="col-sm-5">
          <div class="panel-body teaser-body-right">
            <h4>
              Panel with image left
            </h4>
            <p>
              There is unrest in the Galactic Senate. Sever...50
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <a class="panel teaser" href="javascript:void()">
      <div class="row">
        <div class="col-md-6 col-md-push-6">
          <div class="teaser-media">
            <img alt="5/4 320x180" class="teaser-media-background" data-src="holder.js/320x180?theme=vine&auto=yes">
            <div class="teaser-media-foreground">
              <button class="btn btn-info teaser-btn">Produkte ansehen<i class="icon icon-chevron-right"></i></button>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-md-pull-6">
          <div class="panel-body teaser-body-left">
            <h4>
              Panel with image right
            </h4>
            <p>
              Hoping to resolve the matter with a blockade ...50
            </p>
          </div>
        </div>
      </div>
    </a>
  </div>
</div>

Aside PanelDirect linkRaw Link

They come with a .panel-aside-heading class for underlined headlines to separate sections inside the panels.

Anbieterinformationen
Land
1
22
333
Standort
Kategorien zum Suchbegriff
Lieferantentyp
1
22
333
444
Panel not 'sm'

Produkte filtern

<div class="row">
  <div class="col-md-4">
    <div class="panel panel-sm panel-aside">
      <div class="panel-heading">
        Anbieterinformationen
      </div>
      <div class="panel-body">
        <h5 class="panel-aside-heading">
          Land
        </h5>
        <form action="#" class="fn-filter">
          <div class="row">
            <div class="col-xs-9">
              <div class="checkbox">
                <label><input type="checkbox" value="1" />Deutschland</label>
              </div>
            </div>
            <div class="col-xs-3">
              <span class="badge pull-right">1</span>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-9">
              <div class="checkbox">
                <label><input type="checkbox" value="1" />Österreich (Austrian, DACH)</label>
              </div>
            </div>
            <div class="col-xs-3">
              <span class="badge pull-right">22</span>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-9">
              <div class="checkbox">
                <label><input type="checkbox" value="1" />Schweiz</label>
              </div>
            </div>
            <div class="col-xs-3">
              <span class="badge pull-right">333</span>
            </div>
          </div>
        </form>
        <h5 class="panel-aside-heading">
          Standort
        </h5>
        <form action="#" class="form-horizontal fn-filter fn-geocomplete-details">
          <div class="form-group">
            <div class="col-xs-12">
              <input type="text" class="form-control fn-google-places-autocomplete" placeholder="" />
            </div>
          </div>
          <div class="form-group">
            <label for="Umkreis" class="col-xs-6 control-label font-weight-normal text-right">Umkreis: </label>
            <div class="col-xs-6">
              <select class="form-control"><option value="25 km">25 km</option>
              <option value="50 km" selected="selected">50 km</option>
              <option value="75 km">75 km</option>
              <option value="100 km">100 km</option>
              <option value="125 km">125 km</option>
              <option value="150 km">150 km</option>
              </select>
            </div>
          </div>
        </form>
        <div class="text-right">
          <a href="#" class="small fn-filter-reset-region">Standortfilter zurücksetzen</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="panel panel-sm panel-aside">
      <div class="panel-body">
        <h5 class="panel-aside-heading">
          Kategorien zum Suchbegriff
        </h5>
        <form action="#" class="fn-filter">
          <div class="row">
            <div class="col-xs-9">
              <div class="link">
                <a href="#">Schrauben</a>
              </div>
            </div>
            <div class="col-xs-3">
              <span class="badge pull-right">1</span>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-9">
              <div class="link">
                <a href="#">Holzschrauben (Holz, Schrauben)</a>
              </div>
            </div>
            <div class="col-xs-3">
              <span class="badge pull-right">22</span>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-9">
              <div class="link">
                <a href="#">Plastikschrauben</a>
              </div>
            </div>
            <div class="col-xs-3">
              <span class="badge pull-right">333</span>
            </div>
          </div>
        </form>
        <h5 class="panel-aside-heading">
          Lieferantentyp
        </h5>
        <form action="#" class="fn-filter">
          <div class="row">
            <div class="col-xs-9">
              <div class="checkbox">
                <label><input type="checkbox" value="1" /><i class="icon icon-primary icon-wholesaler"></i><span>Großhändler</span></label>
              </div>
            </div>
            <div class="col-xs-3">
              <span class="badge pull-right">1</span>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-9">
              <div class="checkbox">
                <label><input type="checkbox" value="1" /><i class="icon icon-primary icon-distributor"></i><span>Händler (kein Großhändler)</span></label>
              </div>
            </div>
            <div class="col-xs-3">
              <span class="badge pull-right">22</span>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-9">
              <div class="checkbox">
                <label><input type="checkbox" value="1" /><i class="icon icon-primary icon-manufacturer"></i><span>Hersteller</span></label>
              </div>
            </div>
            <div class="col-xs-3">
              <span class="badge pull-right">333</span>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-9">
              <div class="checkbox">
                <label><input type="checkbox" value="1" /><i class="icon icon-primary icon-service-provider"></i><span>Dienstleister</span></label>
              </div>
            </div>
            <div class="col-xs-3">
              <span class="badge pull-right">444</span>
            </div>
          </div>
        </form>
      </div>
      <div class="panel-footer">
        <div class="text-right">
          <a href="#" class="small">Alle Kategorien anzeigen</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="panel panel-aside">
      <div class="panel-heading">
        Panel not 'sm'
      </div>
      <div class="panel-body">
        <h4 class="panel-aside-heading">
          Produkte filtern
        </h4>
        <form class="fn-filter form-horizontal">
          <div class="form-group">
            <div class="col-xs-12">
              <div class="input-group">
                <input type="text" id="filter_search_term" class="form-control" placeholder="Suchbegriff" /><span class="input-group-btn"><button class="btn btn-default btn-icon" type="submit"><span class="sr-only">Produkte durchsuchen</span><i class="icon icon-search"></i></button></span>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="panel-footer">
        Panel Footer
      </div>
    </div>
  </div>
</div>

Collapsible PanelDirect linkRaw Link

Panel content
<div class="panel-group">
  <div class="panel">
    <div class="panel-heading collapsed" data-toggle="collapse" href="#docs-panel-collapse">
      <div class="panel-title">
        <a href="#docs-panel-collapse">Collapsible Panel<i class="panel-indicator icon-arrow-down pull-right"></i></a>
      </div>
    </div>
    <div class="panel-collapse collapse in" id="docs-panel-collapse">
      <div class="panel-body">
        Panel content
      </div>
    </div>
  </div>
</div>

Panel SpacingDirect linkRaw Link

In addition to the default inner panel spacing (padding), we also provide a smaller variation .panel-sm which you can add to the .panel wrapper.

Default panel

Title
Body

.panel-sm

Title
Body

Default just with body

Body

.panel-sm just with body

Body
<div class="row">
  <div class="col-sm-3">
    <p>
      Default panel
    </p>
    <div class="panel">
      <div class="panel-heading">
        <div class="panel-title">
          Title
        </div>
      </div>
      <div class="panel-body">
        Body
      </div>
      <div class="panel-footer">
        Footer
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <p>
      <code>.panel-sm</code>
    </p>
    <div class="panel panel-sm">
      <div class="panel-heading">
        <div class="panel-title">
          Title
        </div>
      </div>
      <div class="panel-body">
        Body
      </div>
      <div class="panel-footer">
        Footer
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <p>
      Default just with body
    </p>
    <div class="panel">
      <div class="panel-body">
        Body
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <p>
      <code>.panel-sm</code> just with body
    </p>
    <div class="panel panel-sm">
      <div class="panel-body">
        Body
      </div>
    </div>
  </div>
</div>

Panel StatesDirect linkRaw Link

The Panel component provides two different type of CSS class states or no state which is the default behaviour.

State name Optional Description
.is-pending false when dynamic content is loading
.is-shown true when content is loaded (important form additional themes)

This type of status bring some UI transition effects with it (spinner, smooth fades).

<p class="clearfix">
  Status:<span class="label label--info" id="docs-panel-states-label">is-pending</span><span class="pull-right"><button type="button" id="docs-panel-states-action" class="btn btn-default btn-xs" data-states="[&quot;is-pending&quot;, &quot;is-shown&quot;, &quot;is-shown panel-brand&quot;, &quot;is-shown panel-inverted&quot;]">Next</button></span>
</p>
<div class="panel is-pending tile-sm-3" id="docs-panel-states-target">
  <a class="panel-body" href="javascript:void()"><img alt="" class="panel-img intro-ani-late" data-src="holder.js/200x80?theme=sky">
    <p class="font-h3 intro-ani-late">
      While the Congress of the Republic endlessly debates this alarming chain of events, the Supreme Chancellor has secretly dispatched two...140
    </p>
    <div class="btn btn-primary intro-ani-later">
      Jetzt informieren
    </div>
  </a>
</div>

Underlay PanelDirect linkRaw Link

This component is more an additional helper than a theme class. It provides two sub classes .panel-underlay-object and .panel-underlay-body. The .panel-underlay-object expected the media that should be under actual content.

Use .panel-underlay-img-sticks-right to control background image position in all viewports.

<a class="panel panel-underlay tile-xs-3" href="#"><img alt="1108x240" class="panel-underlay-object" data-src="holder.js/1108x240?theme=sky">
  <div class="panel-underlay-body text-bright">
    While the Congress of the Republic endlessly debates this alarming chain of events, the Supreme Chancellor has secretly dispatched two Jedi Knights, the guardians of peace and justice in the galaxy, to settle the conflict. In a stunning move, the fi...255
  </div>
</a>

Overview BarDirect link

Default overview barDirect linkRaw Link

A fixed height element that can be separated into sections. To be used at the top of pages to provide an overview of the contents (e.g. number of booked categories).

There is unrest in the Galactic Senate. Several thousand solar systems have declared their intentions to leave the Republic. War! The Republic is crumbling under attacks by the ruthless Sith Lord, Count Dooku. There are heroes on both sides. Evil is...255
This separatist movement, under the leadership of the mysterious Count Dooku, has made it difficult for the limited number of Jedi Knights to maintain peace and order in the galaxy. Senator Amidala, the former Queen of Naboo, is returning to the Gal...255
<div class="row overview-bar">
  <div class="col-xs-12 col-md-6 overview-bar__section">
    <div class="text-vcenter">
      Hoping to resolve the matter with a blockade of deadly battleships, the greedy Trade Federation has stopped all shipping to the small planet of Naboo. Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vote on the cri...255
    </div>
  </div>
  <div class="col-xs-12 col-md-6 overview-bar__section background-blue">
    <div class="text-vcenter">
      Hoping to resolve the matter with a blockade of deadly battleships, the greedy Trade Federation has stopped all shipping to the small planet of Naboo. While the Congress of the Republic endlessly debates this alarming chain of events, the Supreme Ch...255
    </div>
  </div>
</div>

Media ObjectDirect link

Media Object ExampleDirect linkRaw Link

The default media displays a media object (images, video, audio) to the left or right of a content block.

64x64

Media heading

While the Congress of the Republic endlessly debates this alarming chain of events, the Supreme Chancellor has secretly dispatched two Jedi Knights, the guardians of peace an...180
64x64

Media heading

Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vote on the critical issue of creating an ARMY OF THE REPUBLIC to assist the overwhelmed Jedi. Hoping to resolve the matter with a blockade of deadly battleships, the greedy Trade Federation has stopped all shipping to the small planet of Naboo. Turmoil has engulfed the Galactic Republic. The taxation of trade routes to outlying star systems is in dispute. As...450
64x64

Nested media heading

As the Separatist Droid Army attempts to flee the besieged capital with their valuable hostage, two Jedi Knights lead a desperate mission to res...150
<div class="media">
  <a class="media-left" href="#"><img alt="64x64" class="media-object" data-src="holder.js/64x64?theme=sky"></a>
  <div class="media-body">
    <h4 class="media-heading">
      Media heading
    </h4>
    In a stunning move, the fiendish droid leader, General Grievous, has swept into the Republic capital and kidnapped Chancellor Palpatine, leader of the Galactic Senate. As the...180
  </div>
</div>
<div class="media">
  <a class="media-left" href="#"><img alt="64x64" class="media-object" data-src="holder.js/64x64?theme=sky"></a>
  <div class="media-body">
    <h4 class="media-heading">
      Media heading
    </h4>
    Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vote on the critical issue of creating an ARMY OF THE REPUBLIC to assist the overwhelmed Jedi. This separatist movement, under the leadership of the mysterious Count Dooku, has made it difficult for the limited number of Jedi Knights to maintain peace and order in the galaxy. Turmoil has engulfed the Galactic Republic. The taxation of trade routes to outlying...450
    <div class="media">
      <a class="media-left" href="#"><img alt="64x64" class="media-object" data-src="holder.js/64x64?theme=sky"></a>
      <div class="media-body">
        <h4 class="media-heading">
          Nested media heading
        </h4>
        War! The Republic is crumbling under attacks by the ruthless Sith Lord, Count Dooku. There are heroes on both sides. Evil is everywhere. There i...150
      </div>
    </div>
  </div>
</div>

Media Object SpacesDirect linkRaw Link

Spaces are made to give more options for the space between .media-object and .media-body.

64x64

Default space

64x64

Large space

<div class="media">
  <a class="media-left" href="#"><img alt="64x64" class="media-object" data-src="holder.js/64x64?theme=sky"></a>
  <div class="media-body">
    <h4 class="media-heading">
      Default space
    </h4>
  </div>
</div>
<div class="media media-lg">
  <a class="media-left" href="#"><img alt="64x64" class="media-object" data-src="holder.js/64x64?theme=sky"></a>
  <div class="media-body">
    <h4 class="media-heading">
      Large space
    </h4>
  </div>
</div>

Data PairsDirect link

Data pair consists of a label and a value – which in most cases is a number. We distinguish three kinds of sizes (base, small, large) for which the baselines are optimized.

The component offers besides the standard additional themes. These can be enabled via a modifier (as in the example).

Data Pairs ExampleDirect linkRaw Link

1.484
Seit dem 1. Januar 2015
1.484 von 3
Seit dem 1. Januar 2015
1.484
Seit dem 1. Januar 2015
1.484
Seit dem 1. Januar 2015
1.484
Seit dem 1. Januar 2015
1.484 von 5
Seit dem 1. Januar 2015
<div class="row">
  <div class="col-xs-4">
    <dl class="data-pair--sm">
      <dd class="data-pair__value">
        1.484
      </dd>
      <dt class="data-pair__label">
        Seit dem 1. Januar 2015
      </dt>
    </dl>
  </div>
  <div class="col-xs-4">
    <dl class="data-pair data-pair--info">
      <dt class="data-pair__value">
        1.484<span class="data-pair__subvalue"> von 3</span>
      </dt>
      <dd class="data-pair__label">
        Seit dem 1. Januar 2015
      </dd>
    </dl>
  </div>
  <div class="col-xs-4">
    <dl class="data-pair--lg">
      <dd class="data-pair__value">
        1.484
      </dd>
      <dt class="data-pair__label">
        Seit dem 1. Januar 2015
      </dt>
    </dl>
  </div>
</div>
<div class="row">
  <div class="col-xs-4">
    <dl class="data-pair data-pair--muted">
      <dt class="data-pair__value">
        1.484
      </dt>
      <dd class="data-pair__label">
        Seit dem 1. Januar 2015
      </dd>
    </dl>
  </div>
  <div class="col-xs-4">
    <dl class="data-pair--lg data-pair--primary">
      <dd class="data-pair__value">
        1.484
      </dd>
      <dt class="data-pair__label">
        Seit dem 1. Januar 2015
      </dt>
    </dl>
  </div>
  <div class="col-xs-4">
    <dl class="data-pair--sm data-pair--danger">
      <dd class="data-pair__value">
        1.484<span class="data-pair__subvalue"> von 5</span>
      </dd>
      <dt class="data-pair__label">
        Seit dem 1. Januar 2015
      </dt>
    </dl>
  </div>
</div>

ModalDirect link

Modal SkeletonDirect linkRaw Link

The standard modal includes .modul-header, .modul-body and .modul-footer.

<div class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button aria-hidden="true" class="close" data-dismiss="modal" type="button"> ×</button>
        <h4 class="modal-title">
          Modal title
        </h4>
      </div>
      <div class="modal-body">
        <p>
          One fine body…
        </p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal" type="button"> Close</button><button class="btn btn-primary" type="button"> Save changes</button>
      </div>
    </div>
  </div>
</div>

Modal Media ContentDirect linkRaw Link

Modal with images, videos, etc.

<div class="modal modal-image">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <figure class="image-item"><img data-src="holder.js/500x200?theme=sky&amp;text" class="media-content" alt="Random"></img><figcaption class="media-caption">Turmoil has engulfed the Galactic Republic. The taxation of trade routes to outlying star systems is in dispute. While the Congress of the Repub...150</figcaption></figure>
      </div>
    </div>
  </div>
</div>

Use the Carousel-plugin by Bootstrap for slide shows in modals.

Modal DemoDirect linkRaw Link

<button class="btn btn-primary btn-lg" data-target="#myModal" data-toggle="modal">Launch demo modal</button>
<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="myModal" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button aria-hidden="true" class="close" data-dismiss="modal" type="button"> &times;</button>
        <h4 class="modal-title" id="myModalLabel">
          Modal title
        </h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal" type="button"> Close</button><button class="btn btn-primary" type="button"> Save changes</button>
      </div>
    </div>
  </div>
</div>

Tiles SystemDirect link

IntroDirect link

With tiles you can give your container a specifc height.

The tile system is used for creating page layouts with height fixed containers that house your content. Here’s how the wlw tile system works:

  • tiles can be used anywhere and do not need an additional container
  • they work perfectly together with the common grid system
  • tiles create vertical gutters (gaps between tile content) via margin.
  • Because of the fixed height of the tiles, it is sometimes necessary to have additional height definition, to display the inner content in all resolution ranges. Therefore exists tile defintions for all ranges (xs, sm, md and lg). (Watch the first column change tile-height as you change the viewport.)
  • the .tile-xs-* class applies as default definition, all others apply to they own specific ranges. Therefore, e.g. applying any .tile-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .tile-lg-* class is not present.

ExampleDirect linkRaw Link

The calculation of the tile height is built with a basic content height and the gutter height and the number of tiles. See more in the data table below. The larges tile can be 690px + 30px

.tile-xs-2
.tile-xs-4
.tile-xs-2
.tile-xs-3
.tile-xs-5
.tile-xs-6
.tile-xs-2
.tile-xs-8
<div class="row">
  <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
    <div class="panel tile-xs-2">
      <div class="panel-body">
        <code>.tile-xs-2</code>
      </div>
    </div>
    <div class="panel tile-xs-4">
      <div class="panel-body">
        <code>.tile-xs-4</code>
      </div>
    </div>
    <div class="panel tile-xs-2">
      <div class="panel-body">
        <code>.tile-xs-2</code>
      </div>
    </div>
  </div>
  <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
    <div class="panel tile-xs-3">
      <div class="panel-body">
        <code>.tile-xs-3</code>
      </div>
    </div>
    <div class="panel tile-xs-5">
      <div class="panel-body">
        <code>.tile-xs-5</code>
      </div>
    </div>
  </div>
  <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
    <div class="panel tile-xs-6">
      <div class="panel-body">
        <code>.tile-xs-6</code>
      </div>
    </div>
    <div class="panel tile-xs-2">
      <div class="panel-body">
        <code>.tile-xs-2</code>
      </div>
    </div>
  </div>
  <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
    <div class="panel tile-xs-8">
      <div class="panel-body">
        <code>.tile-xs-8</code>
      </div>
    </div>
  </div>
</div>

OptionsDirect link

Extra small devices
Phones (<768px)
Small devices
Tablets (≥768px)
Medium devices
Desktops (≥992px)
Large devices
Desktops (≥1200px)
Tiles behavior Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .tile-xs-* .tile-sm-* .tile-md-* .tile-lg-*
# of tiles 8
Content height 60px basis for the calculation of all other
Gutter height as margin on the bottom of tile 15px 30px These values are related to the grid gutter/gap values

Forms & InputsDirect link

Text Input FieldsDirect linkRaw Link

<div class="form-group">
  <label class="control-label" for="#ex-text-input">Email address</label><input class="form-control" id="ex-text-input" type="email">
</div>
<div class="form-group">
  <label class="control-label" for="ex-textarea">Body text</label><textarea class="form-control" id="ex-textarea" rows="3"></textarea>
</div>

Validation StatesDirect linkRaw Link

The forms system includes validation styles for error states on form controls. Add .has-error to the parent element to indicate errors. Any .form-control and .help-block within that element will receive the validation styles.

Usefull error message.
Usefull error message.
<div class="form-group has-error">
  <label class="control-label" for="#ex-validation-state-error-1">Email address *</label><input class="form-control" id="ex-validation-state-error-1" type="email">
  <div aria-describedby="ex-validation-state-error-1" class="help-block">
    Usefull error message.
  </div>
</div>
<div class="form-group has-error">
  <div class="checkbox">
    <label><input id="ex-validation-state-error-2" type="checkbox" value="option1">Checkbox with error</label>
  </div>
  <div aria-describedby="ex-validation-state-error-2" class="help-block">
    Usefull error message.
  </div>
</div>

FieldsetsDirect linkRaw Link

Title secondary text
<fieldset>
  <legend>Title <small>secondary text</small></legend>
  <div class="form-group">
    <label class="control-label" for="#input1">Label</label><input class="form-control" id="input1" type="text">
  </div>
</fieldset>

Input Hint TextsDirect linkRaw Link

Hints are positioned next to the label, to give immediately help.

Associating help text with form controls

Help text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.

Hint text
<div class="form-group">
  <label class="control-label" for="#ex-info-hints">Label</label><small aria-describedby="ex-info-hints" class="control-hint">Hint text</small><input class="form-control" id="ex-info-hints" type="text">
</div>

Input Help TextDirect linkRaw Link

Help texts – when necessary – are displayed as popover directly placed at each controls field. That helps to have a cleaner better readable user interface.

<div class="form-group">
  <label class="control-label" for="#ex-form-help-text">Label</label><i aria-discribedby="ex-form-help-text" class="icon-sm icon-primary icon-question-sign pull-right" data-container="body" data-content="Please place here information, answers the user question related to this field" data-placement="auto right" data-toggle="popover" data-trigger="hover" title="Popover title"></i><input class="form-control" id="ex-form-help-text" type="text">
</div>

File Input FieldsDirect linkRaw Link

We hide the default file input field to be more flexible in our interface. Instead we show a custom element.

<div class="form-group">
  <label class="control-hidden-file-input btn btn-default" for="ex-file-input-file">Click to open file dialog<input class="form-control" id="ex-file-input-file" type="file"></label>
</div>

Image Input PreviewDirect linkRaw Link

263x150
<div class="fn-image-preview-example">
  <div class="media">
    <div class="pull-left">
      <figure class="media-object form-control wlw-thumbnail wlw-thumbnail-sm">
        <img alt="263x150" class="media-content" data-src="holder.js/144x108?theme=sky&text=Placeholder \n 144x108">
      </figure>
    </div>
    <div class="media-body">
      <input accept="image/*" data-image-preview-placeholder="" data-image-preview-target=".fn-image-preview-example img" type="file">
    </div>
  </div>
</div>

Nested FormsDirect linkRaw Link

You can add input groups dynamicly into forms with the correct classes and nested_form.js.

<div class="form-group fn-nested-form">
  <div id="nested-form-target">
    <div id="group_1">
      <label class="control-label" for="#input1">Label</label>
      <div class="input-group">
        <input class="form-control" id="input1" type="text" value="This input field will be hidden."><span class="input-group-btn"><button class="btn btn-default fn-nested-form-hide" data-nested-attributes-destroy-input="#hidden_1" data-target="#group_1">Delete</button></span>
      </div>
      <input class="fn-nested-form-delete" id="hidden_1" type="hidden" value="false">
    </div>
  </div>
  <button class="btn btn-primary fn-nested-form-add" data-target="#nested-form-target" data-template="<div id='group___placeholder__'><label class='control-label' for='#input__placeholder__'>Label</label><div class='input-group'><input class='form-control' id='input__placeholder__' type='text' value='This input field will be destroyed.' /><span class='input-group-btn'><button class='btn btn-default fn-nested-form-delete' data-target='#group___placeholder__'>Delete</button></span></div><input class='fn-nested-form-delete' id='hidden___placeholder__' type='hidden' value='false' /></div>">Add nested form</button>
</div>

Input AutocompleteDirect linkRaw Link

Here we use here the jQuery-UI plugin and markup.

Deprecated

Although the autocomplete still returns a span with .searchsuggest-term and .autocomplete-term
span.searchsuggest-term.autocomplete-term is obsolete and should no longer used.

<div class="from-group">
  <label class="control-label" for="example-search"> So suchen Profis</label>
  <div class="input-group">
    <input class="form-control" id="example-search" placeholder="z.B. Firmenschilder in Hamburg" type="text"><span class="input-group-btn"><button class="btn btn-primary" type="submit"><span class="sr-only">Finden</span><i aria-hidden="true" class="svg-icon icon-sm" role="img"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M24.927 22.114l5.136 4.973c.791.77.81 2.059.04 2.853-.395.403-.944.57-1.467.57-.502 0-.995-.152-1.386-.529l-5.136-5.054a13.774 13.774 0 0 0 2.813-2.813zM14.004 2.157c6.484 0 11.74 5.256 11.74 11.74 0 6.482-5.256 11.738-11.74 11.738-6.483 0-11.739-5.256-11.739-11.739 0-6.483 5.256-11.739 11.74-11.739zm-.78 4.402c-3.699.376-6.557 3.538-6.557 7.337a7.337 7.337 0 1 0 7.337-7.337c-.253 0-.533-.025-.78 0z" fill-rule="nonzero"/></svg></i></button></span>
  </div>
</div>
<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-1" tabindex="0">
  <li class="ui-menu-item" id="ui-id-2" tabindex="-1">
    <a class="autocomplete-result clearfix" title="Schrauben"><span class="autocomplete-count pull-right">712 <span class="hidden-xs">Anbieter</span></span><span class="autocomplete-label pull-left"><span class="searchsuggest-term autocomplete-term"><strong>Sch</strong></span>rauben</span></a>
  </li>
  <li class="ui-menu-item" id="ui-id-3" tabindex="-1">
    <a class="autocomplete-result clearfix" title="There is unrest in t...25"><span class="autocomplete-count pull-right">Senator Amidala, the...25</span><span class="autocomplete-label pull-left"><span class="searchsuggest-term autocomplete-term">As the Separatist Droid Army attempts to flee the besieged capital with their valuable hostage...100</span></span></a>
  </li>
  <li class="ui-menu-item" id="ui-id-4" tabindex="-1">
    <a class="autocomplete-result clearfix" title="Wer liefert was? GmbH"><span class="autocomplete-label pull-left"><span class="searchsuggest-term autocomplete-term"><strong>Wer</strong> </span>liefert was? GmbH</span></a>
  </li>
  <li class="ui-menu-item" id="ui-id-5" tabindex="-1">
    <a class="autocomplete-result clearfix" title="This separatist move...25"><span class="autocomplete-label pull-left">War! The Republic is crumbling under attacks by the ruthless Sith Lord, Count Dooku. There are heroes on both sides. Ev...125<span class="searchsuggest-term autocomplete-term"><strong>Sch</strong></span>rauben</span></a>
  </li>
  <li class="ui-menu-item" id="ui-id-6" tabindex="-1">
    <a class="autocomplete-foot clearfix" title="sch"><span class="autocomplete-label pull-left">sch</span></a>
  </li>
</ul>
<br><br><br><br><br><br><br><br>

Dual SelectboxDirect linkRaw Link

Allows you to select items via double click. This requires dual_selectbox.js.

<div class="form-group">
  <div class="fn-dual-selectbox dual-selectbox row">
    <div class="col-md-6">
      <label for="#backlog-items">Available item</label><select class="form-control" id="backlog-items" multiple>
        <option>
          Test1
        </option>
        <option>
          Test2
        </option>
        <option>
          Test3
        </option>
        <option>
          Test4
        </option>
        <option>
          Test5
        </option>
      </select>
    </div>
    <div class="col-md-6">
      <label for="#selected-items">Selected items</label><select class="form-control" id="selected-items" multiple>
        <option>
          Test6
        </option>
      </select>
    </div>
  </div>
</div>

Warning on unsaved formsDirect linkRaw Link

Warns the user before leaving the page if there are unsaved data in the form. Include wlw/controls/unsaved_form_warning to use this feature. Use .fn-unsaved-form-selectto save the state of select items. This is useful in combination with DualSelectbox.

Form elements
<form class="fn-unsaved-warning" data-warning="Warning!">
  Form elements<select class="fn-unsaved-form-select">
    <option value="Test">
      Test
    </option>
  </select>
</form>

Multipage FormDirect linkRaw Link

Multipage forms are used when you need to separate a form into virtual pages such as a register form with personal data on the first page and account infos on the second page.

It needs .multipage-form.fn-multipage-form as the main wrapper.

For every form page you want to have you have to use .form-page.fn-form-page as the wrapper element. The first page you want to show has the class .active.

The next and prev buttons has .fn-change-form-page and the correct data attribute data-change-page="next" or data-change-page="prev".

<div class="modal multipage-form fn-multipage-form">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="form-page fn-form-page active">
        <div class="modal-header">
          <button class="close" data-dismiss="modal" type="button">×</button>
          <h4 class="modal-title">
            Step 1
          </h4>
        </div>
        <div class="modal-body">
          <p>
            Content 1
          </p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary fn-change-form-page" data-change-page="next" type="button">Next</button>
        </div>
      </div>
      <div class="form-page fn-form-page">
        <div class="modal-header">
          <button class="close" data-dismiss="modal" type="button">×</button>
          <h4 class="modal-title">
            Step 2
          </h4>
        </div>
        <div class="modal-body">
          <p>
            Content 2
          </p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default fn-change-form-page" data-change-page="prev" type="button">Back</button><button class="btn btn-primary fn-change-form-page" data-change-page="next" type="button">Next</button>
        </div>
      </div>
      <div class="form-page fn-form-page">
        <div class="modal-header">
          <button class="close" data-dismiss="modal" type="button">×</button>
          <h4 class="modal-title">
            Step 3
          </h4>
        </div>
        <div class="modal-body">
          <p>
            Content 3
          </p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default fn-change-form-page" data-change-page="prev" type="button">Back</button><button class="btn btn-primary" type="button">Ok!</button>
        </div>
      </div>
    </div>
  </div>
</div>

Soft ValidationDirect linkRaw Link

With the soft validation helper you have the possibility to only activate a form submit button if all fields with .fn-soft-validation are filled out or selected or checked, depending on what types of inputs you have.

You need a wrapper called .fn-soft-validation-group. Give all fields you want to have a soft validation on the .fn-soft-validation class and the submit button which should be activated afterwards the .fn-soft-validation-submit class.

Soft Validation Form

Did you typed in something?
<div class="row">
  <div class="col-xs-offset-4 col-xs-4">
    <form class="fn-soft-validation-group">
      <div class="panel">
        <div class="panel-heading">
          <div class="panel-title">
            Soft Validation Form
          </div>
        </div>
        <div class="panel-body">
          <input class="form-control fn-soft-validation" type="text"><br><input class="fn-soft-validation" type="checkbox"> <span>Did you typed in something?</span> 
        </div>
        <div class="panel-footer">
          <button class="btn btn-primary fn-soft-validation-submit" disabled="disabled">Submit</button>
        </div>
      </div>
    </form>
  </div>
</div>

TablesDirect link

AlignmentsDirect linkRaw Link

Add .table-middle to center the cell content of the table body section vertically.

Lager content Title
Middled content
Middled content
Middled content
<table class="table table-middle">
  <thead>
    <tr>
      <th>
        Lager content
      </th>
      <th>
        Title
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img data-src="holder.js/60x60?theme=sky">
      </td>
      <td>
        Middled content
      </td>
    </tr>
    <tr>
      <td>
        <img data-src="holder.js/60x60?theme=sky">
      </td>
      <td>
        Middled content
      </td>
    </tr>
    <tr>
      <td>
        <img data-src="holder.js/60x60?theme=sky">
      </td>
      <td>
        Middled content
      </td>
    </tr>
  </tbody>
</table>

ThumbnailsDirect link

Thumbnail Rectangle BaseDirect linkRaw Link

The thumbnail ratio is 4:3.

  • XS 72x54

    72x54
  • SM 144x108

    144x108
  • MD 240x180

    240x180
<ul class="list-inline">
  <li>
    <h4>
      XS <small>72x54</small>
    </h4>
    <div class="wlw-thumbnail wlw-thumbnail-xs">
      <img alt="72x54" data-src="holder.js/72x54?theme=vine">
    </div>
  </li>
  <li>
    <h4>
      SM <small>144x108</small>
    </h4>
    <div class="wlw-thumbnail wlw-thumbnail-sm">
      <img alt="144x108" data-src="holder.js/144x108?theme=vine">
    </div>
  </li>
  <li>
    <h4>
      MD <small>240x180</small>
    </h4>
    <div class="wlw-thumbnail wlw-thumbnail-md">
      <img alt="240x180" data-src="holder.js/240x180?theme=vine">
    </div>
  </li>
</ul>

Thumbnail VariationsDirect linkRaw Link

Default

Base
No border
  • 24x18
  • 24x18
Count
  • +3
  • +3
Icon
Image - Align top
  • 24x18
  • 24x18

With link

Base
No border
  • 24x18
  • 24x18
Icon
Image - Align top
  • 24x18
  • 24x18
<h4>
  Default
</h4>
<div class="row">
  <div class="col-sm-3">
    <strong>Base</strong>
    <ul class="list-inline">
      <li>
        <div class="wlw-thumbnail wlw-thumbnail-xs"><img src="data:image/png;base64,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" /></div>
      </li>
      <li>
        <div class="wlw-thumbnail wlw-thumbnail-xs slim"><img src="data:image/png;base64,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" /></div>
      </li>
    </ul>
  </div>
  <div class="col-sm-3">
    <strong>No border</strong>
    <ul class="list-inline">
      <li>
        <div class="wlw-thumbnail wlw-thumbnail-xs no-border">
          <img alt="24x18" data-src="holder.js/24x18?theme=vine&auto=yes">
        </div>
      </li>
      <li>
        <div class="wlw-thumbnail wlw-thumbnail-xs no-border slim">
          <img alt="24x18" data-src="holder.js/24x18?theme=vine&auto=yes">
        </div>
      </li>
    </ul>
  </div>
</div>
<div class="row">
  <div class="col-sm-3">
    <strong>Count</strong>
    <ul class="list-inline">
      <li>
        <div class="wlw-thumbnail wlw-thumbnail-xs">
                <img src="data:image/png;base64,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" />
                <div class="count">
                  +3
                </div></div>
      </li>
      <li>
        <div class="wlw-thumbnail wlw-thumbnail-xs slim">
                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAoCAYAAACiu5n/AAAOQElEQVRogdWZe3TV1ZXHP+f8fveVB0hIQkIEkXd4BREEJIiooExHQdF2cHxUl50qw3SWdTlWyxpwWWZZq7VDpdNx1KIOHS0q41AVFIWKyCtIwPCQR3gECARCkpub3Pt7nTN//O69uQmUAsY1zl7Jur97fuecu79777NfRwAUXHtHTsQTsw1hPC2lFEIIpJRIKUAIBG2ktUZpDRqUUv53pdAatFIopdFao3XGs9Lp59Qarfx9dHJtelwn56b2zNjn/EmA1sewwkNoWNWU+cYcNOGW3FZbvCYNcwZa4++b/GENaI0QScgaND6zPnhfACTn6dQkQGuRWgAZ4xdE4uKWJddKurqChvbDssUL/QvIGUp5HRjWoHyGtfJBpsGl3mesSMopg7+MuRfJ88Uv/PNkas0ctIdAJE3K1xxCo4VIa1cDUvhzPKURZJhfyjJ0m2BS4+2Ow1kezolJAElLESLJ19cHrBBa+j+tfAakFAQDAZRSuJ7yv5smtuOggaBp+MxmaFtrjWO7mAETIQRKaRKWRTxhEwqY7a0n/SR8wXWUA5kDnatmM30OEQjha0ZKyfNzZxMMBrj/0We49TuT+P5tN/LjBb/BdT1+OXc2b6/4lOvGX0FRQV7aCp769WvMvOkaBvXrjRSCU6eb+P27q3hz+ScYUrbTrEgJijY9n3Fkv84Z/jMkU9pJe18EsZZWYq1xrh07kkuLCphSPpphgy5n1NCBDBt0OcMH9eXo8VOMHNIfQ0qef2kpv351GUdqTzFyyAAuyc3hV//xB4oLu/PM4w9yaXEhjuv5UJN+IPPcp8XQEdy53nUGYP/8KTylWVdRhZSC8jHD6FWUj+04jBo+gFFDB1B9+Bg79x4CwDQNLivpQcKyOVBzDIBorIV1FV9SW3caT6mkO09ZUgpoJpo2Y890hpnHprPIJMNRSQlKgSElVXsO0Bq3uPu2qVi2w5t/XM2ksWUgJGvWb6Ux2owQgtycLMqG9EeaklVrK7Adh4F9e7F22SK6dcnlH+cvpLqmlnAwmBZs2oi1JmXUZxPAN+CkkWmvTBtwIeDQkRMcOX6SoQP6UN8Q5a0PPqVXcQ96FxewtWovWmlM02DP/hoeefIFFi9dQVYkRDBgsmd/DfOfX4zSmpIe+Xie1xazob0tt1do5sc3QlJrlRFnFVorpJDUN0TZtc83203bdlO5Yx9HT5zCshy+/Koaw5DYtsuo4QNZseRZPnz9WW4ov5KE5aC04q3lq/nThkpm33MrZYP7Ydt2WpE6Q7iZoUlnqPbMmN85JLqX3aylkCD8OIsQSCmIJyx69+zBkAGXUbXnEHX1pxkyoA/Z4RCVO/djOTZjhg8mGAwgpSAcClK5Yx+F+d0QwMatO+l7WU8G9rmUbbv2cfhIHdLww5uVFIrWGuUpzEAArTw82/W5Sp17w0CYJlqpC4UF6OOEzFIOrmnMfGOiQQuN0H5EFEAiYXPLlAmMu2II/75kOTW1J8jJinD1qKFIIWiIxrhn5o14nsKQEttxePXtldx7+03kZkcwTIM7Z9zA8o/WceWIQUyddBXhUBDbdnj9nQ+5+Yar6ZqbjWEa1Bw9wetLV3Dt+CuYMGY4CctGCEEgYPD28tWsXLUegoHOUK4P2E8hfdAymRdZtsO4kUN46K7pfLS2gurDx0Bp7poxhWDQZE/1EX54580crKll4xc7cZSiuCCP2XdPx3IcPt1QScJyuLS4kMdm30nt8VN8vnEbZihIty65/MP9M2mKxvhs/VYeeOR+xo4sZdWaTfQsymfadeNoisb45NMKgoEA6AvV7l8ArJSfSaEFSoCQ/m/Yjm9eruulK5u4ZaPQuJ4fU7fu2MeLS96lpu40kVAQgA1f7GTO3F8Ra00worQvAkHljn389rX/5vjpJj9dBdZvqeK+H85j8KC+DC/tx988MJdXln5A9YalVGzbzW13PgKREIRDnerFZDoiZDgKneE6VbK0UxnnSON/n3rNaJYsms+s6ddjOw4J2+GmSVexa81/8vy8OXiOh+O6XD/xSn7/4lP8/f23YzsuluVw9ejhvL/sBfr17smi371NLJ4gOzuCEGAYAiJhMIxOd9ntTFog/LpUqXQJ6LguCdsm4oZIBUidTD+XvreGeT9/iZjtUFLUnWDAYFPlLp5etISjx08SCYcIBAL817IPefzJRbQ4DoWF3TFNg8MHTnCivolAwGTz1l3opEX5gu+kSuFsgJXSCAnCzypB+lo1TQOA5+Y+RGNzC++u/AytIRQKIKUEYNrkcZQUFaC15uU33idgmtQ3RHn/4/UoYOLYERhScOPksRTk5yEFLP7DB4SCAU6dbuSJp15g6qTRPPWTv2Pjpu0opcnKChEJB1LI/aSgE8kI5feb325EJDVoCBqbYtQ3RGmOtbJl+1fU1Naxu7qGtRu3AXCo5gSN0WZONzSxsXInsViczdt3s2XHHpTrkjQSDh89QcKyiTa38vmWKhoao1Rs38PK1ZtoiMaQUrKlai9N0RiRSIjPK6rY9MVOH+xFARYAMUy5iMaDiXZvsgdM1UIIf1/hlyemaVI+ZgSt8Tir122lT69iRo8YxKp1W9BKM3XSGLbv2k/1oVquKx+FANZt/pJYPAFKc/XoYVw1cjCW4/Lx2gp27T4A0mfcNE1cxwEhCAaD2PEEeAoZDoIGFY/7DCed4MXROeJwOrfVKdBgJWyemHMXg/v3ZmD5LB5+4A7m3Hcbtz7wBImEwxuL5jFr9pMUF+Tx/qs/B2DKrB/zyZqNzLj5Ohb/8nFaWuNooKy0Hz949BeEUwC0xpAy3SoyQ8Gks/TzahEOnz2zutAjrYGD8TNimpnqVvjK1YhklrXqswrGjiqlbNgARpcNAmDMyFKaY3FirXHWb97Oo7P/lqbmFrIiIW7/62tZtfIzpkwcTW5OFv+04N94d+ValOMSCgVIVULpzkg6xdTp49ou3+6gsIB5/qatNYQDQs6cm13wvXunETkSb508eY2bBiySrRuEQCu/nVJRuRs0TJ9STjgU4qvqGq4qKyVh2WzdvodEwmbGtIksfPktxo8extRrxtAlvxt/2lDJ/d/7K15Y8DCPPjiLhS8tZdGryzAMI3m02hqFmWVjGnxH8jQFPULMf7I/obDGUy5aeSg8tHaTnx5Ku/4nHsrzCIa9/Pwezob6+rinI07zK5+XPZtzZOBLplYaLdo6HqkW7e69h6g71cj3vzuN7bv287s332fBYz/ANA0W/OtrXDm0PyVFBZQO6ENBXlcu71XMxPEjeWPpCg4cOsbkq0bw8Ow7+cmP7uad99Zw9ORpTMNIdznQbRrXHcvDDqYZCECfvgaRiML1BF5SSEprPOXgaQuFl4yaLp52UcqVrufmK1y08Hpo4fy2vucXvU3VodGGBikkh4+e4EDNMcaNGsre6ho++GQ9z82bg2lItu/ez623XE9DYzP19Q24jkvZkP7MnDaJLjnZ9L+sJ6dPnMRTHq1x26+UINnPzmwFp0z43IW+n+W1oqXC9RyUdlHawvHiBI0uhAJFOF6M5sQRPG0hhIFSLgo3OddF46DxnjDT/axUmZaMBPFEguUffo5pGLz38XoO19Ty9nurKeh+CbW1JykqzGPhK28x/6nfEL4kFzNgcknXXIoK87j95snkZEc4fKSOZxYtoa6+CSMYyCjsMzsg59HV0BpXJfCUh6dcXJXAkAGGldzD5XlTiQQL8FSC49HNVB55kWPRjUhhJsE6ftmL77+E0WuSFgiSf21xT4ABhEyTuOsCAlMKpBA4ShMOmFi2g5dkKCAFAcOgxbLJCQXJCodoirXSEk9gBgO0HVvdAfBfIBeKSgyeW9SVUMTD9SwEBuP7/ZRe3SbSEKuhLrqNrGA+vbqPw3KbWLHrQQ43fIIUQaC9oza10n6apfET+5TL1uACjmWlMyvbVaBBSEFL3ErX0BqwPYXleAgpiCYsGlsTCCEwgoE27wwZbZ7zJ4XGVXFM5WK5MUb0vI9e3Sayr/Yj1lbPJe7WAZr++dO5btAvmND3n6mt3ITrtSCE0W4v2a75nmoyZHQbhJDpUCLwwaZAp1qt6XdJQQkhMKT0GwpnhKCLyZE1rk7geH5sL+lWTsJuZuPhZ4irY36xIVx21C1mT9075OeUUphThqedM3aSqYuv9EVX+uJLtbtiUal/pVBatV2kZfyn90qvaX+hlvbQF0wK10vgqFakkGQFC4nGDxK196K1wlVWsnkhON68GYDsQE86mjOACW29pZQ0QaSvWwSifZaT4dI7KisNpzN7UcLfx1VxpLJwtI3tNhEJ5WHKMAk3jhR+R0Rpj9xwbwASTlN7ZpMkOw5khoq0k0n3ijMu1DLqZt1hPD2vE8nTCVxt0eqc5GjTRnLDJQwrvhdXJXC8GLbbRGFOGaU9vkssfoqTLV8ihXnGPmeOZADPVG37tnHGeKfAORcJ32w9C1N7CCRf1LxASdcJjO/7OJdE+nGsaQNZoUKG97yXnFAxH+14jKh1gJCZfZbdisu/eZ6/DnmC7j1cfvpsDaEshVbgqTj52SOY2HcBvfImpC23OV7H5gMLCQRNIsE81h/4GQIDIdoM2QQa8UPut5MUBAJaSEPnpMzJkBFOtVbxP1WzKMwZRddwHyy3mePRTcS9k0wf9haX5ZeDVmw4+HTaoQEICsf2+D+Ecx6Uw0NzqweOuCKx2lPtg6pG4Skr7S8MGQQ0EVnCd4YtprhbGcur7qH61B8xZQQ4mxv7FtLLFT3LEy18qs+TX08l6BIcyODCWeyqe5WYcxQpDIQ4h9P6NpGV0OJCdGPIMM1ONRtq5mHKEFIYyYtC0fT/AvDFkBQm0vDh+ZmxaFRK33FGHP42knbERUf1ZC3U7Gru+tHkY6v+F3bNl4BQiYx2AAAAAElFTkSuQmCC" />
                <div class="count">
                  +3
                </div></div>
      </li>
    </ul>
  </div>
  <div class="col-sm-3">
    <strong>Icon</strong>
    <ul class="list-inline">
      <li>
        <div class="wlw-thumbnail wlw-thumbnail-xs"><i class="icon icon-search"></i></div>
      </li>
      <li>
        <div class="wlw-thumbnail wlw-thumbnail-xs slim"><i class="icon icon-search"></i></div>
      </li>
    </ul>
  </div>
  <div class="col-sm-3">
    <strong>Image - Align top</strong>
    <ul class="list-inline">
      <li>
        <div class="wlw-thumbnail wlw-thumbnail-xs no-border">
          <img alt="24x18" class="align-top" data-src="holder.js/24x18?theme=vine&auto=yes">
        </div>
      </li>
      <li>
        <div class="wlw-thumbnail wlw-thumbnail-xs no-border slim">
          <img alt="24x18" class="align-top" data-src="holder.js/24x18?theme=vine&auto=yes">
        </div>
      </li>
    </ul>
  </div>
</div>
<h4>
  With link
</h4>
<div class="row">
  <div class="col-sm-3">
    <strong>Base</strong>
    <ul class="list-inline">
      <li>
        <a href="#" class="wlw-thumbnail wlw-thumbnail-xs"><img src="data:image/png;base64,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" /></a>
      </li>
      <li>
        <a href="#" class="wlw-thumbnail wlw-thumbnail-xs slim"><img src="data:image/png;base64,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" /></a>
      </li>
    </ul>
  </div>
  <div class="col-sm-3">
    <strong>No border</strong>
    <ul class="list-inline">
      <li>
        <a class="wlw-thumbnail wlw-thumbnail-xs no-border" href="#"><img alt="24x18" data-src="holder.js/24x18?theme=vine&auto=yes"></a>
      </li>
      <li>
        <a class="wlw-thumbnail wlw-thumbnail-xs no-border slim" href="#"><img alt="24x18" data-src="holder.js/24x18?theme=vine&auto=yes"></a>
      </li>
    </ul>
  </div>
</div>
<div class="row">
  <div class="col-sm-3">
    <strong>Count</strong>
    <ul class="list-inline">
      <li>
        <a href="#" class="wlw-thumbnail wlw-thumbnail-xs">
                <img src="data:image/png;base64,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" />
                <div class="count">
                  +3
                </div></a>
      </li>
      <li>
        <a href="#" class="wlw-thumbnail wlw-thumbnail-xs slim">
                <img src="data:image/png;base64,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" />
                <div class="count">
                  +3
                </div></a>
      </li>
    </ul>
  </div>
  <div class="col-sm-3">
    <strong>Icon</strong>
    <ul class="list-inline">
      <li>
        <a href="#" class="wlw-thumbnail wlw-thumbnail-xs"><i class="icon icon-search"></i></a>
      </li>
      <li>
        <a href="#" class="wlw-thumbnail wlw-thumbnail-xs slim"><i class="icon icon-search"></i></a>
      </li>
    </ul>
  </div>
  <div class="col-sm-3">
    <strong>Image - Align top</strong>
    <ul class="list-inline">
      <li>
        <div class="wlw-thumbnail wlw-thumbnail-xs no-border">
          <img alt="24x18" class="align-top" data-src="holder.js/24x18?theme=vine&auto=yes">
        </div>
      </li>
      <li>
        <div class="wlw-thumbnail wlw-thumbnail-xs no-border slim">
          <img alt="24x18" class="align-top" data-src="holder.js/24x18?theme=vine&auto=yes">
        </div>
      </li>
    </ul>
  </div>
</div>

This gallery is used for the display of multiple product images.

RibbonsDirect link

Bookmark RibbonDirect linkRaw Link

We provide the states .is-active and .is-pending (for loading). The .ribbon-anchor will not be needed in every case.

regular state

active state

active and pending state

pending state

<div class="row">
  <div class="col-sm-6">
    <div class="panel ribbon-anchor">
      <a href="#" class="ribbon-bookmark"></a>
      <div class="panel-body">
        <p>
          regular state
        </p>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="panel ribbon-anchor">
      <a href="#" class="ribbon-bookmark is-active"></a>
      <div class="panel-body">
        <p>
          active state
        </p>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-sm-6">
    <div class="panel ribbon-anchor">
      <a href="#" class="ribbon-bookmark is-active is-pending"></a>
      <div class="panel-body">
        <p>
          active and pending state
        </p>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="panel ribbon-anchor">
      <a href="#" class="ribbon-bookmark is-pending"></a>
      <div class="panel-body">
        <p>
          pending state
        </p>
      </div>
    </div>
  </div>
</div>

Flag RibbonDirect linkRaw Link

The ribbon adapts the font size. The .ribbon-anchor will not be needed in every case.

Default

This is some content

Danger

This is some content

Warning

This is some content

Info

This is some content

<div class="row">
  <div class="col-sm-3">
    <div class="panel ribbon-anchor">
      <div class="ribbon-flag font-mini">
        Default
      </div>
      <div class="panel-body">
        <h2>
          This is some content
        </h2>
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="panel ribbon-anchor">
      <div class="ribbon-flag ribbon-flag-danger font-mini">
        Danger
      </div>
      <div class="panel-body">
        <h2>
          This is some content
        </h2>
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="panel">
      <div class="ribbon-flag ribbon-flag-warning">
        Warning
      </div>
      <div class="panel-body">
        <h2>
          This is some content
        </h2>
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="panel">
      <div class="ribbon-flag ribbon-flag-info font-h2">
        Info
      </div>
      <div class="panel-body">
        <h2>
          This is some content
        </h2>
      </div>
    </div>
  </div>
</div>

HelperDirect link

Animation Helper - Intro fade inDirect linkRaw Link

To display asynchronous content, use the .intro-ani-* class. The visibility will be toggled by .is-pending class on the wrapper element.

Status:is-pending


Content which fade in immediately.intro-ani-base
Content with a delay.intro-ani-late
Content with a long delay.intro-ani-later
<div class="clearfix">
  Status:<span class="label label--info" id="docs-intro-ani-label">is-pending</span>
  <div class="pull-right">
    <button class="btn btn-default btn-xs" data-states="["base","late","later"]" id="docs-intro-ani-action">Toggle</button>
  </div>
  <br><br>
</div>
<div class="row is-pending" id="docs-intro-ani-target">
  <div class="col-xs-4">
    <div class="intro-ani-base">
      Content which fade in immediately<code>.intro-ani-base</code>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="intro-ani-late">
      Content with a delay<code>.intro-ani-late</code>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="intro-ani-later">
      Content with a long delay<code>.intro-ani-later</code>
    </div>
  </div>
</div>

TooltipDirect linkRaw Link

The tooltip is adapted by bootstrap. Find more information about the API on the official page.

Turmoil has engulfed the Galactic Republic. T...50 Tooltip on top While the Congress of the Republic endlessly ...50 Tooltip on right This separatist movement, under the leadershi...50 Tooltip on left There is unrest in the Galactic Senate. Sever...50 Tooltip on bottom



<p>
  <span>Turmoil has engulfed the Galactic Republic. T...50</span> <a data-container="body" data-placement="top" data-toggle="tooltip" href="javascript:void();" title="Tooltip on top">Tooltip on top</a>
  <span>There is unrest in the Galactic Senate. Sever...50</span> <a data-container="body" data-placement="right" data-toggle="tooltip" href="javascript:void();" title="Tooltip on right">Tooltip on right</a>
  <span>While the Congress of the Republic endlessly ...50</span> <a data-container="body" data-placement="left" data-toggle="tooltip" href="javascript:void();" title="Tooltip on left">Tooltip on left</a>
  <span>There is unrest in the Galactic Senate. Sever...50</span> <a data-container="body" data-placement="bottom" data-toggle="tooltip" href="javascript:void();" title="Tooltip on bottom">Tooltip on bottom</a>
</p>
<br><br><button class="btn btn-default" data-container="body" data-placement="top" data-toggle="tooltip" data-trigger="click" title="Tooltip on top">Tooltip on top</button>&emsp;<button class="btn btn-default" data-container="body" data-placement="right" data-toggle="tooltip" data-trigger="click" title="Tooltip on right">Tooltip on right</button>&emsp;<button class="btn btn-default" data-container="body" data-placement="left" data-toggle="tooltip" data-trigger="click" title="Tooltip on left">Tooltip on left</button>&emsp;<button class="btn btn-default" data-container="body" data-placement="bottom" data-toggle="tooltip" data-trigger="click" title="Tooltip on bottom">Tooltip on bottom</button>&emsp;

Popovers StaticDirect linkRaw Link

Add small overlays of content, to any element for housing secondary information. Popovers with zero-length title and content are never displayed. Find more information about the API on the official page.

Senator Amidala, the form...30

As the Separatist Droid Army attempts to flee the besieged capital with their valuabl...90

Senator Amidala, the form...30

As the Separatist Droid Army attempts to flee the besieged capital with their valuabl...90

Senator Amidala, the form...30

As the Separatist Droid Army attempts to flee the besieged capital with their valuabl...90

Senator Amidala, the form...30

As the Separatist Droid Army attempts to flee the besieged capital with their valuabl...90

<div class="clearfix">
  <div class="popover top">
    <div class="arrow"></div>
    <h3 class="popover-title">
      As the Separatist Droid A...30
    </h3>
    <div class="popover-content">
      <p>
        Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vo...90
      </p>
    </div>
  </div>
  <div class="popover right">
    <div class="arrow"></div>
    <h3 class="popover-title">
      As the Separatist Droid A...30
    </h3>
    <div class="popover-content">
      <p>
        Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vo...90
      </p>
    </div>
  </div>
  <div class="popover left">
    <div class="arrow"></div>
    <h3 class="popover-title">
      As the Separatist Droid A...30
    </h3>
    <div class="popover-content">
      <p>
        Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vo...90
      </p>
    </div>
  </div>
  <div class="popover bottom">
    <div class="arrow"></div>
    <h3 class="popover-title">
      As the Separatist Droid A...30
    </h3>
    <div class="popover-content">
      <p>
        Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vo...90
      </p>
    </div>
  </div>
</div>

Popover DemoDirect linkRaw Link

<button class="btn btn-default" data-container="body" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="left" data-toggle="popover" type="button">Popover on left</button><button class="btn btn-default" data-container="body" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="top" data-toggle="popover" type="button">Popover on top</button><button class="btn btn-default" data-container="body" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus." data-placement="bottom" data-toggle="popover" type="button">Popover on bottom</button><button class="btn btn-default" data-container="body" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="right" data-toggle="popover" type="button">Popover on right</button>

Extended popover behaviourDirect linkRaw Link

To enforce showing a popover and hiding it by clicking outside of the related elements, you have to add the class .fn-popover-outside-click and set the trigger to data-trigger="manual" on the action element. Set data-html="true" to allow HTML in data-content.

A popover link
<a class="fn-popover-outside-click" data-container="body" data-content="Markup with <a href='#'>link</a>" data-html="true" data-trigger="manual" href="#">A popover link</a>

Mail to protector (mail_to_unscrambler.js)Direct link

To stop people from harvesting customer email adresses they can be rendered in reverse. So gro.elpmaxe@wlw will be shown as wlw@example.org (Read more).

To make them readable again include the scss-mixin scramble-email-address. The mixin is part of the defaults.scss package which you can include via the rails asset pipeline.

Once included the mixin will reverse all mailto-links regardless of the content. To prevent a regular unscrambled (meaning readable) email address from being reversed add the .unscrambled-email class.

For regular email adresses that should not be harvested:

  <a href='mailto:gro.elpmaxe@wlw?body=Body%20text&subject=Subject%20text'>gro.elpmaxe@wlw</a>

For regular email adresses:

  <a href='mailto:wlw@example.org' class='unscrambled-email' data-unscrambled=true>wlw@example.org</a>

Plugin dependency

The mail to protector requires the *wlw.helper.MailToUnscrambler()* JavaScript helper. It will cause the email address to be reversed when clicked so it will be the right way around in the email client. To prevent this from happening to unscrambled email addresses use `data-unscrambled=true`.

SpinnerDirect linkRaw Link

There are two ways to display a spinner. Via CSS only or JS. Local spinner overlay with backdrop.

<div class="spinner"></div>

Overlay with backdrop (spinner.js)Direct linkRaw Link

You can use the JS variant when to toggle the spinner on a specific element. Use .show() and .hide() to toggle the visibility. See more on the example.

War! The Republic is crumbling under attacks by the ruthless Sith Lord, Count Dooku. There are heroes on both sides. Evil is everywhere. There is unrest in the Galactic Senate. Several thousand solar systems have declared their intentions to leave the Republic. Turmoil has engulfed the Galactic Republic. The taxation of trade routes to outlying star systems is in dispute. Hoping to resolve the matter with a blockade of deadly battleships, the greedy Trade Federation has stopped all shipping to the small planet of Naboo. In a stunning move, the fiendish droid leader, General Grievous, has swept into the Republic capital and kidnapped Cha...650


<div id="doc-spinner-overlay-target" style="padding: 1rem">
  War! The Republic is crumbling under attacks by the ruthless Sith Lord, Count Dooku. There are heroes on both sides. Evil is everywhere. Hoping to resolve the matter with a blockade of deadly battleships, the greedy Trade Federation has stopped all shipping to the small planet of Naboo. Turmoil has engulfed the Galactic Republic. The taxation of trade routes to outlying star systems is in dispute. As the Separatist Droid Army attempts to flee the besieged capital with their valuable hostage, two Jedi Knights lead a desperate mission to rescue the captive Chancellor. While the Congress of the Republic endlessly debates this alarming chai...650
</div>
<br><br><button class="btn btn-default" id="doc-spinner-overlay">toggle spinner</button>
<script>
  window.onload = function(){
    var spinner = new wlw.helper.Spinner($('#doc-spinner-overlay-target'), { local: true, overlay: true });
    $('#doc-spinner-overlay').on('click', function() {
      if (spinner.isVisible()) {
        spinner.hide();
      }
      else {
        spinner.show();
      }
    });
  };
</script>

Flexible Box HelperDirect linkRaw Link

This helper allows you to assign one/more elements to fill up the rest of a horizontal row. You need a pair of 2 class selectors to produce this effect. The .flex selector must be assigned to the wrapper element. The .flex-fit-item must be assigned to the child element that should be fill up the row.

Basic behaviour

Fit element somewhere in the list

Standalone element

Multiple fit elements

<h4>
  Basic behaviour
</h4>
<div class="flex btn-group">
  <button class="flex-fit-item btn btn-primary">Fit element</button><button class="btn btn-info">Common</button>
</div>
<h4>
  Fit element somewhere in the list
</h4>
<div class="flex btn-group">
  <button class="btn btn-info">Common 1</button><button class="btn btn-info">Common 2</button><button class="flex-fit-item btn btn-primary">Fit element</button><button class="btn btn-info">Common 3</button>
</div>
<h4>
  Standalone element
</h4>
<div class="flex btn-group">
  <button class="flex-fit-item btn btn-primary">Fit element</button>
</div>
<h4>
  Multiple fit elements
</h4>
<div class="flex btn-group">
  <button class="btn btn-info">Common 1</button><button class="flex-fit-item btn btn-primary">First fit element</button><button class="btn btn-info">Common 2</button><button class="flex-fit-item btn btn-primary">Second fit element</button><button class="btn btn-info">Common 3</button>
</div>

Print HelperDirect link

A collection of useful helpers for print layouts. They only apply on @media print type.

Page break

The .print-page-break selector will force the follow content to print on a new page. It will ll try to print the including content on one page if you using it as a wrapper.

Text with background

The .print-text-block selector will display an inline element with white background in the print view.

Toggle VisibilityDirect linkRaw Link

Bootstrap gives you the "collapse" function. But it's messy and filled with animations which you sometimes don't need or want. The toggle visibility helper will give you a really simple show and hide function combined with a change of the trigger text like "Mehr anzeigen" will change to "Weniger anzeigen" when it is clicked.

Manchmal kann ein Text oder ein Bereich ganz sch..

Mehr anzeigenWeniger anzeigen

Manchmal kann ein Text oder ein Bereich ganz sch<span class="fn-toggle-visibility" data-target-id="extend-product-detail-text">..</span><span class="fn-toggle-visibility hidden" data-target-id="extend-product-detail-text">ön lang sein. Deshalb verkürzt man ihn lieber.</span>
<p>
  <a class="toggle-visibility-trigger fn-toggle-visibility-trigger" data-target="extend-product-detail-text" href="javascript:void(0);"><span>Mehr anzeigen</span><span>Weniger anzeigen</span></a>
</p>

Bookmark.jsDirect link

This plugin provides functionality to display bookmark buttons.

Example:

<ul class="fn-my-bookmark-list">
  <li data-bookmarkable-id="1">Company 1</li>
  <li data-bookmarkable-id="2">Company 2</li>
</ul>
$(function () {
  var options = { activeClass: 'is-active' };
  $('.fn-my-bookmarkable-list').wlwBookmark(options);
});

Options

Name Description
activeClass Class which is added to buttonSelector when element is bookmarked.

Events

Four events are triggered by the helper and can be used to react to bookmarking:

  • delete.wlw.bookmark
  • create.wlw.bookmark
  • deleted.wlw.bookmark
  • created.wlw.bookmark

UserInfo.jsDirect link

Provides methods to read user's jwt data and show/hide content based on user's login status.

isLoggedIn()

returns true if valid JSON wlw_user_info cookie exists

userInfo()

returns an object with properties matching the wlw_user_info cookie

$(selector).showUserInfo(options)

It iterates over selector's children and

  • If the user is logged in it
    • adds hiddenClass to .fn-auth-logged-in-hidden
    • removes hiddenClass from .fn-auth-logged-in-visible
    • iterates over the user info hash provided by auth_js and for each key sets the text of .fn-auth-user-[key] to the value
  • If the user is not logged in it
    • adds hiddenClass to .fn-auth-logged-in-visible
    • removes hiddenClass from .fn-auth-logged-in-hidden

The default hiddenClass is .hidden. Be careful when using it alongside .visible-xs etc..

Options

Name Description
hiddenClass Class to remove/add depending on user login status. Default: hidden

Organisms

Organisms are groups of molecules (and possibly atoms) joined together to form distinct section of an interface.

Organisms can consist of similar and/or disparate molecule types. For example, a masthead organism might consist of a logo, navigation, and search form, while a “product grid” organism might consist of the same product info molecule repeated over and over.

Building up from molecules to organisms encourages creating standalone, portable, reusable components.

HeaderDirect link

The page header skeleton is available with the rails helper method render_page_header. We provide further the helper methods render_header_navigation, render_header_search_form and render_navigation_common_items for more customization. See more on the Rails helper section.

Header Minimal VersionDirect linkRaw Link

<header class="head">
  <nav class="navbar">
    <div class="container">
      <ul class="nav navbar-nav navbar-right fn-mobile-nav"></ul>
    </div>
  </nav>
  <div class="container">
    <div class="row">
      <div class="col-lg-3 col-md-2 col-sm-2 col-xs-8">
        <a href="javascript:void(0)"><img alt="" class="header-brand" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTExcHgiIHdpZHRoPSIxNjVweCIgdmVyc2lvbj0iMS4xIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDE2NSAxMTEiPiA8ZGVmcz4gIDxwYXRoIGlkPSJwYXRoLTEiIGQ9Im0xMi41NDMtMC4wMDAxMjAyMWgxMzcuOTRjMCA1LjI3NTkgMC4wMSAzOC4wNDkgMC4wMiA2MS4zNDhoLTM1LjMxdjkuMDU2IDI2LjM2NmgtMTE1LjE5bDIuODYzN2UtMTIgLTg2LjU1MWMwLjgwODctNS45MTYzIDYuNDI0Ny0xMC4yMTkgMTIuNTQzLTEwLjIxOXoiLz4gIDxyYWRpYWxHcmFkaWVudCBpZD0icmFkaWFsR3JhZGllbnQtMyIgY3k9Ii0zLjExOTQlIiBjeD0iMTguNjM0JSIgcj0iOTcuMjQxJSI+ICAgPHN0b3Agc3RvcC1jb2xvcj0iIzI2NDM1RCIgb2Zmc2V0PSIwIi8+ICAgPHN0b3Agc3RvcC1jb2xvcj0iIzI2NDM1RCIgc3RvcC1vcGFjaXR5PSIwIiBvZmZzZXQ9IjEiLz4gIDwvcmFkaWFsR3JhZGllbnQ+ICA8cGF0aCBpZD0icGF0aC00IiBkPSJtMCAxMC4yMTljMC44MDg3LTUuOTE2MyA2LjQyNDctMTAuMjE5IDEyLjU0My0xMC4yMTlsMTM3Ljk0LTAuMDAwMTIwMjFjMCA1LjI3NTkgMC4wMSAzOC4wNDkgMC4wMiA2MS4zNDhoLTM1LjMxdjkuMDU2IDI2LjM2NmgtMTE1LjE5bDIuODZlLTEyIC04Ni41NTFoLTIuODZlLTEyeiIvPiAgPHJhZGlhbEdyYWRpZW50IGlkPSJyYWRpYWxHcmFkaWVudC02IiBjeT0iMTAwLjE0JSIgY3g9IjIzLjM5NCUiIHI9IjExNi41NSUiPiAgIDxzdG9wIHN0b3AtY29sb3I9IiNCOUQzNkEiIG9mZnNldD0iMCIvPiAgIDxzdG9wIHN0b3AtY29sb3I9IiM5QUM0MjciIG9mZnNldD0iLjQyOTQ1Ii8+ICAgPHN0b3Agc3RvcC1jb2xvcj0iIzk2QzIxRiIgb2Zmc2V0PSIuNzgwODkiLz4gICA8c3RvcCBzdG9wLWNvbG9yPSIjOTRDMTFBIiBvZmZzZXQ9IjEiLz4gIDwvcmFkaWFsR3JhZGllbnQ+IDwvZGVmcz4gPGcgaWQ9IlBhZ2UtMSIgZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsPSJub25lIj4gIDxnIGlkPSJ3bHctbG9nbyI+ICAgPGcgaWQ9ImxvZ28iPiAgICA8ZyBpZD0ibWFpbiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAuMDA5MTI5KSI+ICAgICA8bWFzayBpZD0ibWFzay0yIiBmaWxsPSJ3aGl0ZSI+ICAgICAgPHVzZSB4bGluazpocmVmPSIjcGF0aC0xIi8+ICAgICA8L21hc2s+ICAgICA8dXNlIGlkPSJiZyIgeGxpbms6aHJlZj0iI3BhdGgtMSIgZmlsbD0iIzBEMUMzNCIvPiAgICAgPG1hc2sgaWQ9Im1hc2stNSIgZmlsbD0id2hpdGUiPiAgICAgIDx1c2UgeGxpbms6aHJlZj0iI3BhdGgtNCIvPiAgICAgPC9tYXNrPiAgICAgPHVzZSBpZD0iZ3JhZGllbnQiIHhsaW5rOmhyZWY9IiNwYXRoLTQiIGZpbGw9InVybCgjcmFkaWFsR3JhZGllbnQtMykiLz4gICAgIDxwYXRoIGlkPSJjbGFpbSIgZmlsbD0iI2ZmZiIgbWFzaz0idXJsKCNtYXNrLTUpIiBkPSJtNDEuMDMgNzIuMjc0aDExLjg5NXYtMy40NjJoLTcuMTAydi0zLjI4Nmg1LjU2M3YtMy40MTRoLTUuNTYzdi0zLjYzNGg3LjM1MXYtMy40NjJoLTEyLjE0NHYxNy4yNTh6bTE0LjIyOSAwaDcuMjVjNC4zNDYgMCA2LjUzMi0xLjY2OSA2LjUzMi01LjM3OSAwLTIuMzY3LTEuMDY4LTMuNTg2LTIuODU1LTQuMzU5di0wLjA5OWwzLjg0OC03LjQyMWgtNS4wMTVsLTMuMTUzIDYuMjc1aC0xLjc2NXYtNi4yNzVoLTQuODQydjE3LjI1OHptNi41ODEtOC4wNjljMS43MTMgMCAyLjQwOCAwLjgyMiAyLjQwOCAyLjQ2NSAwIDEuNTk0LTAuNzIgMi4zMTgtMi40NTcgMi4zMThoLTEuNzM5di00Ljc4M2gxLjc4OHptLTMxLjQxMy0yOS42MzZoNC44NDN2MTcuMjU4aC00Ljg0M3YtMTcuMjU4em03LjM3NSAxNy4yNThoMTEuODk2di0zLjQ2MmgtNy4xMDN2LTMuMjg2aDUuNTYzdi0zLjQxM2gtNS41NjN2LTMuNjM1aDcuMzUxdi0zLjQ2MmgtMTIuMTQ0djE3LjI1OHptMTQuMjI5IDBoMTEuODd2LTMuNDYyaC03LjAyOHYtMy45MDhoNS40ODl2LTMuMzg3aC01LjQ4OXYtNi41MDFoLTQuODQydjE3LjI1OHptMTMuNjA5IDBoMTEuODkzdi0zLjQ2MmgtNy4xMDJ2LTMuMjg2aDUuNTYydi0zLjQxM2gtNS41NjJ2LTMuNjM1aDcuMzUxdi0zLjQ2MmgtMTIuMTQydjE3LjI1OHptMTQuMTA0IDBoNy4yNDhjNC4zNDYgMCA2LjUzMS0xLjY2OSA2LjUzMS01LjM3OCAwLTIuMzY3LTEuMDY3LTMuNTg2LTIuODU0LTQuMzU5di0wLjA5OWwzLjg0OC03LjQyMmgtNS4wMTVsLTMuMTU3IDYuMjc2aC0xLjc2MXYtNi4yNzZoLTQuODR2MTcuMjU4em02LjU3OS04LjA2OGMxLjcxMyAwIDIuNDA4IDAuODIyIDIuNDA4IDIuNDY1IDAgMS41OTQtMC43MjEgMi4zMTctMi40NiAyLjMxN2gtMS43MzZ2LTQuNzgyaDEuNzg4em0xMi45NTkgNC42MDZoLTQuNTE4djMuNDYyaDEzLjg3NnYtMy40NjJoLTQuNTF2LTEzLjc5NmgtNC44NDh2MTMuNzk2em0tODIuOTgzIDIzLjkwOWg0Ljg0MWwyLjI1OS0xMC44ODJoMC4xMDFsMi43NTYgMTAuODgyaDMuODc1bDIuNzMtMTAuODgyaDAuMDk5bDIuNDA5IDEwLjg4Mmg0LjE5OGwtNC4xMjMtMTcuMjU4aC00Ljg0MmwtMi41ODQgMTAuNjM0aC0wLjA3NWwtMi42ODEtMTAuNjM0aC00Ljg2NmwtNC4wOTcgMTcuMjU4em0xLjExNi0yMC40NDdoNC44NDN2LTEzLjc5Nmg2LjUzMXYtMy40NjJoLTExLjM3NHYxNy4yNTh6bS0xLjExNi0yMC40NDZoNC44NDFsMi4yNTktMTAuODgzaDAuMTAxbDIuNzU2IDEwLjg4M2gzLjg3NWwyLjczLTEwLjg4M2gwLjA5OWwyLjQwOSAxMC44ODNoNC4xOThsLTQuMTIzLTE3LjI1OGgtNC44NDJsLTIuNTg0IDEwLjYzNGgtMC4wNzVsLTIuNjgxLTEwLjYzNGgtNC44NjZsLTQuMDk3IDE3LjI1OHptMjcuNzM2IDBoNS4xNDFsNS45NTgtMTcuMjU4aC00LjkxNWwtMS4xNDQgMy40MTFoLTUuNjZsLTEuMDY5LTMuNDExaC00LjM0NWw2LjAzNCAxNy4yNTh6bTAuMzI0LTEwLjczM2gzLjc0OWwtMS44MzggNS43MjhoLTAuMWwtMS44MTEtNS43Mjh6bTExLjk2OC01LjgwMnYzLjUzNWMxLjUxNS0wLjU0OCAzLjEwNC0wLjk3MiA1LjA5LTAuOTcyIDEuOTM3IDAgMi42ODIgMC41NzQgMi42ODIgMS42MiAwIDAuOTk2LTAuNDQ3IDEuMzIxLTIuMTEgMS42NDNsLTEuMjkxIDAuMjQ5Yy0yLjczMyAwLjUyNC00LjQyIDEuNzQzLTQuNDIgNS4zNTUgMCAzLjI2MyAyLjAzNSA1LjQwNSA2LjQwNyA1LjQwNSAyLjczIDAgNC4wOTYtMC40MjQgNS4wOS0wLjg5NnYtMy40ODljLTEuMTkzIDAuNDI0LTIuNjgzIDAuODIyLTQuNjQ1IDAuODIyLTEuNTM4IDAtMi4zMzQtMC40NzMtMi4zMzQtMS40NjggMC0wLjkyMSAwLjQ5OC0xLjI3IDIuMDEyLTEuNTdsMS4yOTEtMC4yNDhjMy4wMjktMC41NzQgNC43MTgtMS43OTMgNC43MTgtNS4zMDQgMC0zLjY4Ny0yLjM1OC01LjcwNS02LjgyOC01LjcwNS0yLjQwOCAwLTQuNDIgMC4zNzUtNS42NjIgMS4wMjN6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2Mi40NzEgNDMuMDQ4KSBzY2FsZSgxIC0xKSB0cmFuc2xhdGUoLTYyLjQ3MSAtNDMuMDQ4KSIvPiAgICA8L2c+ICAgIDxnIGlkPSJzdWIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEzOS43IDg2KSBzY2FsZSgxIC0xKSB0cmFuc2xhdGUoLTI1IC0yNSkiPiAgICAgPHBhdGggaWQ9IlBhdGgiIGZpbGw9InVybCgjcmFkaWFsR3JhZGllbnQtNikiIGQ9Im0wLjQ5Mjk5IDQ5LjY1M3YtNDAuMzk4LTkuMDU0OGwzOS42NTEtMC4wMDAwMWM1LjM4NSAwIDkuNzU5IDMuNzA3NiA5Ljc1OSA5LjA1NTJ2MzAuNDE2YzAgNC44OTItMy42NjMgOS4yNzQtOC40MTIgOS45ODJoLTQwLjk5OC0wLjAwMDAxeiIvPiAgICAgPHBhdGggaWQ9Im1hZ25pZmllciIgZmlsbD0iI0ZBRkFGQSIgZD0ibTI2LjMxMyA0MC42ODhjMi42Mi0wLjc3OCA0Ljk5Mi0yLjM3MyA2LjcyOC00LjYwNC0yLjI4MyAzLjQ1OS02LjA5NCA1Ljc2OC0xMC40NSA1Ljg0Ny03LjEzNSAwLjEyOC0xMy4wMzgtNS43NTQtMTMuMTctMTMuMTIxLTAuMDU1LTIuOTMxIDAuODI2LTUuNjU0IDIuMzQzLTcuODg1LTAuNDQ2IDAuNzI2LTAuODM0IDEuNS0xLjE0NiAyLjMyOC0xLjMwMjYgMy40NDQtMS4xMTU3IDcuMDg3IDAuMjM4IDEwLjE4OS0xLjM1MzctMy4xMDItMS41NDA2LTYuNzQ1LTAuMjM4LTEwLjE4OSAwLjMxMi0wLjgyOCAwLjctMS42MDIgMS4xNDYtMi4zMjggMi4yOTUtMy4zNzcgNi4wNTctNS42MjQgMTAuMzUxLTUuNzAxIDcuMTMxLTAuMTI5IDEzLjAzOCA1Ljc1NyAxMy4xNjkgMTMuMTIgMC4wNTIgMi44NjYtMC43ODYgNS41MzUtMi4yNDMgNy43NC0xLjczNiAyLjIzMS00LjEwOCAzLjgyNi02LjcyOCA0LjYwNHptLTMuODEtMy42OTZjNC40MjItMC4wODEgNy45NC0zLjkxIDcuODU1LTguNTU2LTAuMDgxLTQuNjUtMy43MzMtOC4zNDgtOC4xNTYtOC4yNzMtNC40MTkgMC4wODMtNy45MzkgMy45MTUtNy44NTggOC41NTggMC4wODggNC42NDQgMy43MzMgOC4zNDggOC4xNTkgOC4yNzF6bTEwLjU2MS0yMC4zNjdjLTAuNDk2LTAuNTA2LTEuMDI0LTAuOTc3LTEuNTczLTEuNDE2bC0wLjU0MyAwLjU2NGMxLjI5MyAwLjk1NiAyLjQ2NCAyLjEyMSAzLjQyIDMuNDUxbDYuMzQtNi44MDcgMC4wMDktMC4wMTQtNi4yNzkgNS44NDhjLTAuNDE2LTAuNTgtMC44NzktMS4xMi0xLjM3NC0xLjYyNiAwLjQ5NSAwLjUwNiAwLjk1OCAxLjA0NiAxLjM3NCAxLjYyNmw2LjI3OS01Ljg0OCAwLjExOS0wLjI4NGMwLTEuNjQyLTEuMjUxLTMuMTExOC0zLjAwMS0zLjI0MDMtMC4yNTktMC4wMjI4LTAuNDE2IDAuMTY4OS0wLjQxNiAwLjE2ODlsLTUuOTI4IDYuMTYxNGMwLjU0OSAwLjQzOSAxLjA3NyAwLjkxIDEuNTczIDEuNDE2eiIvPiAgICAgPHBhdGggaWQ9Im1hZ25pZmllci1zaGFkb3ciIGZpbGw9IiM4RkIyMkMiIGQ9Im0yMi43NDggMTQuNjA3Yy0wLjA3NSAwLTAuMTUxIDAuMDAxLTAuMjI3IDAuMDAzLTQuNDM3IDAuMDc5LTguMzE4IDIuNDc0LTEwLjU2OCA2LjA0MyAyLjMxLTMuMjI1IDUuOTg1LTUuMzU0IDEwLjE2Mi01LjQyOSAwLjA3Ny0wLjAwMSAwLjE1My0wLjAwMiAwLjIzLTAuMDAyIDcuMDI3IDAuMDAxIDEyLjgwOSA1LjgzOCAxMi45MzkgMTMuMTIyIDAuMDM1IDEuODMtMC4yOTQgMy41OC0wLjkxMyA1LjE4MSAwLjgzMS0xLjc5MiAxLjI5NC0zLjc5NyAxLjI1NS01LjkxNS0wLjEyOS03LjIxNi01Ljg4My0xMy4wMDMtMTIuODc4LTEzLjAwM3ptLTguMjkzIDEyLjY5NWMtMC4wNjcgMC40NjUtMC4xMTggMC45MzQtMC4xMTEgMS40MTkgMC4wODggNC41OTcgMy42NiA4LjI3MiA4LjAyNSA4LjI3MiAwLjA0NCAwIDAuMDg5IDAgMC4xMzQtMC4wMDEgMy4zMzItMC4wNjIgNi4xNDctMi4yNTIgNy4yOTgtNS4zMTUtMS4xOSAyLjQzMS0zLjM3NyA0LjIwNS02LjA3NCA0LjU0NC0wLjMxNSAwLjA0LTAuNjMgMC4wNTktMC45NDEgMC4wNTktNC4xMDUgMC03LjcxNC0zLjQwNS04LjI5Ny04LjAyMS0wLjA0MS0wLjMyNS0wLjAyNC0wLjYzOC0wLjAzNC0wLjk1N3ptMjMuMjgyLTE5LjM1OGMtMC4yMzMgMC0wLjM3MiAwLjE3MDgtMC4zNzIgMC4xNzA4bC02LjQxNyA2LjY5Nzh2MC45NTdsMC4wMDIgMC4wMDIgNi40NjktNi43MjQ0czAuMTQtMC4xNzA4IDAuMzczLTAuMTcwOGMwLjAxMyAwIDAuMDI4IDAuMDAwNiAwLjA0MyAwLjAwMTMgMS40NjcgMC4xMDgyIDIuNTc0IDEuMTYzOSAyLjg5NSAyLjQ2OTlsMC4wNTEtMC4xNjFjMC0xLjY0MzMtMS4yNTEtMy4xMTIyLTMuMDAyLTMuMjQwNi0wLjAxNS0wLjAwMTMtMC4wMjktMC4wMDItMC4wNDItMC4wMDJ6Ii8+ICAgIDwvZz4gICA8L2c+ICA8L2c+IDwvZz48L3N2Zz4="></a>
      </div>
      <div class="col-lg-6 col-md-8 col-sm-9 col-xs-12 header-divide hidden-print"></div>
    </div>
  </div>
</header>

Header Maximal VersionDirect linkRaw Link

The header navigation elements are aligned to the right. The number of navigation elements, may vary from view to view but the order of the elements should always the same.

The rules are:

  • Marketing Links are always set as a first left element in the navigation
  • The language switch menu is always behind the marketing link, or as the first, if there is no marketing link
  • The login/logout link is always the last element on the right in the navigation
Search for:
<header class="head">
  <nav class="navbar">
    <div class="container">
      <ul class="nav navbar-nav navbar-right fn-mobile-nav">
        <li class="nav-item">
          <a class="nav-action link-inverse" href="javascript:void(0)">Firma kostenfrei eintragen</a>
        </li>
        <li class="nav-item">
          <a aria-expanded="false" class="dropdown-toggle nav-action" data-toggle="dropdown" href="#">English<i class="caret"></i></a>
          <ul class="dropdown-menu" role="menu">
            <li class="nav-item">
              <a class="nav-action" href="#de">Deutsch</a>
            </li>
            <li class="nav-item">
              <a class="nav-action" href="#fr">Français</a>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <div class="nav-action nav-profile text-truncate" data-placement="bottom" data-toggle="tooltip" title="The place to show Company name to show edge case Inc.">
            firstname.middlename.lastname@example.org
          </div>
        </li>
        <li class="divider visible-xs" role="separator"></li>
        <li class="nav-item">
          <a class="nav-action" href="javascript:void(0)">Abmelden</a>
        </li>
      </ul>
    </div>
    <button class="navbar-toggle fn-mobile-nav-trigger" type="button"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
  </nav>
  <div class="container">
    <div class="row">
      <div class="col-lg-3 col-md-2 col-sm-2 col-xs-8">
        <a><img alt="" class="header-brand" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTExcHgiIHdpZHRoPSIxNjVweCIgdmVyc2lvbj0iMS4xIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDE2NSAxMTEiPiA8ZGVmcz4gIDxwYXRoIGlkPSJwYXRoLTEiIGQ9Im0xMi41NDMtMC4wMDAxMjAyMWgxMzcuOTRjMCA1LjI3NTkgMC4wMSAzOC4wNDkgMC4wMiA2MS4zNDhoLTM1LjMxdjkuMDU2IDI2LjM2NmgtMTE1LjE5bDIuODYzN2UtMTIgLTg2LjU1MWMwLjgwODctNS45MTYzIDYuNDI0Ny0xMC4yMTkgMTIuNTQzLTEwLjIxOXoiLz4gIDxyYWRpYWxHcmFkaWVudCBpZD0icmFkaWFsR3JhZGllbnQtMyIgY3k9Ii0zLjExOTQlIiBjeD0iMTguNjM0JSIgcj0iOTcuMjQxJSI+ICAgPHN0b3Agc3RvcC1jb2xvcj0iIzI2NDM1RCIgb2Zmc2V0PSIwIi8+ICAgPHN0b3Agc3RvcC1jb2xvcj0iIzI2NDM1RCIgc3RvcC1vcGFjaXR5PSIwIiBvZmZzZXQ9IjEiLz4gIDwvcmFkaWFsR3JhZGllbnQ+ICA8cGF0aCBpZD0icGF0aC00IiBkPSJtMCAxMC4yMTljMC44MDg3LTUuOTE2MyA2LjQyNDctMTAuMjE5IDEyLjU0My0xMC4yMTlsMTM3Ljk0LTAuMDAwMTIwMjFjMCA1LjI3NTkgMC4wMSAzOC4wNDkgMC4wMiA2MS4zNDhoLTM1LjMxdjkuMDU2IDI2LjM2NmgtMTE1LjE5bDIuODZlLTEyIC04Ni41NTFoLTIuODZlLTEyeiIvPiAgPHJhZGlhbEdyYWRpZW50IGlkPSJyYWRpYWxHcmFkaWVudC02IiBjeT0iMTAwLjE0JSIgY3g9IjIzLjM5NCUiIHI9IjExNi41NSUiPiAgIDxzdG9wIHN0b3AtY29sb3I9IiNCOUQzNkEiIG9mZnNldD0iMCIvPiAgIDxzdG9wIHN0b3AtY29sb3I9IiM5QUM0MjciIG9mZnNldD0iLjQyOTQ1Ii8+ICAgPHN0b3Agc3RvcC1jb2xvcj0iIzk2QzIxRiIgb2Zmc2V0PSIuNzgwODkiLz4gICA8c3RvcCBzdG9wLWNvbG9yPSIjOTRDMTFBIiBvZmZzZXQ9IjEiLz4gIDwvcmFkaWFsR3JhZGllbnQ+IDwvZGVmcz4gPGcgaWQ9IlBhZ2UtMSIgZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsPSJub25lIj4gIDxnIGlkPSJ3bHctbG9nbyI+ICAgPGcgaWQ9ImxvZ28iPiAgICA8ZyBpZD0ibWFpbiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAuMDA5MTI5KSI+ICAgICA8bWFzayBpZD0ibWFzay0yIiBmaWxsPSJ3aGl0ZSI+ICAgICAgPHVzZSB4bGluazpocmVmPSIjcGF0aC0xIi8+ICAgICA8L21hc2s+ICAgICA8dXNlIGlkPSJiZyIgeGxpbms6aHJlZj0iI3BhdGgtMSIgZmlsbD0iIzBEMUMzNCIvPiAgICAgPG1hc2sgaWQ9Im1hc2stNSIgZmlsbD0id2hpdGUiPiAgICAgIDx1c2UgeGxpbms6aHJlZj0iI3BhdGgtNCIvPiAgICAgPC9tYXNrPiAgICAgPHVzZSBpZD0iZ3JhZGllbnQiIHhsaW5rOmhyZWY9IiNwYXRoLTQiIGZpbGw9InVybCgjcmFkaWFsR3JhZGllbnQtMykiLz4gICAgIDxwYXRoIGlkPSJjbGFpbSIgZmlsbD0iI2ZmZiIgbWFzaz0idXJsKCNtYXNrLTUpIiBkPSJtNDEuMDMgNzIuMjc0aDExLjg5NXYtMy40NjJoLTcuMTAydi0zLjI4Nmg1LjU2M3YtMy40MTRoLTUuNTYzdi0zLjYzNGg3LjM1MXYtMy40NjJoLTEyLjE0NHYxNy4yNTh6bTE0LjIyOSAwaDcuMjVjNC4zNDYgMCA2LjUzMi0xLjY2OSA2LjUzMi01LjM3OSAwLTIuMzY3LTEuMDY4LTMuNTg2LTIuODU1LTQuMzU5di0wLjA5OWwzLjg0OC03LjQyMWgtNS4wMTVsLTMuMTUzIDYuMjc1aC0xLjc2NXYtNi4yNzVoLTQuODQydjE3LjI1OHptNi41ODEtOC4wNjljMS43MTMgMCAyLjQwOCAwLjgyMiAyLjQwOCAyLjQ2NSAwIDEuNTk0LTAuNzIgMi4zMTgtMi40NTcgMi4zMThoLTEuNzM5di00Ljc4M2gxLjc4OHptLTMxLjQxMy0yOS42MzZoNC44NDN2MTcuMjU4aC00Ljg0M3YtMTcuMjU4em03LjM3NSAxNy4yNThoMTEuODk2di0zLjQ2MmgtNy4xMDN2LTMuMjg2aDUuNTYzdi0zLjQxM2gtNS41NjN2LTMuNjM1aDcuMzUxdi0zLjQ2MmgtMTIuMTQ0djE3LjI1OHptMTQuMjI5IDBoMTEuODd2LTMuNDYyaC03LjAyOHYtMy45MDhoNS40ODl2LTMuMzg3aC01LjQ4OXYtNi41MDFoLTQuODQydjE3LjI1OHptMTMuNjA5IDBoMTEuODkzdi0zLjQ2MmgtNy4xMDJ2LTMuMjg2aDUuNTYydi0zLjQxM2gtNS41NjJ2LTMuNjM1aDcuMzUxdi0zLjQ2MmgtMTIuMTQydjE3LjI1OHptMTQuMTA0IDBoNy4yNDhjNC4zNDYgMCA2LjUzMS0xLjY2OSA2LjUzMS01LjM3OCAwLTIuMzY3LTEuMDY3LTMuNTg2LTIuODU0LTQuMzU5di0wLjA5OWwzLjg0OC03LjQyMmgtNS4wMTVsLTMuMTU3IDYuMjc2aC0xLjc2MXYtNi4yNzZoLTQuODR2MTcuMjU4em02LjU3OS04LjA2OGMxLjcxMyAwIDIuNDA4IDAuODIyIDIuNDA4IDIuNDY1IDAgMS41OTQtMC43MjEgMi4zMTctMi40NiAyLjMxN2gtMS43MzZ2LTQuNzgyaDEuNzg4em0xMi45NTkgNC42MDZoLTQuNTE4djMuNDYyaDEzLjg3NnYtMy40NjJoLTQuNTF2LTEzLjc5NmgtNC44NDh2MTMuNzk2em0tODIuOTgzIDIzLjkwOWg0Ljg0MWwyLjI1OS0xMC44ODJoMC4xMDFsMi43NTYgMTAuODgyaDMuODc1bDIuNzMtMTAuODgyaDAuMDk5bDIuNDA5IDEwLjg4Mmg0LjE5OGwtNC4xMjMtMTcuMjU4aC00Ljg0MmwtMi41ODQgMTAuNjM0aC0wLjA3NWwtMi42ODEtMTAuNjM0aC00Ljg2NmwtNC4wOTcgMTcuMjU4em0xLjExNi0yMC40NDdoNC44NDN2LTEzLjc5Nmg2LjUzMXYtMy40NjJoLTExLjM3NHYxNy4yNTh6bS0xLjExNi0yMC40NDZoNC44NDFsMi4yNTktMTAuODgzaDAuMTAxbDIuNzU2IDEwLjg4M2gzLjg3NWwyLjczLTEwLjg4M2gwLjA5OWwyLjQwOSAxMC44ODNoNC4xOThsLTQuMTIzLTE3LjI1OGgtNC44NDJsLTIuNTg0IDEwLjYzNGgtMC4wNzVsLTIuNjgxLTEwLjYzNGgtNC44NjZsLTQuMDk3IDE3LjI1OHptMjcuNzM2IDBoNS4xNDFsNS45NTgtMTcuMjU4aC00LjkxNWwtMS4xNDQgMy40MTFoLTUuNjZsLTEuMDY5LTMuNDExaC00LjM0NWw2LjAzNCAxNy4yNTh6bTAuMzI0LTEwLjczM2gzLjc0OWwtMS44MzggNS43MjhoLTAuMWwtMS44MTEtNS43Mjh6bTExLjk2OC01LjgwMnYzLjUzNWMxLjUxNS0wLjU0OCAzLjEwNC0wLjk3MiA1LjA5LTAuOTcyIDEuOTM3IDAgMi42ODIgMC41NzQgMi42ODIgMS42MiAwIDAuOTk2LTAuNDQ3IDEuMzIxLTIuMTEgMS42NDNsLTEuMjkxIDAuMjQ5Yy0yLjczMyAwLjUyNC00LjQyIDEuNzQzLTQuNDIgNS4zNTUgMCAzLjI2MyAyLjAzNSA1LjQwNSA2LjQwNyA1LjQwNSAyLjczIDAgNC4wOTYtMC40MjQgNS4wOS0wLjg5NnYtMy40ODljLTEuMTkzIDAuNDI0LTIuNjgzIDAuODIyLTQuNjQ1IDAuODIyLTEuNTM4IDAtMi4zMzQtMC40NzMtMi4zMzQtMS40NjggMC0wLjkyMSAwLjQ5OC0xLjI3IDIuMDEyLTEuNTdsMS4yOTEtMC4yNDhjMy4wMjktMC41NzQgNC43MTgtMS43OTMgNC43MTgtNS4zMDQgMC0zLjY4Ny0yLjM1OC01LjcwNS02LjgyOC01LjcwNS0yLjQwOCAwLTQuNDIgMC4zNzUtNS42NjIgMS4wMjN6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2Mi40NzEgNDMuMDQ4KSBzY2FsZSgxIC0xKSB0cmFuc2xhdGUoLTYyLjQ3MSAtNDMuMDQ4KSIvPiAgICA8L2c+ICAgIDxnIGlkPSJzdWIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEzOS43IDg2KSBzY2FsZSgxIC0xKSB0cmFuc2xhdGUoLTI1IC0yNSkiPiAgICAgPHBhdGggaWQ9IlBhdGgiIGZpbGw9InVybCgjcmFkaWFsR3JhZGllbnQtNikiIGQ9Im0wLjQ5Mjk5IDQ5LjY1M3YtNDAuMzk4LTkuMDU0OGwzOS42NTEtMC4wMDAwMWM1LjM4NSAwIDkuNzU5IDMuNzA3NiA5Ljc1OSA5LjA1NTJ2MzAuNDE2YzAgNC44OTItMy42NjMgOS4yNzQtOC40MTIgOS45ODJoLTQwLjk5OC0wLjAwMDAxeiIvPiAgICAgPHBhdGggaWQ9Im1hZ25pZmllciIgZmlsbD0iI0ZBRkFGQSIgZD0ibTI2LjMxMyA0MC42ODhjMi42Mi0wLjc3OCA0Ljk5Mi0yLjM3MyA2LjcyOC00LjYwNC0yLjI4MyAzLjQ1OS02LjA5NCA1Ljc2OC0xMC40NSA1Ljg0Ny03LjEzNSAwLjEyOC0xMy4wMzgtNS43NTQtMTMuMTctMTMuMTIxLTAuMDU1LTIuOTMxIDAuODI2LTUuNjU0IDIuMzQzLTcuODg1LTAuNDQ2IDAuNzI2LTAuODM0IDEuNS0xLjE0NiAyLjMyOC0xLjMwMjYgMy40NDQtMS4xMTU3IDcuMDg3IDAuMjM4IDEwLjE4OS0xLjM1MzctMy4xMDItMS41NDA2LTYuNzQ1LTAuMjM4LTEwLjE4OSAwLjMxMi0wLjgyOCAwLjctMS42MDIgMS4xNDYtMi4zMjggMi4yOTUtMy4zNzcgNi4wNTctNS42MjQgMTAuMzUxLTUuNzAxIDcuMTMxLTAuMTI5IDEzLjAzOCA1Ljc1NyAxMy4xNjkgMTMuMTIgMC4wNTIgMi44NjYtMC43ODYgNS41MzUtMi4yNDMgNy43NC0xLjczNiAyLjIzMS00LjEwOCAzLjgyNi02LjcyOCA0LjYwNHptLTMuODEtMy42OTZjNC40MjItMC4wODEgNy45NC0zLjkxIDcuODU1LTguNTU2LTAuMDgxLTQuNjUtMy43MzMtOC4zNDgtOC4xNTYtOC4yNzMtNC40MTkgMC4wODMtNy45MzkgMy45MTUtNy44NTggOC41NTggMC4wODggNC42NDQgMy43MzMgOC4zNDggOC4xNTkgOC4yNzF6bTEwLjU2MS0yMC4zNjdjLTAuNDk2LTAuNTA2LTEuMDI0LTAuOTc3LTEuNTczLTEuNDE2bC0wLjU0MyAwLjU2NGMxLjI5MyAwLjk1NiAyLjQ2NCAyLjEyMSAzLjQyIDMuNDUxbDYuMzQtNi44MDcgMC4wMDktMC4wMTQtNi4yNzkgNS44NDhjLTAuNDE2LTAuNTgtMC44NzktMS4xMi0xLjM3NC0xLjYyNiAwLjQ5NSAwLjUwNiAwLjk1OCAxLjA0NiAxLjM3NCAxLjYyNmw2LjI3OS01Ljg0OCAwLjExOS0wLjI4NGMwLTEuNjQyLTEuMjUxLTMuMTExOC0zLjAwMS0zLjI0MDMtMC4yNTktMC4wMjI4LTAuNDE2IDAuMTY4OS0wLjQxNiAwLjE2ODlsLTUuOTI4IDYuMTYxNGMwLjU0OSAwLjQzOSAxLjA3NyAwLjkxIDEuNTczIDEuNDE2eiIvPiAgICAgPHBhdGggaWQ9Im1hZ25pZmllci1zaGFkb3ciIGZpbGw9IiM4RkIyMkMiIGQ9Im0yMi43NDggMTQuNjA3Yy0wLjA3NSAwLTAuMTUxIDAuMDAxLTAuMjI3IDAuMDAzLTQuNDM3IDAuMDc5LTguMzE4IDIuNDc0LTEwLjU2OCA2LjA0MyAyLjMxLTMuMjI1IDUuOTg1LTUuMzU0IDEwLjE2Mi01LjQyOSAwLjA3Ny0wLjAwMSAwLjE1My0wLjAwMiAwLjIzLTAuMDAyIDcuMDI3IDAuMDAxIDEyLjgwOSA1LjgzOCAxMi45MzkgMTMuMTIyIDAuMDM1IDEuODMtMC4yOTQgMy41OC0wLjkxMyA1LjE4MSAwLjgzMS0xLjc5MiAxLjI5NC0zLjc5NyAxLjI1NS01LjkxNS0wLjEyOS03LjIxNi01Ljg4My0xMy4wMDMtMTIuODc4LTEzLjAwM3ptLTguMjkzIDEyLjY5NWMtMC4wNjcgMC40NjUtMC4xMTggMC45MzQtMC4xMTEgMS40MTkgMC4wODggNC41OTcgMy42NiA4LjI3MiA4LjAyNSA4LjI3MiAwLjA0NCAwIDAuMDg5IDAgMC4xMzQtMC4wMDEgMy4zMzItMC4wNjIgNi4xNDctMi4yNTIgNy4yOTgtNS4zMTUtMS4xOSAyLjQzMS0zLjM3NyA0LjIwNS02LjA3NCA0LjU0NC0wLjMxNSAwLjA0LTAuNjMgMC4wNTktMC45NDEgMC4wNTktNC4xMDUgMC03LjcxNC0zLjQwNS04LjI5Ny04LjAyMS0wLjA0MS0wLjMyNS0wLjAyNC0wLjYzOC0wLjAzNC0wLjk1N3ptMjMuMjgyLTE5LjM1OGMtMC4yMzMgMC0wLjM3MiAwLjE3MDgtMC4zNzIgMC4xNzA4bC02LjQxNyA2LjY5Nzh2MC45NTdsMC4wMDIgMC4wMDIgNi40NjktNi43MjQ0czAuMTQtMC4xNzA4IDAuMzczLTAuMTcwOGMwLjAxMyAwIDAuMDI4IDAuMDAwNiAwLjA0MyAwLjAwMTMgMS40NjcgMC4xMDgyIDIuNTc0IDEuMTYzOSAyLjg5NSAyLjQ2OTlsMC4wNTEtMC4xNjFjMC0xLjY0MzMtMS4yNTEtMy4xMTIyLTMuMDAyLTMuMjQwNi0wLjAxNS0wLjAwMTMtMC4wMjktMC4wMDItMC4wNDItMC4wMDJ6Ii8+ICAgIDwvZz4gICA8L2c+ICA8L2c+IDwvZz48L3N2Zz4="></a>
      </div>
      <div class="col-lg-6 col-md-8 col-sm-9 col-xs-12 header-divide">
        <form accept-charset="UTF-8" action="#" class="search-form" id="search-form" method="get">
          <b class="search-form-action">Search for:</b><br class="visible-xs"><input autocomplete="off" class="search-form-radio" id="company-input-radio" name="search_type" type="radio" value="company_search"><label class="search-form-label" for="company-input-radio">Suppliers</label><input autocomplete="off" class="change-form-on-checked search-form-radio" data-search-type="products" id="product-input-radio" name="search_type" type="radio" value="product_search"><label class="search-form-label" for="product-input-radio">Products<span class="label label--info">BETA</span></label>
          <div class="input-group search-input-group">
            <input class="form-control" id="q" name="q" placeholder="e.g. packaging machines" type="text" value="">
            <div class="input-group-btn">
              <button class="btn search-input-dropdown hide-on-checked" data-toggle="dropdown" type="button"><span>In company products</span><span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li>
                  <a data-search-type="categories">In company products</a>
                </li>
                <li>
                  <a data-search-type="companies">In company name</a>
                </li>
              </ul>
              <button class="btn btn-primary btn-icon color-on-checked" type="submit"><span class="sr-only">Search in:</span><i class="icon icon-search"></i></button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</header>

ContentDirect link

Content Head Element Direct linkRaw Link

The .content-head is a lightweight component that spans the entire viewport.

It does not belong into a .container. Instead you will probably want to have a .container inside of the .content-head.

To be used right after/beneath the page header.

Replaces .page-head which is deprecated.

Hoping to resolve the matter with a blockade of deadly battleships, the greedy Trade Federation has stopped all shipping to the small planet of ...150

Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vote on the critical issue of creating an ARMY OF THE REPUBLI...150

<div class="content-head">
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <p>
          This separatist movement, under the leadership of the mysterious Count Dooku, has made it difficult for the limited number of Jedi Knights to ma...150
        </p>
      </div>
      <div class="col-sm-6">
        <p>
          In a stunning move, the fiendish droid leader, General Grievous, has swept into the Republic capital and kidnapped Chancellor Palpatine, leader ...150
        </p>
      </div>
    </div>
  </div>
</div>

Sub-navbarDirect linkRaw Link

The sub-navbar is meant to be positioned beneath the page header to display tab-navigations or single links.


<div class="sub-navbar">
  <div class="container sub-navbar-container">
    <p class="font-weight-bold">
      Verpackung und Verpackungstechnik
    </p>
    <ul class="list-inline sub-navbar-list">
      <li>
        <a href="javascript:void()">Verpackungen</a>
      </li>
      <li>
        <a href="javascript:void()">Ettiketieren und Kennzeichnen</a>
      </li>
    </ul>
  </div>
</div>
<br>
<div class="sub-navbar">
  <div class="container sub-navbar-container">
    <div class="tab-group">
      <ul class="nav nav-tabs-flat" role="tablist">
        <li class="nav-tab-item">
          <a href="javascript:void()" class="nav-tab-action">Anbieter</a>
        </li>
        <li class="nav-tab-item active">
          <a class="nav-tab-action" href="javascript:void()">
                    Produkte
                    <div class="label label--info">
                      BETA
                    </div></a>
        </li>
      </ul>
    </div>
  </div>
</div>

SectionsDirect link

Section HeadDirect linkRaw Link

This block is a combination of a headline and an optional interaction area.

Usage

The general usage of this block is at the beginning of or between a section. It separates the different sections from each other.

They are two use cases to display the text:

  • Emphasised: When a text fragment is emphasised, use light font type for regular text and bold for the emphasised text parts (<strong>).
  • Monotone: When no emphasis needed, use only the regular font type (modifier class: .section-head--mono).

Note that in case of using any of <h1>-<h6> – to add a pre-styled heading – you have to add the .section-head__title class to it.

Section head with a strong meaning text


Section head with monotone meaning

<div class="section-head row" role="sectionhead">
  <div class="section-head__heading col-sm-6">
    <h1 class="section-head__title">
      Section head with a <strong>strong meaning text</strong>
    </h1>
  </div>
  <div class="section-head__controls col-sm-6">
    <div action="#" class="form-inline">
      <div class="form-group">
        <label for="docs-page">Sort by</label><select class="form-control">
          <option>
            Option 1
          </option>
          <option>
            Option 2
          </option>
        </select>
      </div>
      <button class="btn btn-default" type="submit"><i aria-hidden="true" class="svg-icon icon-sm" role="img"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M24.927 22.114l5.136 4.973c.791.77.81 2.059.04 2.853-.395.403-.944.57-1.467.57-.502 0-.995-.152-1.386-.529l-5.136-5.054a13.774 13.774 0 0 0 2.813-2.813zM14.004 2.157c6.484 0 11.74 5.256 11.74 11.74 0 6.482-5.256 11.738-11.74 11.738-6.483 0-11.739-5.256-11.739-11.739 0-6.483 5.256-11.739 11.74-11.739zm-.78 4.402c-3.699.376-6.557 3.538-6.557 7.337a7.337 7.337 0 1 0 7.337-7.337c-.253 0-.533-.025-.78 0z" fill-rule="nonzero"/></svg></i>Filter</button>
    </div>
  </div>
</div>
<hr>
<div class="section-head section-head--mono row" role="sectionhead">
  <div class="section-head__heading col-sm-6">
    <h1 class="section-head__title">
      Section head with <strong>monotone meaning</strong>
    </h1>
  </div>
  <div class="section-head__controls col-sm-6">
    <div action="#" class="form-inline">
      <div class="form-group">
        <label for="docs-page">Sort by</label><select class="form-control">
          <option>
            Option 1
          </option>
          <option>
            Option 2
          </option>
        </select>
      </div>
      <button class="btn btn-default" type="submit"><i aria-hidden="true" class="svg-icon icon-sm" role="img"><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M24.927 22.114l5.136 4.973c.791.77.81 2.059.04 2.853-.395.403-.944.57-1.467.57-.502 0-.995-.152-1.386-.529l-5.136-5.054a13.774 13.774 0 0 0 2.813-2.813zM14.004 2.157c6.484 0 11.74 5.256 11.74 11.74 0 6.482-5.256 11.738-11.74 11.738-6.483 0-11.739-5.256-11.739-11.739 0-6.483 5.256-11.739 11.74-11.739zm-.78 4.402c-3.699.376-6.557 3.538-6.557 7.337a7.337 7.337 0 1 0 7.337-7.337c-.253 0-.533-.025-.78 0z" fill-rule="nonzero"/></svg></i>Filter</button>
    </div>
  </div>
</div>

Product stageDirect linkRaw Link

This organism provies a simple 5 column grid to present products. An element can span one or two columns. The idea is to have one large panel on the left if there are more than four elements (see example) and two large panels on the left for four and less elements.

The images-wrapper within the panels have a specified height so the large and small panels will align next to each other. Images will be positioned in the upper left corner.

<div class="product-stage-row">
  <div class="product-stage-col product-stage-col-2">
    <a href="javascript:void()" class="panel teaser product-stage-panel">
        <div class="panel-body">
          <div class="teaser-media product-stage-panel-img-wrapper">
            <img src="wlw_assets/images/commons/placeholder/company-logo-slim.18c03f7a.png" alt="Company logo slim.18c03f7a" />
            <div class="teaser-media-foreground"></div>
          </div>
          <div class="text-info teaser-hover-underline text-truncate">
            Lorem ipsum sit dolor blub
          </div>
        </div></a>
  </div>
  <div class="product-stage-col product-stage-col-1">
    <a href="javascript:void()" class="panel teaser product-stage-panel">
        <div class="panel-body">
          <div class="teaser-media product-stage-panel-img-wrapper">
            <img src="wlw_assets/images/commons/placeholder/company-logo-slim.18c03f7a.png" alt="Company logo slim.18c03f7a" />
            <div class="teaser-media-foreground"></div>
          </div>
          <div class="text-info teaser-hover-underline text-truncate">
            Lorem ipsum sit dolor blub
          </div>
        </div></a>
  </div>
  <div class="product-stage-col product-stage-col-1">
    <a href="javascript:void()" class="panel teaser product-stage-panel">
        <div class="panel-body">
          <div class="teaser-media product-stage-panel-img-wrapper">
            <img src="wlw_assets/images/commons/placeholder/company-logo-slim.18c03f7a.png" alt="Company logo slim.18c03f7a" />
            <div class="teaser-media-foreground"></div>
          </div>
          <div class="text-info teaser-hover-underline text-truncate">
            Lorem ipsum sit dolor blub
          </div>
        </div></a>
  </div>
  <div class="product-stage-col product-stage-col-1">
    <a href="javascript:void()" class="panel teaser product-stage-panel">
        <div class="panel-body">
          <div class="teaser-media product-stage-panel-img-wrapper">
            <img src="wlw_assets/images/commons/placeholder/company-logo-slim.18c03f7a.png" alt="Company logo slim.18c03f7a" />
            <div class="teaser-media-foreground"></div>
          </div>
          <div class="text-info teaser-hover-underline text-truncate">
            Lorem ipsum sit dolor blub
          </div>
        </div></a>
  </div>
  <div class="product-stage-col product-stage-col-1">
    <a href="javascript:void()" class="panel teaser product-stage-panel">
        <div class="panel-body">
          <div class="teaser-media product-stage-panel-img-wrapper">
            <img src="wlw_assets/images/commons/placeholder/company-logo-slim.18c03f7a.png" alt="Company logo slim.18c03f7a" />
            <div class="teaser-media-foreground"></div>
          </div>
          <div class="text-info teaser-hover-underline text-truncate">
            Lorem ipsum sit dolor blub
          </div>
        </div></a>
  </div>
  <div class="product-stage-col product-stage-col-1">
    <a href="javascript:void()" class="panel teaser product-stage-panel">
        <div class="panel-body">
          <div class="teaser-media product-stage-panel-img-wrapper">
            <img src="wlw_assets/images/commons/placeholder/company-logo-slim.18c03f7a.png" alt="Company logo slim.18c03f7a" />
            <div class="teaser-media-foreground"></div>
          </div>
          <div class="text-info teaser-hover-underline text-truncate">
            Lorem ipsum sit dolor blub
          </div>
        </div></a>
  </div>
  <div class="product-stage-col product-stage-col-1">
    <a href="javascript:void()" class="panel teaser product-stage-panel">
        <div class="panel-body">
          <div class="teaser-media product-stage-panel-img-wrapper">
            <img src="wlw_assets/images/commons/placeholder/company-logo-slim.18c03f7a.png" alt="Company logo slim.18c03f7a" />
            <div class="teaser-media-foreground"></div>
          </div>
          <div class="text-info teaser-hover-underline text-truncate">
            Lorem ipsum sit dolor blub
          </div>
        </div></a>
  </div>
</div>

CardsDirect link

Company Card Minimal VersionDirect linkRaw Link

Wer liefert was? GmbH

<div class="panel panel-sm">
  <div class="panel-body">
    <div class="media">
      <div class="media-left card-company-media-left"><a href="javascript:void()" class="wlw-thumbnail wlw-thumbnail-sm slim pull-left card-company-logo">
                <img src="wlw_assets/images/commons/placeholder/company-logo-slim.18c03f7a.png" class="media-object" alt="Company logo slim.18c03f7a" /></a>
      </div>
      <div class="media-body card-company-media-body">
        <h4 class="media-heading"><a href="javascript:void()" class="link-unstyled">
                    <u>Wer liefert was? GmbH</u></a>
        </h4>
        <ul class="list-inline-splitted pull-left card-company-info-line">
          <li>
            <i class="icon icon-map-marker-alt"></i><span>16 km</span>
          </li>
          <li>
            D-20354 Hamburg
          </li>
          <li class="hidden-xs">
            <a href="javascript:void()" class="link-unstyled">www.wer-liefert-was.de</a>
          </li>
        </ul>
        <ul class="list-inline-splitted pull-right card-company-info-line hidden-xs hidden-sm">
          <li>
            <ul class="list-inline list-inline-slim card-company-supplier-icons">
              <li>
                <i class="icon icon-md icon-primary icon-manufacturer is-disabled"></i>
              </li>
              <li>
                <i class="icon icon-md icon-primary icon-service-provider is-disabled"></i>
              </li>
              <li>
                <i class="icon icon-md icon-primary icon-distributor "></i>
              </li>
              <li>
                <i class="icon icon-md icon-primary icon-wholesaler is-disabled"></i>
              </li>
            </ul>
          </li>
        </ul>
        <ul class="list-inline-splitted card-company-info-line hidden-md hidden-lg">
          <li>
            <small>Hersteller</small>
          </li>
          <li>
            <small>Dienstleister</small>
          </li>
          <li>
            <small>Händler</small>
          </li>
          <li>
            <small>Großhändler</small>
          </li>
        </ul>
        <div class="clearfix"></div>
        <div class="media card-company-media">
          <div class="media-body"></div>
          <div class="media-right media-bottom card-company-media-right">
            <a href="javascript:void()" class="btn btn-primary hidden-xs">Firmendetails ansehen</a>
            <div class="btn-group btn-group-justified visible-xs">
              <a href="javascript:void()" class="btn btn-primary">Firmendetails</a><a href="javascript:void()" class="btn btn-info">Website</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Company Card Maximal VersionDirect linkRaw Link

NEU

Wer liefert was? GmbH

<div class="panel panel-sm ribbon-anchor">
  <div class="ribbon-flag ribbon-flag-danger font-mini">
    NEU
  </div>
  <a href="javascript:void()" class="ribbon-bookmark"></a>
  <div class="panel-body">
    <div class="media">
      <div class="media-left card-company-media-left"><a href="javascript:void()" class="wlw-thumbnail wlw-thumbnail-sm pull-left card-company-logo">
                <img src="wlw_assets/images/commons/placeholder/company-logo.fd0ee6f0.png" class="media-object" alt="Company logo.fd0ee6f0" /></a>
      </div>
      <div class="media-body card-company-media-body">
        <h4 class="media-heading"><a href="javascript:void()" class="link-unstyled">
                    <u>Wer liefert was? GmbH</u></a>
        </h4>
        <ul class="list-inline-splitted pull-left card-company-info-line">
          <li>
            <i class="icon icon-map-marker-alt"></i><span>16 km</span>
          </li>
          <li>
            D-20354 Hamburg
          </li>
          <li class="hidden-xs">
            <a href="javascript:void()" class="link-unstyled">www.wer-liefert-was.de</a>
          </li>
        </ul>
        <ul class="list-inline-splitted pull-right card-company-info-line hidden-xs hidden-sm">
          <li>
            <a href="javascript:void()" class="link-unstyled">2 Zertifizierungen</a>
          </li>
          <li>
            <ul class="list-inline list-inline-slim card-company-supplier-icons">
              <li>
                <i class="icon icon-md icon-primary icon-manufacturer is-disabled"></i>
              </li>
              <li>
                <i class="icon icon-md icon-primary icon-service-provider is-disabled"></i>
              </li>
              <li>
                <i class="icon icon-md icon-primary icon-distributor "></i>
              </li>
              <li>
                <i class="icon icon-md icon-primary icon-wholesaler is-disabled"></i>
              </li>
            </ul>
          </li>
        </ul>
        <ul class="list-inline-splitted card-company-info-line hidden-md hidden-lg">
          <li>
            <small>Hersteller</small>
          </li>
          <li>
            <small>Dienstleister</small>
          </li>
          <li class="text-muted">
            <small>Händler</small>
          </li>
          <li>
            <small>Großhändler</small>
          </li>
        </ul>
        <div class="clearfix"></div>
        <p class="text-muted card-company-description hidden-xs">
          While the Congress of the Republic endlessly debates this alarming chain of events, the Supreme Chancellor has secretly dispatched two Jedi Knights, the guardians of peace and justice in the galaxy, to settle the conflict. This separatist movement, under the leadership of the mysterious Count ...300
        </p>
        <div class="media card-company-media">
          <div class="media-body">
            <ul class="list-inline list-inline-slim pull-left card-company-media-list">
              <li class="pull-left hidden-xs hidden-sm"><a href="javascript:void()" class="wlw-thumbnail wlw-thumbnail-xs pull-left">
                                <img src="wlw_assets/images/commons/placeholder/video-xs.2790404d.png" alt="Video xs.2790404d" /></a>
              </li>
              <li class="pull-left hidden-xs hidden-sm"><a href="javascript:void()" class="wlw-thumbnail wlw-thumbnail-xs pull-left">
                                <img src="wlw_assets/images/commons/placeholder/catalog-xs.900715a0.png" alt="Catalog xs.900715a0" /></a>
              </li>
              <li class="pull-left"><a href="javascript:void()" class="wlw-thumbnail wlw-thumbnail-xs pull-left">
                                <img data-src="holder.js/72x54?theme=sky"></a>
              </li>
              <li class="pull-left"><a href="javascript:void()" class="wlw-thumbnail wlw-thumbnail-xs pull-left">
                                <img data-src="holder.js/72x54?theme=sky"></a>
              </li>
              <li class="pull-left"><a href="javascript:void()" class="wlw-thumbnail wlw-thumbnail-xs pull-left">
                                <img data-src="holder.js/72x54?theme=sky"></a>
              </li>
              <li class="pull-left"><a href="javascript:void()" class="wlw-thumbnail wlw-thumbnail-xs pull-left">
                                <i class="icon icon-chevron-right icon-inverse"></i></a>
              </li>
            </ul>
          </div>
          <div class="media-right media-bottom card-company-media-right">
            <a href="javascript:void()" class="btn btn-primary hidden-xs">Firmendetails ansehen</a>
            <div class="btn-group btn-group-justified visible-xs">
              <a href="javascript:void()" class="btn btn-primary">Firmendetails</a><a href="javascript:void()" class="btn btn-info">Website</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Product CardDirect linkRaw Link

<div class="row">
  <div class="col-sm-6 col-md-4 card-product-wrapper card-product-max-wrapper">
    <a href="javascript:void()" class="panel panel-sm panel-default card-product">
        <div class="panel-body card-product-body">
          <div class="wlw-thumbnail wlw-thumbnail-md">
            <img src="wlw_assets/images/products/product_placeholder_md.8bd77388.png" class="align-left align-top" alt="Product placeholder md.8bd77388" />
          </div>
          <p class="text-info card-product-info">
            &nbsp;
          </p>
          <h5 class="card-product-headline card-product-hover">
            Senator Amidala, the former Queen of Naboo, is returnin...60
          </h5>
          ca. € 1.999,99 netto
          <div class="card-product-more">
            <p>
              pro Palette
            </p>
            <p class="text-muted">
              Hoping to resolve the matter with a blockade of deadly battleships, the greedy Trade Federation has stopped all shipping to the small planet of Naboo. There is unrest in the Galactic Senate. Sev...200
            </p>
            <div class="text-center">
              <button class="btn btn-primary">Mehr Details</button>
            </div>
          </div>
        </div>
        <div class="panel-footer font-small text-muted card-product-footer">
          <div class="text-truncate">
            <strong>Hoping to resolve the matter with a blockade of deadly ...60</strong>
          </div>
          <div class="text-truncate">
            Senator Amidala, the former Queen of Naboo, is returnin...60
          </div>
        </div></a>
  </div>
  <div class="col-sm-6 col-md-4 card-product-wrapper card-product-min-wrapper">
    <a href="javascript:void()" class="panel panel-sm panel-default card-product">
        <div class="panel-body card-product-body">
          <div class="wlw-thumbnail wlw-thumbnail-md">
            <img src="wlw_assets/images/products/product_placeholder_md.8bd77388.png" class="align-left align-top" alt="Product placeholder md.8bd77388" />
          </div>
          <p class="text-info card-product-info">
            5 varianten
          </p>
          <h5 class="card-product-headline card-product-hover">
            Senator Amidala, the form...30
          </h5>
          ca. € 1.999,99 netto
          <div class="card-product-more">
            <p>
              pro Palette
            </p>
            <p class="text-muted">
              Turmoil has engulfed the Galactic Republic. The taxation of trade routes to outlying star systems is in dispute. As the Separatist Droid Army attempts to flee the besieged capital with their val...200
            </p>
            <div class="text-center">
              <button class="btn btn-primary">Mehr Details</button>
            </div>
          </div>
        </div></a>
  </div>
  <div class="col-sm-6 col-md-4 card-product-wrapper card-product-min-wrapper">
    <a href="javascript:void()" class="panel panel-sm panel-default card-product">
        <div class="panel-body card-product-body">
          <div class="wlw-thumbnail wlw-thumbnail-md">
            <img src="wlw_assets/images/products/product_placeholder_md.8bd77388.png" class="align-left align-top" alt="Product placeholder md.8bd77388" />
          </div>
          <p class="text-info card-product-info">
            <span class="label label--info">gesponsert</span>
          </p>
          <h5 class="card-product-headline card-product-hover">
            In a stunning move, the f...30
          </h5>
          ca. € 1.999,99 netto
          <div class="card-product-more">
            <p>
              pro Palette
            </p>
            <p class="text-muted">
              While the Congress of the Republic endlessly debates this alarming chain of events, the Supreme Chancellor has secretly dispatched two Jedi Knights, the guardians of peace and justice in the gal...200
            </p>
            <div class="text-center">
              <button class="btn btn-primary">Mehr Details</button>
            </div>
          </div>
        </div></a>
  </div>
</div>

Sponsored Product Card TeaserDirect linkRaw Link

Kein Bild vorhanden
gesponsert
Lorem ipsum dolor sit amet
Kein Bild vorhanden
gesponsert
Lorem ipsum dolor sit amet
Kein Bild vorhanden
Ihre Produkte auf prominenten Werbeplätzen
<div class="row">
  <div class="col-xs-4">
    <div class="panel panel-default card-product card--sponsored-products-teaser">
      <div class="panel-body card-product-body card__body">
        <div class="wlw-thumbnail card__image">
          <img src="wlw_assets/images/products/product_placeholder_md.8bd77388.png" class="align-left align-top" alt="Kein Bild vorhanden" title="Kein Bild vorhanden" />
        </div>
        <div class="label label-info">
          gesponsert
        </div>
        <h5 class="card__heading">
          Lorem ipsum dolor sit amet
        </h5>
      </div>
      <div class="panel-footer card-product-footer card__footer">
        <div class="card__company-name">
          Wer liefert was? GmbH
        </div>
      </div>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="panel panel-default card-product card--sponsored-products-teaser">
      <div class="panel-body card-product-body card__body">
        <div class="wlw-thumbnail card__image">
          <img src="wlw_assets/images/products/product_placeholder_md.8bd77388.png" class="align-left align-top" alt="Kein Bild vorhanden" title="Kein Bild vorhanden" />
        </div>
        <div class="label label-info">
          gesponsert
        </div>
        <h5 class="card__heading">
          Lorem ipsum dolor sit amet
        </h5>
      </div>
      <div class="panel-footer card-product-footer card__footer">
        <div class="card__company-name">
          Wer liefert was? GmbH
        </div>
      </div>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="panel panel-default card-product card--sponsored-products-teaser">
      <div class="panel-body card-product-body card__body">
        <div class="wlw-thumbnail card__image">
          <img src="wlw_assets/images/products/product_placeholder_md.8bd77388.png" class="align-left align-top" alt="Kein Bild vorhanden" title="Kein Bild vorhanden" />
        </div>
        <h5 class="card__hint">
          Ihre Produkte auf prominenten Werbeplätzen
        </h5>
      </div>
    </div>
  </div>
</div>

Templates

With templates, we break our biochemistry analogy to get into language that makes more sense to clients and final output.
Templates are comprised mostly of organisms combined together to form page-level objects.

Templates provide context for these relatively abstract molecules and organisms, which is helpful for designers and clients alike.

Templates mostly focus on content structure (such as character length, image size, etc) rather than the actual content.

Form TemplatesDirect link

Default Login FormDirect linkRaw Link

Anmeldung
Noch kein Benutzerkonto? Jetzt registrieren!
<div class="row">
  <div class="col-sm-offset-3 col-sm-6 col-lg-offset-4 col-lg-4">
    <div class="panel">
      <div class="panel-body">
        <form>
          <fieldset>
            <legend>Anmeldung</legend>
            <div class="form-group">
              <label class="control-label" for="example-username">E-Mail-Adresse</label><input class="form-control" id="example-username" name="username" type="text">
            </div>
            <div class="form-group">
              <label class="control-label" for="example-password">Passwort</label><input class="form-control" id="example-password" name="password" type="password"><span class="help-block"><a href="#password/new">Passwort vergessen?</a></span>
            </div>
            <div class="checkbox">
              <label class="control-label" for="example-rememberMe"><input id="example-rememberMe" name="rememberMe" type="checkbox" value="1">Angemeldet bleiben</label>
            </div>
            <div class="row form-group">
              <div class="col-sm-offset-5 col-sm-7">
                <button class="btn btn-primary btn-block" name="button" type="submit">Jetzt anmelden</button>
              </div>
            </div>
            <div>
              Noch kein Benutzerkonto? <a href="#customers/new">Jetzt registrieren!</a> 
            </div>
            <div>
              <a data-content="Popover" data-placement="bottom" data-toggle="popover" data-trigger="focus" href="#" role="button">Betreuen Sie mehr als eine Firma?</a>
            </div>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
</div>

Order overview – CampaignDirect linkRaw Link

National.18a6db52

National
Web Starter Paket


  • Sie erscheinen auf Seite 1 der Suchergebnisse

  • Sie erhalten mehr als 10x mehr Besucher

  • Sie ziehen Aufmerksamkeit durch Produktabbildungen und Logo

  • Sie informieren optimal in 5 Kategorien mit Angebotsbeschreibungen

  • Sie überzeugen mit zusätzlichen Informationen zu Ihrem Unternehmen


79 € / Monat
99 € Einrichtungspauschale entfallen


Auftraggeber

VeryLong Company Name GmbH & Co KG
Herr Firstname Lastname

Strassestrasse 123
12345 Stadtstadt
Germany


<div class="row">
  <div class="col-sm-offset-3 col-sm-6">
    <div class="panel">
      <div class="panel-body">
        <div class="media media-lg">
          <div class="media-object pull-left">
            <img src="wlw_assets/images/shared/products/national.18a6db52.png" alt="National.18a6db52" />
          </div>
          <div class="media-body">
            <p>
              <span class="h1">National</span><br><span class="font-h4">Web Starter Paket</span>
            </p>
          </div>
        </div>
        <br>
        <ul class="list-check">
          <li>
            <p>
              Sie erscheinen auf Seite 1 der Suchergebnisse
            </p>
          </li>
          <li>
            <p>
              Sie erhalten mehr als 10x mehr Besucher
            </p>
          </li>
          <li>
            <p>
              Sie ziehen Aufmerksamkeit durch Produktabbildungen und Logo
            </p>
          </li>
          <li>
            <p>
              Sie informieren optimal in 5 Kategorien mit Angebotsbeschreibungen
            </p>
          </li>
          <li>
            <p>
              Sie überzeugen mit zusätzlichen Informationen zu Ihrem Unternehmen
            </p>
          </li>
        </ul>
        <br>
        <p>
          <span class="font-h1">79 €</span> / Monat<br><small><strike>99 €</strike> Einrichtungspauschale entfallen</small>
        </p>
        <hr>
        <p class="h1">
          Auftraggeber
        </p>
        <p>
          <span>VeryLong Company Name GmbH & Co KG</span><br><span>Herr Firstname Lastname</span>
        </p>
        <p>
          <span>Strassestrasse 123</span><br><span>12345 Stadtstadt</span><br><span>Germany</span>
        </p>
        <hr>
        <form>
          <fieldset>
            <div class="form-group">
              <div class="checkbox">
                <label class="control-label" for="electronic_invoice"><input id="electronic_invoice" name="electronic_invoice" type="checkbox">Elektronische Rechnung</label>
              </div>
            </div>
            <div class="form-group">
              <div class="checkbox">
                <label class="control-label" for="terms_and_conditions"><input id="terms_and_conditions" name="terms_and_conditions" type="checkbox">Ich habe die <a href="">AGB</a> gelesen und akzeptiere sie.</label>
              </div>
            </div>
          </fieldset>
          <div class="text-right">
            <button class="btn btn-primary" name="button" type="submit">Jetzt anmelden</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

DashboardDirect link

Dashboard PanelsDirect linkRaw Link

The dashboard panels are a combination of several components. It combines the .panel, .sticky-footer, .tile-#-# and the .link-bar components to one unit.

Panels on the dashboard have a fixed height so panels of several sizes can be grouped together.

<div class="row">
  <div class="col-sm-4">
    <div class="panel sticky-footer tile-sm-2">
      <div class="sticky-footer-body">
        <div class="panel-body">
          <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAV1BMVEUAAAAsteMsteMsteMsteMsteMsteMsteMsteMsteMsteMsteMsteMsteM5uuVUw+hhyOpuzOx70e6I1e+W2vGj3/Ow4/W96PbK7fjX8frl9vzy+v3///+vAAB+AAAADXRSTlMAECAwQFBggJ+vv8/v5QYEcAAAAaJJREFUWMO9V9uWgzAIJDXVWEXjpbYq//+d+9DuHjWQJqZn51UYyQQIAAjQRVnhG1VZaIiBykt0UOYq0F0bFGCyEPcbenD7dBRl8AOM9yDXGj+ivsr+BoNgpPArDESl0vx5hkuNEahVyv/ZGCL9EatT+ot3ccUT2OSDqs8QbIQ0eAp/h9CCQTPMRETz0AgGv5Ul1J9d6I3FCrX58s/4rz1t0PtC4BVoaYdWVkHx5M89wZO3UgCQhwQghZADQMl+GY8EI2tWAkDQCcQziEkQSqChSCMoBAnwfiS4oyCC0Ai6I0EntQWpUpa9/yLZiQRdUAAeApy2/hPGE2x1vOMZArSPl/vD4jkCxMYOg228JoCJSCfgE8lO8/4a58kKicSlcutUAhHRs2VTmSmmfiUWa88Vk1vOlkRYrq06V7fKBGvjNhRHhJE8GJmWdmyqq49gZZqqClaAUUG5D8vgJxiY51WHS3AUIWMe1xiCG/e8xxDobw0Y6SNO8pCVPualD5rpo26kkPXl++N++sKRvvJ8YelKX/vSF08AgExeffX/LN9x6/8Pzg/GsyWfo2wAAAAASUVORK5CYII=">
        </div>
      </div>
      <div class="sticky-footer-foot">
        <div class="panel-footer">
          <a class="link-bar icon icon-chevron-right icon-md" href="javascript:void();">Footer with action</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="panel sticky-footer tile-sm-2">
      <div class="sticky-footer-body">
        <div class="panel-heading">
          <div class="panel-title">
            Support
          </div>
        </div>
        <div class="panel-body">
          <Panel>content</Panel>
        </div>
      </div>
      <div class="sticky-footer-foot">
        <div class="panel-footer">
          <a class="link-bar icon icon-chevron-right icon-md" href="javascript:void();">Footer with action <span class="label label--info">Beta</span></a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="panel panel-service is-shown sticky-footer tile-sm-2">
      <div class="sticky-footer-body">
        <div class="panel-heading">
          <div class="panel-title">
            Support
          </div>
        </div>
        <div class="panel-body">
          <Panel>content</Panel>
        </div>
      </div>
      <div class="sticky-footer-foot">
        <div class="panel-footer">
          <a class="link-bar icon icon-chevron-right icon-md" href="javascript:void();">Footer with action</a>
        </div>
      </div>
    </div>
  </div>
</div>

Rails helper methods

The Pattern Library is built as RubyGem to enable us to integrate it into the Ruby on Rails architecture as easy as possible.

Not only the markup patterns can be provided but also various useful Rails Helpers.

All of these helper methods are documented here.

General LayoutDirect link

This gem provides a general wlw layout which will be used if you remove your default application layout in your app.

ConfigurationDirect link

Rails configuration parameters and its default values. You can override these params in your rails apps configuration.

The following three params are used to implement the domain specific logic in header and footer.

app.config.default_top_level_domain  = 'de'
app.config.allowed_top_level_domains = %w(de ch at)
app.config.current_top_level_domain  = proc do |request|
  domain = request.domain || ''

  top_level_domain = domain.split('.')[-1]

  unless config.allowed_top_level_domains.include?(top_level_domain)
    top_level_domain = config.default_top_level_domain
  end

  top_level_domain
end

This must be set to false in the LyC app. It disables tracking of iframe content for angular.js.

app.config.enable_tracking = true

Browser support - CORS

Be aware the that the general layout supports Internet Explorer 9+.

For IE 8- support you’ll need the respond.js solution which is recommend as well by Bootstrap .

TemplatesDirect link

Templates which are used to render the default layout:

  app/views/layouts/application.html.slim
  app/views/layouts/application/_flash_messages.html.slim
  app/views/layouts/application/_footer.html.slim
  app/views/layouts/application/_google_tag_manager.html.slim
  app/views/layouts/application/_header.html.slim
  app/views/layouts/application/_modal.html.slim
  app/views/layouts/application/footer/_bme_seal.html.slim
  app/views/layouts/application/footer/_modal_link.html.slim
  app/views/layouts/application/header/_navigation.html.slim
  app/views/layouts/application/header/_search_form.html.slim
  app/views/layouts/application/header/navigation/_items.html.slim

If a template exists in your app it is used instead of the one in the wlw_styleguide gem.

Markup helperDirect link

The MarkupHelper offers several common markup fragments. Use helper ::WlwStyleguide::MarkupHelper to include the helper into the specific controller.

render_modal_for(type, title, options = {}, &block)Direct link

This method wrapped the content in the modal skeleton and rendered this markup on a specific position in the DOM.

render_flash_messages()Direct link

This method is rendered in the layout inside the .wlw-page-main .container element. Possible flash messages are success, warning and danger.

image_unveil_tag(source, options = {})Direct link

Use this method to generate markup for unveiling/lazy loading any image. The jquery.unveil.js package is required.

Params

Name Description
source Image to be unveiled
options Any html options (e.g. alt, class etc.)

Add this line in your app specific initialize.js.

$('.fn-image-unveil').unveil();

render_scroll_to_topDirect link

The scroll to top button provides a little button which appears when the user scrolls below 250px to help with one click to scroll to the top of the page.

Usage

To add the scroll to top button to your project you have to:

  • include the WlwStyleguide::ScrollToTopHelper to your App’s ApplicationHelper
  • insert the = render_scroll_to_top on the pages you want it to be displayed
  • include the scroll_to_top_button.js into your applications.js
  • call the init function of the script to run initialize.js it

Header helperDirect link

Provides the general full-fledged page header skeleton. The header helper-set is based on the yield/block construction method which provides a wide scalability.

render_page_header([&block])Direct link

Wrapper with the minimum setup of the wlw page header which includes only the logo.

Required CSS

@import 'wlw_styleguide/core/base/header';

Example with navigation block

= render_page_header do
  = render_header_navigation do
    = yield(:header_links)

If you provide a navigation in the given block you need to add the necessary JavaScript to provide the mobile navigation. (Use render_header_navigation, see below for requirements)

To show the search form inside the header provide it using content_for like so:

Search

- content_for :search_header, render_header_search_form(
  the_current_search_term,
  'analytics_page_name',
  'search_type')

To use the search form you will also need the JavaScript plugins mentioned below.

render_header_navigation(&block)Direct link

Provides the navigation. It expects a block with a list of links like such:

<li class="nav-item">
  <a class="nav-action link-inverse">Jetzt Firma eintragen</a>
</li>
<li class="nav-item">
  <a class="nav-action">Einkäufer Login</a>
</li>
<li class="nav-item">
  <a class="nav-action">Firmen Login</a>
</li>

Required JS

//= require wlw_styleguide/wlw/controls/show_hide_mobile_nav

var showHideMobileNav = new wlw.controls.ShowHideMobileNav();
showHideMobileNav.init();

Notice that the former "promo-link"-button is now a regular link styled with link-inverse. It’s further possible to use dropdown menu see Bootstrap dropdown.

render_header_search_form(search_term, page_type = nil, search_type = '')Direct link

Includes general search field with radio buttons, dropdown and auto suggestion functionality.

Params

search_term      # current or last search term
page_type        # page type for tracking
search_type      # search type for form if you want to force it

The search_type is optional and can be categories (as in search for company by category), companies (as in search for company directly by name) or products. If it is set the search form will be set to this search type.

Required CSS

@import 'wlw_styleguide/core/modules/autocompletions/search';
@import 'wlw_styleguide/core/base/header';

Required JS

//= require wlw_styleguide/bower_components/bootstrap-sass/assets/javascripts/bootstrap/dropdown

//= require wlw_styleguide/bower_components/jqueryui/ui/core
//= require wlw_styleguide/bower_components/jqueryui/ui/widget
//= require wlw_styleguide/bower_components/jqueryui/ui/position
//= require wlw_styleguide/bower_components/jqueryui/ui/menu
//= require wlw_styleguide/bower_components/jqueryui/ui/autocomplete
//= require wlw_styleguide/bower_components/js-cookie/src/js.cookie

//= require wlw_styleguide/wlw/helper/string
//= require wlw_styleguide/wlw/tracker/search
//= require wlw_styleguide/wlw/controls/search

In your app specific initialize.js

wlw.controls.Search();

render_language_switch()Direct link

Includes dropdown with the general language switch menu. The active language is always visible.

render_navigation_common_items(except: [])Direct link

Includes predefined common header items. These items can be excluded with the except option.

Format helperDirect link

format_phone(number, country)Direct link

Returns formatted E.164 international phone number. i.e. +49 40 12345

Params

Name Description
number String
country ISO 3166-1 alpha-2 country code

format_price(price, currency)Direct link

Returns formatted price and currency depending on current locale.

Params

Name Description
price Integer or Float
currency Possible values are 'EUR' or 'CHF'

Breadcrumb helperDirect link

The BreadcrumbHelper is deprecated. Please use the wlw_markup gem.

render_breadcrumb(collection) DeprecatedDirect link

Returns breadcrumbs html markup from collection of titles and links. Home-breadcrumb is always there.

render_breadcrumb(['Bolt'])
render_breadcrumb([['Products', products_path], 'Bolt'])

Error HelperDirect link

The ErrorHelper provides methods for rendering standard error pages

render_error(type)Direct link

Renders standard error pages.

Usage

  • include WlwStyleguide::ErrorHelper to the Rails App’s controller
  • call render_error(:<type>) in the error <type> action

Available types

Type HttpStatus-Code (click for example)
:forbidden 403
:not_found 404
:internal_server_error 500

Custom error pages

You can build custom error pages – in the specific app – by overwriting or creating a view in layouts/error/<type>.html.slim with custom content. <type> relates to HTTP status codes constants.

It will automatically rendered with the error layout and will be available through render_error(<type>), e.g. layouts/error/unauthorized.html.slim can be accessed via render_error(:unauthorized).

Page view tracking

The error view will set a page view title to the tracking tool automatically by using the following pattern “error_<http_status_code>”.

Google helperDirect link

Provide methods for Google Analytics ga and Tag Manager gtm.

gtm_event_data(event, category, action = {}, options = {})Direct link

This method returns a hash providing the necessary structure for custom gtm tracking. Use this with the optional google_tag_manager.js.

Params

Name Description
event optional String
category String
action String
options optional Hash for additional tracking data (e.g. :label and :value)

Usage

var dataLayer = [];                                   // gtm’s dataLayer variable required
var gtm = new wlw.helper.GoogleTagManager(dataLayer); // initialize with dataLayer
gtm.push($item);                                      // is any jQuery object providing the gtm event data through GoogleHelper#gtm_event_data

Icon helperDirect link

icon_tag(name, options = {})Direct link

Renders SVG markup by given icon name.

The actual SVG is wrapped into an extra <i> element to control color and size.

Example

= icon_sprite_tag('heard')
<i aria-hidden="true" class="svg-icon icon-sm" role="img">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
    <path d="M...z"></path>
  </svg>
</i>

Params

Name Type Description
name String Name of an available icon
options Hash the common content_tag options
options.size Symbol range: :xsmall to :xlarge

render_icon_sprite(icon_names)Direct link

Renders SVG sprites markup with <symbol> as wrapper for each given icon name.

The actual SVG is wrapped into an extra <i> element to control color and size.

Example

= render_icon_sprite(['heard', 'shoe'])
<svg hidden>
  <symbol id="svg-icon-heard">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
      <path d="M...z"></path>
    </svg>
  </symbol>
  <symbol id="svg-icon-heard">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
      <path d="M...z"></path>
    </svg>
  </symbol>
</svg>

Params

Name Type Description
icon_names Array List of names of an available icon

icon_sprite_tag(name, options = {})Direct link

Renders SVG markup with a <use> element by given icon name.

The actual SVG is wrapped into an extra <i> element to control color and size.

The xlink refers to DOM given SVG element. Read more about it.

Example

= icon_sprite_tag('heard')
<i aria-hidden="true" class="svg-icon icon-sm" role="img">
  <svg>
    <use xlink:href="#svg-icon-heard"></use>
  </svg>
</i>

Params

Name Type Description
name String Name of an available icon
options Hash the common content_tag options
options.size Symbol range: :xsmall to :xlarge

Supported GemDirect link

Render example for Simple form gemDirect link

Gem recommendation

The pattern library supports the Simple Form to render forms.

Gem workaround

This gem is optional and has to be included with gem 'simple-form' in your apps gemfile.

Translation helperDirect link

translate_country(country_code, locale = nil)Direct link

Returns the translated country name for the current locale or given locale.

Params

Name Description
country_code String, country code as ISO-Code-2: 'DE'
locale Symbol, optional: e.g. :de