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.

Basics – Direct link

Colors – Direct link – Raw Link

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
  • YellowPantone 395 C#f4e73c
  • #f4e73c
    $yellow
  • #fefdeb
    $yellow-lightest
    with 90% white
  • OrangePantone 144 C#ff8700
  • #ff8700
    $orange-darkest
  • #ffcf99
    $orange
    with 50% white
  • #fff3e5
    $orange-lightest
    with 90% 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
  • AquaHEX #00b2a9#00b2a9
  • #00b2a9
    $aqua
  • #33c1ba
    $aqua-light
    with 80% white
  • #66d1ce
    $aqua-lightest
    with 60% white
  • 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
  • TurquoisePantone 569 C#009399
  • #009399
    $turquoise

Typography – Direct link

Font Families – Direct link – Raw 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 Sizes – Direct link – Raw 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

Headings – Direct link – Raw 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 Block – Direct link – Raw 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>

Paragraphs – Direct link – Raw Link

Simulates the behaviour of a HTML <p> element. It represented a visual media as blocks of text that are separated from adjacent blocks by vertical blank space and/or first-line indentation.

Example of a native paragraph element

Example of a native paragraph element

Example of a .paragraph class helper
Example of a .paragraph class helper
<div class="row">
  <div class="col-xs-6">
    <p>
      Example of a native paragraph element
    </p>
    <p>
      Example of a native paragraph element
    </p>
  </div>
  <div class="col-xs-6">
    <div class="paragraph">Example of a <code>.paragraph</code> class helper
    </div>
    <div class="paragraph">Example of a <code>.paragraph</code> class helper
    </div>
  </div>
</div>

Font Weights – Direct link – Raw Link

Transform a text shape in a specific font-weight.

Class name Style definition
.font-weight-light Where’s my goddamn money, you bum?! Dolor sit amet, consectetur adipiscing elit praesent ac magn…100
.font-weight-normal Where’s my goddamn money, you bum?! Dolor sit amet, consectetur adipiscing elit praesent ac magn…100
.font-weight-bold Where’s my goddamn money, you bum?! Dolor sit amet, consectetur adipiscing elit praesent ac magn…100

Contextual Colors – Direct link – Raw 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 Beaver? You mean vagina? — I mean, you know him? Orci ipsum, placerat id condimentum rutrum, rho…100
.text-brand Beaver? You mean vagina? — I mean, you know him? Orci ipsum, placerat id condimentum rutrum, rho…100
.text-bright Beaver? You mean vagina? — I mean, you know him? Orci ipsum, placerat id condimentum rutrum, rho…100
.text-info Beaver? You mean vagina? — I mean, you know him? Orci ipsum, placerat id condimentum rutrum, rho…100
.text-muted Beaver? You mean vagina? — I mean, you know him? Orci ipsum, placerat id condimentum rutrum, rho…100
.text-primary Beaver? You mean vagina? — I mean, you know him? Orci ipsum, placerat id condimentum rutrum, rho…100

Available classes for alignments – Direct 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 truncate – Direct link – Raw 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 Text – Direct link – Raw 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>

Lists – Direct link

Checked List – Direct link – Raw Link

  • I see you rolled your way into the semis. Dios mio, man. Seamus and me, we’re g…82
  • Lebowski ipsum goodnight, sweet prince. Dolor sit amet, consectetur adipiscing. If the plan gets too complex som…116
  • Lebowski ipsum goodnight, sweet prince. Do…45
<ul class="list-check">
  <li>
    Vee could do things you only dreamed of, Lebowski. Mi sapien, ut ultricies ipsum morbi eget risus nulla nullam vel nisi enim, vel. That fucking bitch! Auctor ante morbi id urna vel felis…190
  </li>
  <li>
    I see you rolled your way into the semis. Dios mio, man. Seamus and me, we’re gonna fuck you up. Tristique nullam non accumsan justo nulla facilisi integer interdum elementum. Yeah man, it really tied the room together. Nulla, nec elei…239
  </li>
  <li>
    Where’s my goddamn money, you bum?! Dolor sit amet, consectetur adipiscing elit praesent ac magna justo pellentesque ac lectus. Your goons’ll be…148
  </li>
</ul>

List Size – Direct link – Raw Link

For larger lists use .list-md.

  • He suspects that the culprits might be the very…50
  • You know, the usual. Bowl. Drive around. The occasional acid flashback. Maecenas pulvinar nisl et nis…105
  • Lebowski ipsum goodnight, sweet prince. Dolor sit amet, consectetur adipisci…79
<ul class="list-check list-md">
  <li>
    He suspects that the culprits might be the very people who, uh, soiled your rug, and you’re in a unique position to confirm or, uh, disconfirm that suspicion. Ultrices non urna sed…184
  </li>
  <li>
    You know, the usual. Bowl. Drive around. The occasional acid flashback. Maecenas pulvinar nisl et nisl rhoncus at volutpat felis blandit. It’s a complicated case, Maude. Lotta ins. Lotta outs. And a lotta strands to keep in my head, man. In…244
  </li>
  <li>
    Beaver? You mean vagina? — I mean, you know him? Orci ipsum, pl…66
  </li>
</ul>

Icons Inline List – Direct link – Raw Link

<ul class="list-inline list-inline-slim">
  <li>
    <i aria-hidden="true" class="svg-icon icon-md" role="img"><svg><use xlink:href="#icon-manufacturer"></use></svg></i>
  </li>
  <li>
    <i aria-hidden="true" class="svg-icon icon-md" role="img"><svg><use xlink:href="#icon-service-provider"></use></svg></i>
  </li>
  <li>
    <i aria-hidden="true" class="svg-icon icon-md" role="img"><svg><use xlink:href="#icon-distributor"></use></svg></i>
  </li>
  <li>
    <i aria-hidden="true" class="svg-icon icon-md" role="img"><svg><use xlink:href="#icon-wholesaler"></use></svg></i>
  </li>
</ul>

Splitted Inline List – Direct link – Raw Link

  • Where’s…9
  • Where’s…9
  • Beaver?…9
  • I see y…9
  • Vee cou…9
  • Where’s…9
<div class="row">
  <div class="col-sm-6">
    <ul class="list-inline-splitted">
      <li>
        Beaver?…9
      </li>
      <li>
        He susp…9
      </li>
      <li>
        Where’s…9
      </li>
    </ul>
  </div>
  <div class="col-sm-6">
    <ul class="list-inline-splitted pull-right">
      <li>
        Lebowsk…9
      </li>
      <li>
        Lebowsk…9
      </li>
      <li>
        Where’s…9
      </li>
    </ul>
  </div>
</div>

List group – Direct link – Raw 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 context – Direct link – Raw 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()">He suspects that the culprits might be the very people who, uh, soiled your rug, and you’re in a unique position to confirm or, uh, disconfirm that suspicion. Ultrices non urna sed orci ipsum, pla…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-theme – Direct link – Raw 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>

Symbols – Direct link

We distinguish between logos, icons and other symbols. All of these media are vector based and have to be a 1x1 ratio to fit optimal within the UI.

Icons – Direct link – Raw Link

An icon is a monochrome media element which is used in a text context like text links and buttons.

Rails helper IconHelper

System Icons

A system icon, or UI icon, symbolizes a command, file, device, or directory. System icons are also used to represent common actions like trash,print, and save.

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

Product Icons

Product icons are the visual expression of a wlw’s products, services, and tools.

  • ABCefg
    catalog
  • ABCefg
    company-catalog
  • ABCefg
    company-categories
  • ABCefg
    company-certificates
  • ABCefg
    company-descriptions
  • ABCefg
    company-info
  • ABCefg
    company-location
  • ABCefg
    company-logo
  • ABCefg
    company-pictures
  • ABCefg
    company-profile
  • ABCefg
    company-references
  • ABCefg
    company-video
  • ABCefg
    latest-visitors
  • ABCefg
    performance-report
  • ABCefg
    product

Range Icons

Represents the distribution ranges of a supplier.

  • ABCefg
    regional
  • ABCefg
    national
  • ABCefg
    europe
  • ABCefg
    international
Supplier Type Icons

Represents the type of a supplier.

  • ABCefg
    manufacturer
  • ABCefg
    distributor
  • ABCefg
    service-provider
  • ABCefg
    wholesaler

Sizing

Fluid Sizes

Icon sizes refer to the font size of the surrounding DOM element by default.

Shape Size
ABC defg 24px
ABC defg 20px
ABC defg 18px
ABC defg 16px
ABC defg 14px
ABC defg 12px
Fixed Sizes

The framework provides CSS helper classes to override this behavior. When using these classes, the icon shape is centered vertically to thesorrounding text

Shape Size
ABC defg icon-xl
ABC defg icon-lg
ABC defg icon-md
ABC defg icon-sm
ABC defg icon-xs

Colors

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

Logos – Direct link – Raw Link

A logo is coloured media element which is used as visuals in large sizes.

Rails helper LogoHelper

Corporate Logos

Service Packages
  • free
  • regional
  • national
  • national-premium
  • europe
  • europe-premium
  • international
  • international-premium

Marketplace Services
  • product-upload-service
  • product-data-feed
  • sponsored-products

Online Marketing Services
  • active-hosting
  • etracker
  • homepage
  • top-ranking
  • traffic-booster
  • wlw-dach
  • wlw-europe
  • wlw-retargeting
  • wlw-seo

Icons with web font Deprecated – Direct link – Raw Link

The class selector is build with the prefix icon- and the explicit name.

System Icons

  • icon-arrow-down
  • icon-arrow-downgrade
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-upgrade
  • icon-article-block
  • icon-bookmark
  • icon-bulb
  • icon-caret
  • 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-gauge
  • icon-home
  • icon-link
  • icon-map-marker
  • icon-map-marker-alt
  • icon-ok
  • icon-ok-sign
  • icon-pdf
  • icon-pencil
  • icon-play-sign
  • icon-plus
  • icon-print
  • icon-profile
  • icon-question-sign
  • icon-search
  • icon-share
  • icon-star-bookmark
  • icon-trash
  • icon-upload
  • icon-user
  • icon-users
  • icon-website

Range Icons
  • icon-regional
  • icon-national
  • icon-europe
  • icon-international
Supplier Type Icons
  • icon-manufacturer
  • icon-distributor
  • icon-service-provider
  • icon-wholesaler

Other Symbols / Graphics Deprecated – Direct link – Raw Link

Symbols are image based resources and can be of different sizes.

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

Shapes – Direct link – Raw 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 circle" role="img"><svg><use xlink:href="#icon-company-profile"></use></svg></i>
  </div>
  <div class="col-sm-3">
    <i aria-hidden="true" class="svg-icon circle circle-info" role="img"><svg><use xlink:href="#icon-company-profile"></use></svg></i>
  </div>
  <div class="col-sm-3">
    <i aria-hidden="true" class="svg-icon circle circle-green" role="img"><svg><use xlink:href="#icon-company-profile"></use></svg></i>
  </div>
  <div class="col-sm-3">
    <i aria-hidden="true" class="svg-icon circle circle-orange" role="img"><svg><use xlink:href="#icon-company-profile"></use></svg></i>
  </div>
</div>

Images – Direct link

Image placeholder – Direct link – Raw 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

Buttons – Direct 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.

Types – Direct link – Raw 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 icons – Direct link – Raw 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" role="img"><svg><use xlink:href="#icon-pencil"></use></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" role="img"><svg><use xlink:href="#icon-search"></use></svg></i> Label</button><button class="btn btn-default btn-xs"><i aria-hidden="true" class="svg-icon" role="img"><svg><use xlink:href="#icon-trash"></use></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" role="img"><svg><use xlink:href="#icon-pencil"></use></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" role="img"><svg><use xlink:href="#icon-search"></use></svg></i> Label</button><button class="btn btn-default btn-sm"><i aria-hidden="true" class="svg-icon" role="img"><svg><use xlink:href="#icon-trash"></use></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" role="img"><svg><use xlink:href="#icon-pencil"></use></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" role="img"><svg><use xlink:href="#icon-search"></use></svg></i> Label</button><button class="btn btn-default btn-md"><i aria-hidden="true" class="svg-icon" role="img"><svg><use xlink:href="#icon-trash"></use></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" role="img"><svg><use xlink:href="#icon-pencil"></use></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" role="img"><svg><use xlink:href="#icon-search"></use></svg></i> Label</button><button class="btn btn-default btn-lg"><i aria-hidden="true" class="svg-icon" role="img"><svg><use xlink:href="#icon-trash"></use></svg></i></button>
</div>

Button Types and Icons – Direct link – Raw Link

Icons assume the text color of the respective button type.

<button class="btn btn-default"><i aria-hidden="true" class="svg-icon" role="img"><svg><use xlink:href="#icon-search"></use></svg></i></button> <button class="btn btn-primary"><i aria-hidden="true" class="svg-icon" role="img"><svg><use xlink:href="#icon-search"></use></svg></i></button> <button class="btn btn-info"><i aria-hidden="true" class="svg-icon" role="img"><svg><use xlink:href="#icon-search"></use></svg></i></button> <button class="btn btn-info-outlined"><i aria-hidden="true" class="svg-icon" role="img"><svg><use xlink:href="#icon-search"></use></svg></i></button> 

Button States – Direct link – Raw 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 Button – Direct link – Raw 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>

Others – Direct link

Labels and differents font sizes – Direct link – Raw 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 variants – Direct link – Raw 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 cloud – Direct link – Raw 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>

Badges – Direct link – Raw 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 Colors – Direct link – Raw 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

Shadows – Direct link – Raw 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 helper – Direct link

Main container – Direct link – Raw 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.

Corporate Logos – Direct link

Logos Without Text – Direct link – Raw Link

A simple corporate logo without a text label that is provided with a clear space.

<figure class="corporate-logo">
  <i aria-hidden="true" class="logo logo--wlw-seo corporate-logo__icon" role="img"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M32 63C14.88 63 1 49.12 1 32 1 14.88 14.88 1 32 1c17.12 0 31 13.88 31 31a31 31 0 0 1-31 31zm0-60C15.984 3 3 15.984 3 32s12.984 29 29 29 29-12.984 29-29A29 29 0 0 0 32 3z" fill="#66758a"/><path d="M44.71 19.29a1 1 0 0 0-1-.24l-18 6a1 1 0 0 0-.63.63l-6 18A1 1 0 0 0 20 45a1 1 0 0 0 .32-.05l18-6a1 1 0 0 0 .63-.63l6-18a1 1 0 0 0-.24-1.03zm-7.5 17.92L26.79 26.79l15.63-5.21-5.21 15.63z" fill="#89ba17"/></svg></i>
</figure>

Logos With Text – Direct link – Raw Link

A corporate logo with a text label in the primary text position.

The text label should act as a caption for the logo icon and represent the product name. It is not intended to be used for other types of text (e.g. slogans, prices, etc.)!

<figure class="corporate-logo" style="vertical-align: top">
  <i aria-hidden="true" class="logo logo--product-data-feed corporate-logo__icon" role="img"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M45.43 44a1 1 0 0 1 0-2h10.34c.52-.07 5.09-.86 5.23-6.51 0-.25 0-6.5-6.3-6.73a1 1 0 0 1-.95-1.19c.09-.49 2.15-12.08-7.26-17.53-.5-.29-12.05-6.91-19.36 5.29a1 1 0 0 1-1.12.45c-.06 0-6-1.53-10.48 1.65-3 2.12-4.71 5.86-5.13 11.13a1 1 0 0 1-1 .92c-.25 0-6.32.21-6.42 6.49 0 .25-.19 5.31 4.5 6.03h11.1a1 1 0 0 1 0 2H7.27C2 43.22.88 38.34 1 35.89c.1-5.91 4.53-8 7.49-8.35.59-5.45 2.58-9.4 5.91-11.76 4.3-3 9.5-2.45 11.4-2.1C34.16.6 47.37 8.23 47.5 8.31c8.85 5.12 8.68 15.21 8.36 18.54 5.71.78 7.18 5.92 7.14 8.68A8.25 8.25 0 0 1 55.93 44h-10.5z" fill="#66758a"/><path d="M32 27c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16a16 16 0 0 0-16-16zm-7.82 16.72a1 1 0 0 1-1-1A8.8 8.8 0 0 1 32 34.2h.3a8.75 8.75 0 0 1 4.54 1.45l-.16-1.47a1.006 1.006 0 0 1 2-.22l.46 4.09a1 1 0 0 1 0 .24 1 1 0 0 1 0 .15 1 1 0 0 1-.1.19 1 1 0 0 1-.08.15 1 1 0 0 1-.64.34l-4.09.46H34a1.002 1.002 0 0 1-.11-2l1.95-.22a6.77 6.77 0 0 0-10.65 5.34 1 1 0 0 1-1 1l-.01.02zM32 51.81h-.36a8.76 8.76 0 0 1-4.53-1.48l.16 1.47a1 1 0 0 1-.89 1.1h-.11a1 1 0 0 1-1-.9l-.43-4.1a1 1 0 0 1 .46-.9l.07-.06h.07a1 1 0 0 1 .31-.1l4.1-.43a1.005 1.005 0 0 1 .21 2l-2 .21a6.77 6.77 0 0 0 10.73-5.32 1 1 0 0 1 2 0A8.8 8.8 0 0 1 32 51.81z" fill="#00a3de"/></svg></i><figcaption class="corporate-logo__text">Product Data<br>Feed</figcaption>
</figure>

Service Package Logos – Direct link – Raw Link

Service Package Logos are provided with a stronger text label that can also have an extension. The extension is intended to highlight the term Premium only!

<figure class="corporate-logo corporate-logo--package">
  <i aria-hidden="true" class="logo logo--europe corporate-logo__icon" role="img"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M8 0a8 8 0 0 0-8 8v56h56a8 8 0 0 0 8-8V0H8zm53 56a5 5 0 0 1-5 5H3V8a5 5 0 0 1 5-5h53v53z" fill="#89ba17"/><path d="M50 31H34.41l11-11A1.004 1.004 0 0 0 44 18.57l-11 11V14a1 1 0 0 0-2 0v15.59l-11-11A1.004 1.004 0 0 0 18.57 20l11 11H14a1 1 0 0 0 0 2h15.59l-11 11A1.004 1.004 0 1 0 20 45.43l11-11V50a1 1 0 0 0 2 0V34.41l11 11A1.004 1.004 0 0 0 45.43 44l-11-11H50a1 1 0 0 0 0-2z" fill="#00193c"/></svg></i><figcaption class="corporate-logo__text">Europe</figcaption>
</figure>
<figure class="corporate-logo corporate-logo--package">
  <i aria-hidden="true" class="logo logo--europe-premium corporate-logo__icon" role="img"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M50 31H34.41l11-11A1.004 1.004 0 0 0 44 18.57l-11 11V14a1 1 0 0 0-2 0v15.59l-11-11A1.004 1.004 0 0 0 18.57 20l11 11H14a1 1 0 0 0 0 2h15.59l-11 11A1.004 1.004 0 1 0 20 45.43l11-11V50a1 1 0 0 0 2 0V34.41l11 11A1.004 1.004 0 0 0 45.43 44l-11-11H50a1 1 0 0 0 0-2z" fill="#0d2240"/><path d="M61 10.25V56a5 5 0 0 1-5 5H3v-7.25L0 56v8h56a8 8 0 0 0 8-8V8l-3 2.25z" fill="#00b2a9"/><path d="M8 0a8 8 0 0 0-8 8v48l3-2.25V8a5 5 0 0 1 5-5h53v7.25L64 8V0H8z" fill="#89ba17"/></svg></i><figcaption class="corporate-logo__text">Europe&nbsp;<span class="corporate-logo__extension">Premium</span></figcaption>
</figure>

Inline Logos – Direct link – Raw Link

Inline Logos are scaled and positioned to be used within surrounding texts, e.g. slogans. They should not be combined with a text label!

Retargeting boosts your traffic.

<p class="font-h4">
  <span class="corporate-logo corporate-logo--inline"><i aria-hidden="true" class="logo logo--wlw-retargeting corporate-logo__icon" role="img"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M32 51c-10.478 0-18.978-8.483-19-18.96C12.98 21.562 21.443 13.044 31.92 13c10.478-.044 19.014 8.402 19.08 18.88a1 1 0 0 1-2 0c-.054-8.553-6.454-15.735-14.944-16.769-8.491-1.034-16.428 4.401-18.533 12.692-2.105 8.29 2.278 16.853 10.233 19.995 7.956 3.142 17.006-.116 21.134-7.608a1.008 1.008 0 1 1 1.75 1A19 19 0 0 1 32 51z" fill="#66758a"/><circle cx="32" cy="32" fill="#89ba17" r="8"/><path d="M32 63A31 31 0 0 1 3.59 19.57a1 1 0 1 1 1.83.8c-6.01 13.71-.595 29.742 12.496 37.003 13.092 7.26 29.558 3.362 38.006-8.996 8.448-12.359 6.1-29.117-5.417-38.679C38.987.136 22.083.913 11.49 11.49a1 1 0 0 1-1.41-1.41C20.001.159 35.35-1.862 47.5 5.153c12.152 7.016 18.076 21.318 14.444 34.87C58.313 53.577 46.031 63 32 63z" fill="#66758a"/><path d="M18.53 11.33l-6.91-1.14 1.14-6.91a1.014 1.014 0 1 0-2-.33l-1.3 7.89a1 1 0 0 0 .85 1.16l7.89 1.3h.16a1.003 1.003 0 0 0 .16-2l.01.03zM55.3 24.7a1 1 0 0 0-1.4.23l-4.07 5.69-5.69-4.07A1 1 0 1 0 43 28.17l6.51 4.65a1 1 0 0 0 1.4-.23l4.66-6.51a1 1 0 0 0-.27-1.38z" fill="#66758a"/></svg></i></span>Retargeting boosts your traffic.
</p>

Wide Logos – Direct link – Raw Link

The wide corporate logo variant provides the secondary text position.

<figure class="corporate-logo corporate-logo--wide corporate-logo--package">
  <i aria-hidden="true" class="logo logo--europe corporate-logo__icon" role="img"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M8 0a8 8 0 0 0-8 8v56h56a8 8 0 0 0 8-8V0H8zm53 56a5 5 0 0 1-5 5H3V8a5 5 0 0 1 5-5h53v53z" fill="#89ba17"/><path d="M50 31H34.41l11-11A1.004 1.004 0 0 0 44 18.57l-11 11V14a1 1 0 0 0-2 0v15.59l-11-11A1.004 1.004 0 0 0 18.57 20l11 11H14a1 1 0 0 0 0 2h15.59l-11 11A1.004 1.004 0 1 0 20 45.43l11-11V50a1 1 0 0 0 2 0V34.41l11 11A1.004 1.004 0 0 0 45.43 44l-11-11H50a1 1 0 0 0 0-2z" fill="#00193c"/></svg></i><figcaption class="corporate-logo__text">Europe</figcaption>
</figure>
<figure class="corporate-logo corporate-logo--wide corporate-logo--package">
  <i aria-hidden="true" class="logo logo--europe-premium corporate-logo__icon" role="img"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M50 31H34.41l11-11A1.004 1.004 0 0 0 44 18.57l-11 11V14a1 1 0 0 0-2 0v15.59l-11-11A1.004 1.004 0 0 0 18.57 20l11 11H14a1 1 0 0 0 0 2h15.59l-11 11A1.004 1.004 0 1 0 20 45.43l11-11V50a1 1 0 0 0 2 0V34.41l11 11A1.004 1.004 0 0 0 45.43 44l-11-11H50a1 1 0 0 0 0-2z" fill="#0d2240"/><path d="M61 10.25V56a5 5 0 0 1-5 5H3v-7.25L0 56v8h56a8 8 0 0 0 8-8V8l-3 2.25z" fill="#00b2a9"/><path d="M8 0a8 8 0 0 0-8 8v48l3-2.25V8a5 5 0 0 1 5-5h53v7.25L64 8V0H8z" fill="#89ba17"/></svg></i><figcaption class="corporate-logo__text">Europe&nbsp;<span class="corporate-logo__extension">Premium</span></figcaption>
</figure>
<figure class="corporate-logo corporate-logo--wide">
  <i aria-hidden="true" class="logo logo--product-data-feed corporate-logo__icon" role="img"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M45.43 44a1 1 0 0 1 0-2h10.34c.52-.07 5.09-.86 5.23-6.51 0-.25 0-6.5-6.3-6.73a1 1 0 0 1-.95-1.19c.09-.49 2.15-12.08-7.26-17.53-.5-.29-12.05-6.91-19.36 5.29a1 1 0 0 1-1.12.45c-.06 0-6-1.53-10.48 1.65-3 2.12-4.71 5.86-5.13 11.13a1 1 0 0 1-1 .92c-.25 0-6.32.21-6.42 6.49 0 .25-.19 5.31 4.5 6.03h11.1a1 1 0 0 1 0 2H7.27C2 43.22.88 38.34 1 35.89c.1-5.91 4.53-8 7.49-8.35.59-5.45 2.58-9.4 5.91-11.76 4.3-3 9.5-2.45 11.4-2.1C34.16.6 47.37 8.23 47.5 8.31c8.85 5.12 8.68 15.21 8.36 18.54 5.71.78 7.18 5.92 7.14 8.68A8.25 8.25 0 0 1 55.93 44h-10.5z" fill="#66758a"/><path d="M32 27c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16a16 16 0 0 0-16-16zm-7.82 16.72a1 1 0 0 1-1-1A8.8 8.8 0 0 1 32 34.2h.3a8.75 8.75 0 0 1 4.54 1.45l-.16-1.47a1.006 1.006 0 0 1 2-.22l.46 4.09a1 1 0 0 1 0 .24 1 1 0 0 1 0 .15 1 1 0 0 1-.1.19 1 1 0 0 1-.08.15 1 1 0 0 1-.64.34l-4.09.46H34a1.002 1.002 0 0 1-.11-2l1.95-.22a6.77 6.77 0 0 0-10.65 5.34 1 1 0 0 1-1 1l-.01.02zM32 51.81h-.36a8.76 8.76 0 0 1-4.53-1.48l.16 1.47a1 1 0 0 1-.89 1.1h-.11a1 1 0 0 1-1-.9l-.43-4.1a1 1 0 0 1 .46-.9l.07-.06h.07a1 1 0 0 1 .31-.1l4.1-.43a1.005 1.005 0 0 1 .21 2l-2 .21a6.77 6.77 0 0 0 10.73-5.32 1 1 0 0 1 2 0A8.8 8.8 0 0 1 32 51.81z" fill="#00a3de"/></svg></i><figcaption class="corporate-logo__text">Product Data<br>Feed</figcaption>
</figure>

Logo Sizes – Direct link – Raw Link

There are fixed logo size variants available that are not affected by the surrounding font size. See the example below.

Size: small

Size: medium

Size: large

<strong>Size: small</strong><br>
<figure class="corporate-logo corporate-logo--small" style="vertical-align: middle">
  <i aria-hidden="true" class="logo logo--sponsored-products corporate-logo__icon" role="img"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M23.85 62.57c-.62 0-1.27-1.21-4.62-7.58l-7.94.23a1 1 0 0 1-.9-1.5l6.8-11.92a1.003 1.003 0 1 1 1.74 1L13 53.17l6.79-.2a1 1 0 0 1 .92.54c1.15 2.19 2.41 4.56 3.21 6 1.54-2.67 4.87-8.53 7.23-12.71a1.003 1.003 0 1 1 1.74 1c-8.17 14.44-8.17 14.44-8.57 14.62a1.18 1.18 0 0 1-.47.15z" fill="#66758a"/><path d="M40.17 62.57a1.19 1.19 0 0 1-.47-.15c-.39-.18-.39-.18-8.56-14.62a1.003 1.003 0 0 1 1.74-1c2.37 4.18 5.7 10 7.23 12.71.79-1.46 2.06-3.83 3.21-6a1 1 0 0 1 .92-.54l6.79.2L45 42.71a1.003 1.003 0 0 1 1.74-1l6.86 12a1 1 0 0 1 0 1 1 1 0 0 1-.89.49l-7.92-.2c-3.35 6.36-4 7.57-4.62 7.57z" fill="#66758a"/><path d="M32 48.15c-12.703 0-23-10.297-23-23s10.297-23 23-23 23 10.297 23 23a23 23 0 0 1-23 23zm0-44c-11.598 0-21 9.402-21 21s9.402 21 21 21 21-9.402 21-21a21 21 0 0 0-21-21z" fill="#66758a"/><path d="M42.95 22.07a1 1 0 0 0-.81-.68c-2-.28-5.19-.73-6.34-.92-.37-.78-1.17-2.36-2.9-5.78a1 1 0 0 0-1.79.01l-2.83 5.74-6.43.94a1 1 0 0 0-.55 1.71l4.64 4.52-1.08 6.32A1 1 0 0 0 26.3 35l5.7-3 5.73 3a1 1 0 0 0 1.48-1l-1.1-6.32 4.6-4.54a1 1 0 0 0 .24-1.07z" fill="#00a3de"/></svg></i>
</figure>
<br><strong>Size: medium</strong><br>
<figure class="corporate-logo corporate-logo--medium" style="vertical-align: middle">
  <i aria-hidden="true" class="logo logo--sponsored-products corporate-logo__icon" role="img"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M23.85 62.57c-.62 0-1.27-1.21-4.62-7.58l-7.94.23a1 1 0 0 1-.9-1.5l6.8-11.92a1.003 1.003 0 1 1 1.74 1L13 53.17l6.79-.2a1 1 0 0 1 .92.54c1.15 2.19 2.41 4.56 3.21 6 1.54-2.67 4.87-8.53 7.23-12.71a1.003 1.003 0 1 1 1.74 1c-8.17 14.44-8.17 14.44-8.57 14.62a1.18 1.18 0 0 1-.47.15z" fill="#66758a"/><path d="M40.17 62.57a1.19 1.19 0 0 1-.47-.15c-.39-.18-.39-.18-8.56-14.62a1.003 1.003 0 0 1 1.74-1c2.37 4.18 5.7 10 7.23 12.71.79-1.46 2.06-3.83 3.21-6a1 1 0 0 1 .92-.54l6.79.2L45 42.71a1.003 1.003 0 0 1 1.74-1l6.86 12a1 1 0 0 1 0 1 1 1 0 0 1-.89.49l-7.92-.2c-3.35 6.36-4 7.57-4.62 7.57z" fill="#66758a"/><path d="M32 48.15c-12.703 0-23-10.297-23-23s10.297-23 23-23 23 10.297 23 23a23 23 0 0 1-23 23zm0-44c-11.598 0-21 9.402-21 21s9.402 21 21 21 21-9.402 21-21a21 21 0 0 0-21-21z" fill="#66758a"/><path d="M42.95 22.07a1 1 0 0 0-.81-.68c-2-.28-5.19-.73-6.34-.92-.37-.78-1.17-2.36-2.9-5.78a1 1 0 0 0-1.79.01l-2.83 5.74-6.43.94a1 1 0 0 0-.55 1.71l4.64 4.52-1.08 6.32A1 1 0 0 0 26.3 35l5.7-3 5.73 3a1 1 0 0 0 1.48-1l-1.1-6.32 4.6-4.54a1 1 0 0 0 .24-1.07z" fill="#00a3de"/></svg></i>
</figure>
<br><strong>Size: large</strong><br>
<figure class="corporate-logo corporate-logo--large" style="vertical-align: middle">
  <i aria-hidden="true" class="logo logo--sponsored-products corporate-logo__icon" role="img"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M23.85 62.57c-.62 0-1.27-1.21-4.62-7.58l-7.94.23a1 1 0 0 1-.9-1.5l6.8-11.92a1.003 1.003 0 1 1 1.74 1L13 53.17l6.79-.2a1 1 0 0 1 .92.54c1.15 2.19 2.41 4.56 3.21 6 1.54-2.67 4.87-8.53 7.23-12.71a1.003 1.003 0 1 1 1.74 1c-8.17 14.44-8.17 14.44-8.57 14.62a1.18 1.18 0 0 1-.47.15z" fill="#66758a"/><path d="M40.17 62.57a1.19 1.19 0 0 1-.47-.15c-.39-.18-.39-.18-8.56-14.62a1.003 1.003 0 0 1 1.74-1c2.37 4.18 5.7 10 7.23 12.71.79-1.46 2.06-3.83 3.21-6a1 1 0 0 1 .92-.54l6.79.2L45 42.71a1.003 1.003 0 0 1 1.74-1l6.86 12a1 1 0 0 1 0 1 1 1 0 0 1-.89.49l-7.92-.2c-3.35 6.36-4 7.57-4.62 7.57z" fill="#66758a"/><path d="M32 48.15c-12.703 0-23-10.297-23-23s10.297-23 23-23 23 10.297 23 23a23 23 0 0 1-23 23zm0-44c-11.598 0-21 9.402-21 21s9.402 21 21 21 21-9.402 21-21a21 21 0 0 0-21-21z" fill="#66758a"/><path d="M42.95 22.07a1 1 0 0 0-.81-.68c-2-.28-5.19-.73-6.34-.92-.37-.78-1.17-2.36-2.9-5.78a1 1 0 0 0-1.79.01l-2.83 5.74-6.43.94a1 1 0 0 0-.55 1.71l4.64 4.52-1.08 6.32A1 1 0 0 0 26.3 35l5.7-3 5.73 3a1 1 0 0 0 1.48-1l-1.1-6.32 4.6-4.54a1 1 0 0 0 .24-1.07z" fill="#00a3de"/></svg></i>
</figure>
<br>

Navigation – Direct link

Breadcrumbs – Direct link – Raw 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="#"><i aria-hidden="true" class="svg-icon" role="img"><svg><use xlink:href="#icon-home"></use></svg></i> Home</a>
  </li>
  <li>
    <a href="#">Library</a>
  </li>
  <li class="active">
    Data
  </li>
</ol>

Tabs – Direct link – Raw 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="js-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="js-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 js-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 js-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>
<div class="js-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>
</div>

Pagination – Direct link – Raw 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>

Alerts – Direct 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 Variations – Direct link – Raw 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 bar – Direct link

Default progress bar – Direct link – Raw 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 labels – Direct link – Raw 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 alternatives – Direct link – Raw 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>

Content Toggle – Direct link

The content-toggle package is an internal JS plugin.

Webpack configuration

In case you using webpack to build your JS you have to register the package as external resource to get access via module import.

// webpack.config.js
module.exports = {
  …
  externals: {
    '@wlw/content-toggle': 'ContentToggle'
  }
  …
}

Usage

// initialization file
import ContentToggle from '@wlw/content-toggle' // Requires webpack mapping

const contentToggle = new ContentToggle('#my-content-toggle')

contentToggle.init()

Medium Content Toggle (Default) – Direct link – Raw Link

<div class="content-toggle js-content-toggle is-collapsed">
  <div class="content-toggle__content">
    <div class="content-toggle__inner">
      Beaver? You mean vagina? — I mean, you know him? Orci ipsum, placerat id condimentum rutrum, rhoncus ac lorem aliquam placerat posuere. A way out west there was a fella, fella I want to tell you about, fella by the name of Jeff Lebowski. At least, that was the handle his lovin’ parents gave him, but he never had much use for it himself. This Lebowski, he called himself the Dude. Now, Dude, that’s a name no one would self-apply where I come from. But then, there was a lot about the Dude that didn’t Vee could do things you only dreamed of, Lebowski. Mi sapien, ut ultricies ipsum morbi eget risus nulla nullam vel nisi enim, vel. That fucking bitch! Auctor ante morbi id urna vel felis lacinia placerat. The new technology permits us to do exciting things with interactive erotic software. Wave of the future, Dude. 100% electronic. Vestibulum turpis nulla, viverra nec volutpat ac, ornare id lectus cras pharetra faucibus. Lebowski ipsum goodnight, sweet prince. Dolor sit amet, consectetur adipiscing. If the plan gets too complex something always goes wrong. If there’s one thing I learned in Nam—. Elit praesent ac magna justo pellentesque ac lectus quis elit blandit fringilla a ut. I don’t like your jerk-off name, I don’t like your jerk-off face, I don’t like your jerk-off behavior, and I don’t like you, jerk-off. Turpis praesent felis ligula, malesuada suscipit malesuada non, ultrices non urna sed. I see you rolled your way into the semis. Dios mio, man. Seamus and me, we’re gonna fuck you up. Tristique nullam non accumsan justo nulla facilisi integer interdum elementum. Yeah man, it really tied the room together. Nulla, nec eleifend nisl euismod ac maecenas vitae. Do you have any kalhua? Eros velit, eu suscipit erat integer purus lacus, pretium vel venenatis eu, volutpat non. Shit, I know that guy. He’s a nihilist. Erat donec a metus ac eros dictum aliquet nulla consectetur egestas placerat. He suspects that the culprits might be the very people who, uh, soiled your r…2000
    </div>
  </div>
  <div class="content-toggle__actions text-center">
    <div class="content-toggle__more">
      <div>
        Show more
      </div>
      <i aria-hidden="true" class="svg-icon" role="img"><svg><use xlink:href="#icon-arrow-down"></use></svg></i>
    </div>
    <div class="content-toggle__less">
      <div>
        Show less
      </div>
      <i aria-hidden="true" class="svg-icon" role="img"><svg><use xlink:href="#icon-arrow-up"></use></svg></i>
    </div>
  </div>
</div>

Large Content Toggle – Direct link – Raw Link

<div class="content-toggle content-toggle--large js-content-toggle is-collapsed">
  <div class="content-toggle__content">
    <div class="content-toggle__inner">
      Beaver? You mean vagina? — I mean, you know him? Orci ipsum, placerat id condimentum rutrum, rhoncus ac lorem aliquam placerat posuere. A way out west there was a fella, fella I want to tell you about, fella by the name of Jeff Lebowski. At least, that was the handle his lovin’ parents gave him, but he never had much use for it himself. This Lebowski, he called himself the Dude. Now, Dude, that’s a name no one would self-apply where I come from. But then, there was a lot about the Dude that didn’t Vee could do things you only dreamed of, Lebowski. Mi sapien, ut ultricies ipsum morbi eget risus nulla nullam vel nisi enim, vel. That fucking bitch! Auctor ante morbi id urna vel felis lacinia placerat. The new technology permits us to do exciting things with interactive erotic software. Wave of the future, Dude. 100% electronic. Vestibulum turpis nulla, viverra nec volutpat ac, ornare id lectus cras pharetra faucibus. You know, the usual. Bowl. Drive around. The occasional acid flashback. Maecenas pulvinar nisl et nisl rhoncus at volutpat felis blandit. It’s a complicated case, Maude. Lotta ins. Lotta outs. And a lotta strands to keep in my head, man. In libero turpis, laoreet et molestie sed. They won’t hurt us, Donny. These men are cowards. Volutpat et erat nulla ut orci. Every time a rug is micturated upon in this fair city, I have to compensate. Quis neque consectetur tincidunt. He suspects that the culprits might be the very people who, uh, soiled your rug, and you’re in a unique position to confirm or, uh, disconfirm that suspicion. Ultrices non urna sed orci ipsum, placerat id. WE HAVE BUNNY. GATHER ONE MILLION DOLLARS IN UNMARKED NON-CONSECUTIVE TWENTIES. AWAIT INSTRUCTIONS. NO FUNNY STUFF. Condimentum rutrum, rhoncus ac lorem aliquam placerat posuere neque, at dignissim magna ullamcorper. I was, uh, one of the authors of the Port Huron Statement —The original Port Huron Statement. Not the compromised second draft. In aliquam sagittis massa ac tortor ultric…2000<br><br>Lebowski ipsum goodnight, sweet prince. Dolor sit amet, consectetur adipiscing. If the plan gets too complex something always goes wrong. If there’s one thing I learned in Nam—. Elit praesent ac magna justo pellentesque ac lectus quis elit blandit fringilla a ut. I don’t like your jerk-off name, I don’t like your jerk-off face, I don’t like your jerk-off behavior, and I don’t like you, jerk-off. Turpis praesent felis ligula, malesuada suscipit malesuada non, ultrices non urna sed. Beaver? You mean vagina? — I mean, you know him? Orci ipsum, placerat id condimentum rutrum, rhoncus ac lorem aliquam placerat posuere. A way out west there was a fella, fella I want to tell you about, fella by the name of Jeff Lebowski. At least, that was the handle his lovin’ parents gave him, but he never had much use for it himself. This Lebowski, he called himself the Dude. Now, Dude, that’s a name no one would self-apply where I come from. But then, there was a lot about the Dude that didn’t Where’s my goddamn money, you bum?! Dolor sit amet, consectetur adipiscing elit praesent ac magna justo pellentesque ac lectus. Your goons’ll be able to get it off him, mean he’s only fifteen and he’s flunking social studies. So if you’ll just write me a check for my ten per cent… of half a million… fifty grand. Quis elit blandit fringilla a ut turpis praesent felis ligula, malesuada suscipit malesuada non. You know, the usual. Bowl. Drive around. The occasional acid flashback. Maecenas pulvinar nisl et nisl rhoncus at volutpat felis blandit. It’s a complicated case, Maude. Lotta ins. Lotta outs. And a lotta strands to keep in my head, man. In libero turpis, laoreet et molestie sed. They won’t hurt us, Donny. These men are cowards. Volutpat et erat nulla ut orci. Every time a rug is micturated upon in this fair city, I have to compensate. Quis neque consectetur tincidunt. I see you rolled your way into the semis. Dios mio, man. Seamus and me, we’re gonna fuck you up. Tristique nullam non acc…2000
    </div>
  </div>
  <div class="content-toggle__actions text-center">
    <div class="content-toggle__more">
      <div>
        Show more
      </div>
      <i aria-hidden="true" class="svg-icon" role="img"><svg><use xlink:href="#icon-arrow-down"></use></svg></i>
    </div>
    <div class="content-toggle__less">
      <div>
        Show less
      </div>
      <i aria-hidden="true" class="svg-icon" role="img"><svg><use xlink:href="#icon-arrow-up"></use></svg></i>
    </div>
  </div>
</div>

Accordions – Direct link

Default accordion – Direct link – Raw 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.

He suspects that the culprits might be the very people who, uh, soiled your rug, and you’re in a unique position to confirm or, uh, disconfirm that suspicion. Ultrices non urna sed orci ipsum, placerat id. WE HAVE BUNNY. GATHER ONE MILLION DOLLARS IN …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><use xlink:href="#icon-arrow-up"></use></svg></i><i aria-hidden="true" class="svg-icon icon-sm accordion__icon accordion__icon--collapsed" role="img"><svg><use xlink:href="#icon-arrow-down"></use></svg></i>Vee could do thin…20</a>
  <div class="collapse" id="base-accordion-example">
    I see you rolled your way into the semis. Dios mio, man. Seamus and me, we’re gonna fuck you up. Tristique nullam non accumsan justo nulla facilisi integer interdum elementum. Yeah man, it really tied the room together. Nulla, nec eleifend nisl euismo…255
  </div>
</div>

Hollow accordion theme – Direct link – Raw Link

Lebowski ipsum goodnight, sweet prince. Dolor sit amet, consectetur adipiscing. If the plan gets too complex something always goes wrong. If there’s one thing I learned in Nam—. Elit praesent ac magna justo pellentesque ac lectus quis elit blandit fri…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><use xlink:href="#icon-arrow-up"></use></svg></i><i aria-hidden="true" class="svg-icon icon-sm accordion__icon accordion__icon--collapsed" role="img"><svg><use xlink:href="#icon-arrow-down"></use></svg></i>You know, the usu…20
    </div>
  </a>
  <div class="accordion__body collapse" id="hollow-accordion-example">
    Lebowski ipsum goodnight, sweet prince. Dolor sit amet, consectetur adipiscing. If the plan gets too complex something always goes wrong. If there’s one thing I learned in Nam—. Elit praesent ac magna justo pellentesque ac lectus quis elit blandit fri…255
  </div>
</div>

Content Boxes – Direct link

Default Content Box – Direct link – Raw Link

A bordered content box.

Where’s my goddamn money, you bum?! Dolor sit amet, consectetur adipiscing elit praesent ac magna justo pellentesque ac lectus. Your goons’ll be able to get it off him, mean he’s only fifteen and he’s flunking social studies. So if you’ll just write m…255
Vee could do things you only dreamed of, Lebowski. Mi sapien, ut ultricies ipsum morbi eget risus nulla nullam vel nisi enim, vel. That fucking bitch! Auctor ante morbi id urna vel felis lacinia placerat. The new technology permits us to do exciting t…255
Vee could do things you only dreamed of, Lebowski. Mi sapien, ut ultricies ipsum morbi eget risus nulla nullam vel nisi enim, vel. That fucking bitch! Auctor ante morbi id urna vel felis lacinia placerat. The new technology permits us to do exciting t…255
Lebowski ipsum goodnight, sweet prince. Dolor sit amet, consectetur adipiscing. If the plan gets too complex something always goes wrong. If there’s one thing I learned in Nam—. Elit praesent ac magna justo pellentesque ac lectus quis elit blandit fri…255
<div class="content-box">
  <div class="row">
    <div class="col-xs-12 col-sm-6">
      Beaver? You mean vagina? — I mean, you know him? Orci ipsum, placerat id condimentum rutrum, rhoncus ac lorem aliquam placerat posuere. A way out west there was a fella, fella I want to tell you about, fella by the name of Jeff Lebowski. At least, tha…255
    </div>
    <div class="col-xs-12 col-sm-6">
      I see you rolled your way into the semis. Dios mio, man. Seamus and me, we’re gonna fuck you up. Tristique nullam non accumsan justo nulla facilisi integer interdum elementum. Yeah man, it really tied the room together. Nulla, nec eleifend nisl euismo…255
    </div>
  </div>
</div>
<div class="content-box">
  <div class="row">
    <div class="col-xs-12 col-sm-6">
      He suspects that the culprits might be the very people who, uh, soiled your rug, and you’re in a unique position to confirm or, uh, disconfirm that suspicion. Ultrices non urna sed orci ipsum, placerat id. WE HAVE BUNNY. GATHER ONE MILLION DOLLARS IN …255
    </div>
    <div class="col-xs-12 col-sm-6">
      I see you rolled your way into the semis. Dios mio, man. Seamus and me, we’re gonna fuck you up. Tristique nullam non accumsan justo nulla facilisi integer interdum elementum. Yeah man, it really tied the room together. Nulla, nec eleifend nisl euismo…255
    </div>
  </div>
</div>

Panels – Direct link

Panel variants – Direct 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 Behaviours – Direct 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.

Call to action can be simple or colorful by using .panel__action
<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">
        <p>Panel effect by using the <code>.panel--hover</code> modifier.
        </p>
        Call to action can be <span class="panel__action">simple</span> or <span class="panel__action text-info">colorful</span> by using <code>.panel__action</code>
      </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">
        <p>Panel effect by an <code>&lt;a&gt;</code> element.
        </p>
        Call to action can be <span class="panel__action">simple</span> or <span class="panel__action text-info">colorful</span> by using <code>.panel__action</code>
      </div>
    </a>
  </div>
</div>

Panel Themes – Direct link – Raw 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 Panels – Direct link – Raw Link

Teaser panels contains images and have visible hover-states.

Default Teaser
Teaser with smaller image
Teaser as horizontal variant
5/4 320x180

Panel with image left

You know, the usual. Bowl. Drive around. The oc…50

<h5 class="docs-h5">
  Default Teaser
</h5>
<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 panel__action">Text content</span>
      </div>
    </a>
  </div>
  <div class="col-sm-6 col-md-3">
    <a class="panel panel--narrow 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 panel__action">Text content</span>
      </div>
    </a>
  </div>
</div>
<h5 class="docs-h5">
  Teaser with smaller image
</h5>
<div class="row">
  <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 panel__action">Text content</span>
      </div>
    </a>
  </div>
  <div class="col-sm-6 col-md-3">
    <a class="panel panel--narrow 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 panel__action">Text content</span>
      </div>
    </a>
  </div>
</div>
<h5 class="docs-h5">
  Teaser as horizontal variant
</h5>
<div class="row">
  <div class="col-sm-6">
    <div class="panel panel--narrow 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>
              Vee could do things you only dreamed of, Lebows…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>
              Lebowski ipsum goodnight, sweet prince. Dolor s…50
            </p>
          </div>
        </div>
      </div>
    </a>
  </div>
</div>

Aside Panels – Direct link – Raw 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--narrow 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--narrow 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 aria-hidden="true" class="svg-icon icon-sm icon--wholesaler" role="img"><svg><use xlink:href="#icon-wholesaler"></use></svg></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 aria-hidden="true" class="svg-icon icon-sm icon--distributor" role="img"><svg><use xlink:href="#icon-distributor"></use></svg></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 aria-hidden="true" class="svg-icon icon-sm icon--manufacturer" role="img"><svg><use xlink:href="#icon-manufacturer"></use></svg></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 aria-hidden="true" class="svg-icon icon-sm icon--service-provider" role="img"><svg><use xlink:href="#icon-service-provider"></use></svg></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 aria-label="Suchen" class="btn btn-default" type="submit"><i aria-hidden="true" class="svg-icon icon-md" role="img"><svg><use xlink:href="#icon-search"></use></svg></i></button></span>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="panel-footer">
        Panel Footer
      </div>
    </div>
  </div>
</div>

Collapsible Panel – Direct link – Raw 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 Spacing – Direct link – Raw Link

In addition to the default inner panel spacing (padding), the framework provides also a smaller variation.

Default panel

Title
Body

.panel--narrow

Title
Body

Default just with body

Body

.panel--narrow 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--narrow</code>
    </p>
    <div class="panel panel--narrow">
      <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--narrow</code> just with body
    </p>
    <div class="panel panel--narrow">
      <div class="panel-body">
        Body
      </div>
    </div>
  </div>
</div>

Panel Footnote – Direct link – Raw Link

The framework provides footnotes which a close related the Panel comonent.

Usage

Footnotes typically features disclaimers, caveats, legal restrictions, or copyrights.

Panel body text content
Additional legal restrictions, or copyrights informations
Panel body text contentAdditional legal restrictions, or copyrights informations
<div class="row">
  <div class="col-sm-6">
    <div class="panel">
      <div class="panel-body">
        Panel body text content
      </div>
    </div>
    <small class="panel__footnote">Additional legal restrictions, or copyrights informations</small>
  </div>
  <div class="col-sm-6">
    <div class="panel">
      <div class="panel-body">
        Panel body text content<small class="panel__footnote">Additional legal restrictions, or copyrights informations</small>
      </div>
    </div>
  </div>
</div>

Panel States – Direct link – Raw 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">
      He suspects that the culprits might be the very people who, uh, soiled your rug, and you’re in a unique position to confirm or, uh, disc…140
    </p>
    <div class="btn btn-primary intro-ani-later">
      Jetzt informieren
    </div>
  </a>
</div>

Underlay Panel – Direct link – Raw 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">
    He suspects that the culprits might be the very people who, uh, soiled your rug, and you’re in a unique position to confirm or, uh, disconfirm that suspicion. Ultrices non urna sed orci ipsum, placerat id. WE HAVE BUNNY. GATHER ONE MILLION DOLLARS IN …255
  </div>
</a>

Overview Bar – Direct link

Default overview bar – Direct link – Raw 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).

You know, the usual. Bowl. Drive around. The occasional acid flashback. Maecenas pulvinar nisl et nisl rhoncus at volutpat felis blandit. It’s a complicated case, Maude. Lotta ins. Lotta outs. And a lotta strands to keep in my head, man. In libero tur…255
You know, the usual. Bowl. Drive around. The occasional acid flashback. Maecenas pulvinar nisl et nisl rhoncus at volutpat felis blandit. It’s a complicated case, Maude. Lotta ins. Lotta outs. And a lotta strands to keep in my head, man. In libero tur…255
<div class="row overview-bar">
  <div class="col-xs-12 col-md-6 overview-bar__section">
    <div class="text-vcenter">
      Vee could do things you only dreamed of, Lebowski. Mi sapien, ut ultricies ipsum morbi eget risus nulla nullam vel nisi enim, vel. That fucking bitch! Auctor ante morbi id urna vel felis lacinia placerat. The new technology permits us to do exciting t…255
    </div>
  </div>
  <div class="col-xs-12 col-md-6 overview-bar__section background-blue">
    <div class="text-vcenter">
      I see you rolled your way into the semis. Dios mio, man. Seamus and me, we’re gonna fuck you up. Tristique nullam non accumsan justo nulla facilisi integer interdum elementum. Yeah man, it really tied the room together. Nulla, nec eleifend nisl euismo…255
    </div>
  </div>
</div>

Media Object – Direct link

Media Object Example – Direct link – Raw Link

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

64x64

Media heading

You know, the usual. Bowl. Drive around. The occasional acid flashback. Maecenas pulvinar nisl et nisl rhoncus at volutpat felis blandit. It’s a complicated case, Maude. Lotta …180
64x64

Media heading

He suspects that the culprits might be the very people who, uh, soiled your rug, and you’re in a unique position to confirm or, uh, disconfirm that suspicion. Ultrices non urna sed orci ipsum, placerat id. WE HAVE BUNNY. GATHER ONE MILLION DOLLARS IN UNMARKED NON-CONSECUTIVE TWENTIES. AWAIT INSTRUCTIONS. NO FUNNY STUFF. Condimentum rutrum, rhoncus ac lorem aliquam placerat posuere neque, at dignissim magna ullamcorper. I was, uh, one of the a…450
64x64

Nested media heading

Where’s my goddamn money, you bum?! Dolor sit amet, consectetur adipiscing elit praesent ac magna justo pellentesque ac lectus. Your goons’ll be a…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>
    I see you rolled your way into the semis. Dios mio, man. Seamus and me, we’re gonna fuck you up. Tristique nullam non accumsan justo nulla facilisi integer interdum elementum. …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>
    I see you rolled your way into the semis. Dios mio, man. Seamus and me, we’re gonna fuck you up. Tristique nullam non accumsan justo nulla facilisi integer interdum elementum. Yeah man, it really tied the room together. Nulla, nec eleifend nisl euismod ac maecenas vitae. Do you have any kalhua? Eros velit, eu suscipit erat integer purus lacus, pretium vel venenatis eu, volutpat non. Shit, I know that guy. He’s a nihilist. Erat donec a metus a…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>
        Beaver? You mean vagina? — I mean, you know him? Orci ipsum, placerat id condimentum rutrum, rhoncus ac lorem aliquam placerat posuere. A way out …150
      </div>
    </div>
  </div>
</div>

Media Object Spaces – Direct link – Raw 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 Pairs – Direct 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 Example – Direct link – Raw 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>

Modal – Direct link

Modal Skeleton – Direct link – Raw Link

The standard modal includes .modal-header, .modal-body and .modal-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 Content – Direct link – Raw 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">Beaver? You mean vagina? — I mean, you know him? Orci ipsum, placerat id condimentum rutrum, rhoncus ac lorem aliquam placerat posuere. A way out …150</figcaption></figure>
      </div>
    </div>
  </div>
</div>

Modal Media Carousel – Direct link – Raw Link

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

Modal Demo – Direct link – Raw 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 System – Direct link

Intro – Direct 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.

Example – Direct link – Raw 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>

Options – Direct 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 & Inputs – Direct link

Text Input Fields – Direct link – Raw 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 States – Direct link – Raw 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>

Fieldsets – Direct link – Raw 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 Texts – Direct link – Raw 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>

Upgrade Package Indicator – Direct link – Raw Link

Signals customers that this content only useful for paid packages.

<div class="form-group">
  <label class="control-label" for="#ex-form-help-text">Label</label>
  <div class="package-upgrade-visual package-upgrade-visual--inline">
    <figure class="corporate-logo corporate-logo--package package-upgrade-visual__logo">
      <i aria-hidden="true" class="logo logo--free corporate-logo__icon" role="img" title="Free"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M8 0a8 8 0 0 0-8 8v56h56a8 8 0 0 0 8-8V0H8zm53 56a5 5 0 0 1-5 5H3V8a5 5 0 0 1 5-5h53v53z" fill="#89ba17"/></svg></i>
    </figure>
    <i aria-hidden="true" class="svg-icon package-upgrade-visual__arrow" role="img"><svg><use xlink:href="#icon-arrow-right"></use></svg></i>
    <figure class="corporate-logo corporate-logo--package package-upgrade-visual__logo">
      <i aria-hidden="true" class="logo logo--national corporate-logo__icon" role="img" title="National"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M32 16c8.837 0 16 7.163 16 16s-7.163 16-16 16-16-7.163-16-16 7.163-16 16-16zm0-2c-9.941 0-18 8.059-18 18s8.059 18 18 18 18-8.059 18-18-8.059-18-18-18z" fill="#00193c"/><path d="M32 24a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm0-2c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10a10 10 0 0 0-10-10z" fill="#00193c"/><path d="M8 0a8 8 0 0 0-8 8v56h56a8 8 0 0 0 8-8V0H8zm53 56a5 5 0 0 1-5 5H3V8a5 5 0 0 1 5-5h53v53z" fill="#89ba17"/></svg></i>
    </figure>
  </div>
  <input class="form-control" id="ex-form-help-text" type="text">
</div>

Input Help Text – Direct link – Raw 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-hidden="true" class="svg-icon pull-right" role="img" aria-discribedby="ex-form-help-text" 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"><svg><use xlink:href="#icon-question-sign"></use></svg></i><input class="form-control" id="ex-form-help-text" type="text">
</div>

File Input Fields – Direct link – Raw 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>

Form Group as Maximal Version – Direct link – Raw Link

This is the maximal stack of a form group.

Hint text
<div class="form-group">
  <label class="control-label" for="#ex-form-help-text">Label</label><small aria-describedby="ex-info-hints" class="control-hint">Hint text</small>
  <div class="package-upgrade-visual package-upgrade-visual--inline">
    <figure class="corporate-logo corporate-logo--package package-upgrade-visual__logo">
      <i aria-hidden="true" class="logo logo--free corporate-logo__icon" role="img" title="Free"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M8 0a8 8 0 0 0-8 8v56h56a8 8 0 0 0 8-8V0H8zm53 56a5 5 0 0 1-5 5H3V8a5 5 0 0 1 5-5h53v53z" fill="#89ba17"/></svg></i>
    </figure>
    <i aria-hidden="true" class="svg-icon package-upgrade-visual__arrow" role="img"><svg><use xlink:href="#icon-arrow-right"></use></svg></i>
    <figure class="corporate-logo corporate-logo--package package-upgrade-visual__logo">
      <i aria-hidden="true" class="logo logo--national corporate-logo__icon" role="img" title="National"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M32 16c8.837 0 16 7.163 16 16s-7.163 16-16 16-16-7.163-16-16 7.163-16 16-16zm0-2c-9.941 0-18 8.059-18 18s8.059 18 18 18 18-8.059 18-18-8.059-18-18-18z" fill="#00193c"/><path d="M32 24a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm0-2c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10a10 10 0 0 0-10-10z" fill="#00193c"/><path d="M8 0a8 8 0 0 0-8 8v56h56a8 8 0 0 0 8-8V0H8zm53 56a5 5 0 0 1-5 5H3V8a5 5 0 0 1 5-5h53v53z" fill="#89ba17"/></svg></i>
    </figure>
  </div>
  <i aria-hidden="true" class="svg-icon pull-right" role="img" 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"><svg><use xlink:href="#icon-question-sign"></use></svg></i><input class="form-control" id="ex-form-help-text" type="text">
</div>

Image Input Preview – Direct link – Raw 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 Forms – Direct link – Raw 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 Autocomplete – Direct link – Raw Link

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

<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 aria-label="Finden" class="btn btn-primary" type="submit"><i aria-hidden="true" class="svg-icon icon-md" role="img"><svg><use xlink:href="#icon-search"></use></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="Vee could do things yo…25"><span class="autocomplete-count pull-right">Where’s my goddamn mon…25</span><span class="autocomplete-label pull-left"><span class="searchsuggest-term autocomplete-term">Beaver? You mean vagina? — I mean, you know him? Orci ipsum, placerat id condimentum rutrum, rho…100</span></span></a>
  </li>
  <li class="ui-menu-item" id="ui-id-4" tabindex="-1">
    <a class="autocomplete-result clearfix ui-state-active" 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="He suspects that the c…25"><span class="autocomplete-label pull-left">Beaver? You mean vagina? — I mean, you know him? Orci ipsum, placerat id condimentum rutrum, rhoncus ac lorem aliquam pla…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 Selectbox – Direct link – Raw 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 forms – Direct link – Raw 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 Form – Direct link – Raw 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 Validation – Direct link – Raw 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>

Tables – Direct link

Alignments – Direct link – Raw 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>

Thumbnails – Direct link

Thumbnail Rectangle Base – Direct link – Raw 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 Variations – Direct link – Raw 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,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" />
                <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>

Thumbnail Gallery – Direct link – Raw Link

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

Ribbons – Direct link

Bookmark Ribbon – Direct link – Raw Link

We provide the states .is-active and .is-pending (for loading). The .ribbon 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">
      <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">
      <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">
      <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">
      <a href="#" class="ribbon-bookmark is-pending"></a>
      <div class="panel-body">
        <p>
          pending state
        </p>
      </div>
    </div>
  </div>
</div>

Flag Ribbon – Direct link – Raw Link

The ribbon adapts the font size. The .ribbon 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">
      <div class="ribbon-flag">
        Default
      </div>
      <div class="panel-body">
        This is some content
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="panel ribbon">
      <div class="ribbon-flag ribbon-flag--danger font-mini">
        Danger
      </div>
      <div class="panel-body">
        This is some content
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="panel">
      <div class="ribbon-flag ribbon-flag--warning">
        Warning
      </div>
      <div class="panel-body">
        This is some content
      </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">
        This is some content
      </div>
    </div>
  </div>
</div>

Helper – Direct link

Animation Helper - Intro fade in – Direct link – Raw 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>

Tooltip – Direct link – Raw Link

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

I see you rolled your way into the semis. Dios …50 Tooltip on top I see you rolled your way into the semis. Dios …50 Tooltip on right Where’s my goddamn money, you bum?! Dolor sit a…50 Tooltip on left You know, the usual. Bowl. Drive around. The oc…50 Tooltip on bottom



<p>
  <span>Lebowski ipsum goodnight, sweet prince. Dolor s…50</span> <a data-container="body" data-placement="top" data-toggle="tooltip" href="javascript:void();" title="Tooltip on top">Tooltip on top</a>
  <span>You know, the usual. Bowl. Drive around. The oc…50</span> <a data-container="body" data-placement="right" data-toggle="tooltip" href="javascript:void();" title="Tooltip on right">Tooltip on right</a>
  <span>Beaver? You mean vagina? — I mean, you know him…50</span> <a data-container="body" data-placement="left" data-toggle="tooltip" href="javascript:void();" title="Tooltip on left">Tooltip on left</a>
  <span>Lebowski ipsum goodnight, sweet prince. Dolor s…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 Static – Direct link – Raw 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.

Where’s my goddamn money, y…30

Lebowski ipsum goodnight, sweet prince. Dolor sit amet, consectetur adipiscing. If the …90

Where’s my goddamn money, y…30

Lebowski ipsum goodnight, sweet prince. Dolor sit amet, consectetur adipiscing. If the …90

Where’s my goddamn money, y…30

Lebowski ipsum goodnight, sweet prince. Dolor sit amet, consectetur adipiscing. If the …90

Where’s my goddamn money, y…30

Lebowski ipsum goodnight, sweet prince. Dolor sit amet, consectetur adipiscing. If the …90

<div class="clearfix">
  <div class="popover top">
    <div class="arrow"></div>
    <h3 class="popover-title">
      He suspects that the culpri…30
    </h3>
    <div class="popover-content">
      <p>
        Where’s my goddamn money, you bum?! Dolor sit amet, consectetur adipiscing elit praesen…90
      </p>
    </div>
  </div>
  <div class="popover right">
    <div class="arrow"></div>
    <h3 class="popover-title">
      He suspects that the culpri…30
    </h3>
    <div class="popover-content">
      <p>
        Where’s my goddamn money, you bum?! Dolor sit amet, consectetur adipiscing elit praesen…90
      </p>
    </div>
  </div>
  <div class="popover left">
    <div class="arrow"></div>
    <h3 class="popover-title">
      He suspects that the culpri…30
    </h3>
    <div class="popover-content">
      <p>
        Where’s my goddamn money, you bum?! Dolor sit amet, consectetur adipiscing elit praesen…90
      </p>
    </div>
  </div>
  <div class="popover bottom">
    <div class="arrow"></div>
    <h3 class="popover-title">
      He suspects that the culpri…30
    </h3>
    <div class="popover-content">
      <p>
        Where’s my goddamn money, you bum?! Dolor sit amet, consectetur adipiscing elit praesen…90
      </p>
    </div>
  </div>
</div>

Popover Demo – Direct link – Raw 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 behaviour – Direct link – Raw 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`.

Spinner – Direct link – Raw 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 link – Raw 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.

You know, the usual. Bowl. Drive around. The occasional acid flashback. Maecenas pulvinar nisl et nisl rhoncus at volutpat felis blandit. It’s a complicated case, Maude. Lotta ins. Lotta outs. And a lotta strands to keep in my head, man. In libero turpis, laoreet et molestie sed. They won’t hurt us, Donny. These men are cowards. Volutpat et erat nulla ut orci. Every time a rug is micturated upon in this fair city, I have to compensate. Quis neque consectetur tincidunt. Lebowski ipsum goodnight, sweet prince. Dolor sit amet, consectetur adipiscing. If the plan gets too complex something always goes wrong. If there’s one thing I learned in …650


<div id="doc-spinner-overlay-target" style="padding: 1rem">
  Where’s my goddamn money, you bum?! Dolor sit amet, consectetur adipiscing elit praesent ac magna justo pellentesque ac lectus. Your goons’ll be able to get it off him, mean he’s only fifteen and he’s flunking social studies. So if you’ll just write me a check for my ten per cent… of half a million… fifty grand. Quis elit blandit fringilla a ut turpis praesent felis ligula, malesuada suscipit malesuada non. Beaver? You mean vagina? — I mean, you know him? Orci ipsum, placerat id condimentum rutrum, rhoncus ac lorem aliquam placerat posuere. A way out west there was a fella, fella I want to tell you about, fella by the name of Jeff Lebowsk…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 Helper – Direct link – Raw 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 Helper – Direct 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 Visibility – Direct link – Raw 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.js – Direct 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.js – Direct 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.

Header – Direct 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 Version – Direct link – Raw 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 Version – Direct link – Raw 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 aria-hidden="true" class="svg-icon" role="img"><svg><use xlink:href="#icon-caret"></use></svg></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> <i aria-hidden="true" class="svg-icon" role="img"><svg><use xlink:href="#icon-caret"></use></svg></i></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 aria-label="Search in:" class="btn btn-primary color-on-checked" type="submit"><i aria-hidden="true" class="svg-icon icon-md" role="img"><svg><use xlink:href="#icon-search"></use></svg></i></button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</header>

Content – Direct link

Content Head Element – Direct link – Raw 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.

Lebowski ipsum goodnight, sweet prince. Dolor sit amet, consectetur adipiscing. If the plan gets too complex something always goes wrong. If there…150

Lebowski ipsum goodnight, sweet prince. Dolor sit amet, consectetur adipiscing. If the plan gets too complex something always goes wrong. If there…150

<div class="content-head">
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <p>
          Where’s my goddamn money, you bum?! Dolor sit amet, consectetur adipiscing elit praesent ac magna justo pellentesque ac lectus. Your goons’ll be a…150
        </p>
      </div>
      <div class="col-sm-6">
        <p>
          Lebowski ipsum goodnight, sweet prince. Dolor sit amet, consectetur adipiscing. If the plan gets too complex something always goes wrong. If there…150
        </p>
      </div>
    </div>
  </div>
</div>

Sub-navbar – Direct link – Raw 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>

Sections – Direct link

Section Head – Direct link – Raw 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><use xlink:href="#icon-search"></use></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><use xlink:href="#icon-search"></use></svg></i> Filter</button>
    </div>
  </div>
</div>

Product stage – Direct link – Raw 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>

Cards – Direct link

Company Card Minimal Version – Direct link – Raw Link

Wer liefert was? GmbH

<div class="panel panel--narrow">
  <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 "></i>
              </li>
              <li>
                <i class="icon icon-md icon-primary icon-distributor "></i>
              </li>
              <li>
                <i class="icon icon-md icon-primary icon-wholesaler "></i>
              </li>
            </ul>
          </li>
        </ul>
        <ul class="list-inline-splitted card-company-info-line hidden-md hidden-lg">
          <li class="text-muted">
            <small>Hersteller</small>
          </li>
          <li class="text-muted">
            <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>
        <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 Version – Direct link – Raw Link

NEU

Wer liefert was? GmbH

<div class="panel panel--narrow 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 "></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 class="text-muted">
            <small>Hersteller</small>
          </li>
          <li>
            <small>Dienstleister</small>
          </li>
          <li class="text-muted">
            <small>Händler</small>
          </li>
          <li class="text-muted">
            <small>Großhändler</small>
          </li>
        </ul>
        <div class="clearfix"></div>
        <p class="text-muted card-company-description hidden-xs">
          You know, the usual. Bowl. Drive around. The occasional acid flashback. Maecenas pulvinar nisl et nisl rhoncus at volutpat felis blandit. It’s a complicated case, Maude. Lotta ins. Lotta outs. And a lotta strands to keep in my head, man. In libero turpis, laoreet et molestie sed. They won’t hurt…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 Card – Direct link – Raw 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--narrow 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">
            Beaver? You mean vagina? — I mean, you know him? Orci ips…60
          </h5>
          ca. € 1.999,99 netto
          <div class="card-product-more">
            <p>
              pro Palette
            </p>
            <p class="text-muted">
              Vee could do things you only dreamed of, Lebowski. Mi sapien, ut ultricies ipsum morbi eget risus nulla nullam vel nisi enim, vel. That fucking bitch! Auctor ante morbi id urna vel felis lacinia p…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>You know, the usual. Bowl. Drive around. The occasional a…60</strong>
          </div>
          <div class="text-truncate">
            You know, the usual. Bowl. Drive around. The occasional a…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--narrow 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">
            Beaver? You mean vagina? — …30
          </h5>
          ca. € 1.999,99 netto
          <div class="card-product-more">
            <p>
              pro Palette
            </p>
            <p class="text-muted">
              Where’s my goddamn money, you bum?! Dolor sit amet, consectetur adipiscing elit praesent ac magna justo pellentesque ac lectus. Your goons’ll be able to get it off him, mean he’s only fifteen and …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--narrow 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">
            I see you rolled your way i…30
          </h5>
          ca. € 1.999,99 netto
          <div class="card-product-more">
            <p>
              pro Palette
            </p>
            <p class="text-muted">
              You know, the usual. Bowl. Drive around. The occasional acid flashback. Maecenas pulvinar nisl et nisl rhoncus at volutpat felis blandit. It’s a complicated case, Maude. Lotta ins. Lotta outs. And…200
            </p>
            <div class="text-center">
              <button class="btn btn-primary">Mehr Details</button>
            </div>
          </div>
        </div></a>
  </div>
</div>

Sponsored Product Card Teaser – Direct link – Raw 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>

Visuals – Direct link

Visuals are element compositions that behave like images but consist of markup to provide a better flexibility.

For instance, they contain translatable texts or changeable portions.

Service Package Upgrade – Direct link – Raw Link

By default the upgrade visual includes the service package product names.

Rails Helper wlw_service_package_upgrade_visual

<div class="package-upgrade-visual font-h3">
  <figure class="corporate-logo corporate-logo--package package-upgrade-visual__logo">
    <i aria-hidden="true" class="logo logo--free corporate-logo__icon" role="img"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M8 0a8 8 0 0 0-8 8v56h56a8 8 0 0 0 8-8V0H8zm53 56a5 5 0 0 1-5 5H3V8a5 5 0 0 1 5-5h53v53z" fill="#89ba17"/></svg></i><figcaption class="corporate-logo__text">Free</figcaption>
  </figure>
  <i aria-hidden="true" class="svg-icon package-upgrade-visual__arrow" role="img"><svg><use xlink:href="#icon-arrow-right"></use></svg></i>
  <figure class="corporate-logo corporate-logo--package package-upgrade-visual__logo">
    <i aria-hidden="true" class="logo logo--national corporate-logo__icon" role="img"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M32 16c8.837 0 16 7.163 16 16s-7.163 16-16 16-16-7.163-16-16 7.163-16 16-16zm0-2c-9.941 0-18 8.059-18 18s8.059 18 18 18 18-8.059 18-18-8.059-18-18-18z" fill="#00193c"/><path d="M32 24a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm0-2c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10a10 10 0 0 0-10-10z" fill="#00193c"/><path d="M8 0a8 8 0 0 0-8 8v56h56a8 8 0 0 0 8-8V0H8zm53 56a5 5 0 0 1-5 5H3V8a5 5 0 0 1 5-5h53v53z" fill="#89ba17"/></svg></i><figcaption class="corporate-logo__text">National</figcaption>
  </figure>
</div>

Service Package Upgrade Inline – Direct link – Raw Link

For smaller usages, the service package product names could also be visually omitted. In this case it is recommended to use the title attribute for the package names.

Rails Helper wlw_service_package_upgrade_inline_visual

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

<div class="h1">Heading 1
<div class="package-upgrade-visual package-upgrade-visual--inline">
  <figure class="corporate-logo corporate-logo--package package-upgrade-visual__logo">
    <i aria-hidden="true" class="logo logo--free corporate-logo__icon" role="img" title="Free"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M8 0a8 8 0 0 0-8 8v56h56a8 8 0 0 0 8-8V0H8zm53 56a5 5 0 0 1-5 5H3V8a5 5 0 0 1 5-5h53v53z" fill="#89ba17"/></svg></i>
  </figure>
  <i aria-hidden="true" class="svg-icon package-upgrade-visual__arrow" role="img"><svg><use xlink:href="#icon-arrow-right"></use></svg></i>
  <figure class="corporate-logo corporate-logo--package package-upgrade-visual__logo">
    <i aria-hidden="true" class="logo logo--national corporate-logo__icon" role="img" title="National"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M32 16c8.837 0 16 7.163 16 16s-7.163 16-16 16-16-7.163-16-16 7.163-16 16-16zm0-2c-9.941 0-18 8.059-18 18s8.059 18 18 18 18-8.059 18-18-8.059-18-18-18z" fill="#00193c"/><path d="M32 24a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm0-2c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10a10 10 0 0 0-10-10z" fill="#00193c"/><path d="M8 0a8 8 0 0 0-8 8v56h56a8 8 0 0 0 8-8V0H8zm53 56a5 5 0 0 1-5 5H3V8a5 5 0 0 1 5-5h53v53z" fill="#89ba17"/></svg></i>
  </figure>
</div></div>
<div class="h2">Heading 2
<div class="package-upgrade-visual package-upgrade-visual--inline">
  <figure class="corporate-logo corporate-logo--package package-upgrade-visual__logo">
    <i aria-hidden="true" class="logo logo--free corporate-logo__icon" role="img" title="Free"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M8 0a8 8 0 0 0-8 8v56h56a8 8 0 0 0 8-8V0H8zm53 56a5 5 0 0 1-5 5H3V8a5 5 0 0 1 5-5h53v53z" fill="#89ba17"/></svg></i>
  </figure>
  <i aria-hidden="true" class="svg-icon package-upgrade-visual__arrow" role="img"><svg><use xlink:href="#icon-arrow-right"></use></svg></i>
  <figure class="corporate-logo corporate-logo--package package-upgrade-visual__logo">
    <i aria-hidden="true" class="logo logo--national corporate-logo__icon" role="img" title="National"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M32 16c8.837 0 16 7.163 16 16s-7.163 16-16 16-16-7.163-16-16 7.163-16 16-16zm0-2c-9.941 0-18 8.059-18 18s8.059 18 18 18 18-8.059 18-18-8.059-18-18-18z" fill="#00193c"/><path d="M32 24a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm0-2c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10a10 10 0 0 0-10-10z" fill="#00193c"/><path d="M8 0a8 8 0 0 0-8 8v56h56a8 8 0 0 0 8-8V0H8zm53 56a5 5 0 0 1-5 5H3V8a5 5 0 0 1 5-5h53v53z" fill="#89ba17"/></svg></i>
  </figure>
</div></div>
<div class="h3">Heading 3
<div class="package-upgrade-visual package-upgrade-visual--inline">
  <figure class="corporate-logo corporate-logo--package package-upgrade-visual__logo">
    <i aria-hidden="true" class="logo logo--free corporate-logo__icon" role="img" title="Free"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M8 0a8 8 0 0 0-8 8v56h56a8 8 0 0 0 8-8V0H8zm53 56a5 5 0 0 1-5 5H3V8a5 5 0 0 1 5-5h53v53z" fill="#89ba17"/></svg></i>
  </figure>
  <i aria-hidden="true" class="svg-icon package-upgrade-visual__arrow" role="img"><svg><use xlink:href="#icon-arrow-right"></use></svg></i>
  <figure class="corporate-logo corporate-logo--package package-upgrade-visual__logo">
    <i aria-hidden="true" class="logo logo--national corporate-logo__icon" role="img" title="National"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M32 16c8.837 0 16 7.163 16 16s-7.163 16-16 16-16-7.163-16-16 7.163-16 16-16zm0-2c-9.941 0-18 8.059-18 18s8.059 18 18 18 18-8.059 18-18-8.059-18-18-18z" fill="#00193c"/><path d="M32 24a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm0-2c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10a10 10 0 0 0-10-10z" fill="#00193c"/><path d="M8 0a8 8 0 0 0-8 8v56h56a8 8 0 0 0 8-8V0H8zm53 56a5 5 0 0 1-5 5H3V8a5 5 0 0 1 5-5h53v53z" fill="#89ba17"/></svg></i>
  </figure>
</div></div>
<div class="h4">Heading 4
<div class="package-upgrade-visual package-upgrade-visual--inline">
  <figure class="corporate-logo corporate-logo--package package-upgrade-visual__logo">
    <i aria-hidden="true" class="logo logo--free corporate-logo__icon" role="img" title="Free"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M8 0a8 8 0 0 0-8 8v56h56a8 8 0 0 0 8-8V0H8zm53 56a5 5 0 0 1-5 5H3V8a5 5 0 0 1 5-5h53v53z" fill="#89ba17"/></svg></i>
  </figure>
  <i aria-hidden="true" class="svg-icon package-upgrade-visual__arrow" role="img"><svg><use xlink:href="#icon-arrow-right"></use></svg></i>
  <figure class="corporate-logo corporate-logo--package package-upgrade-visual__logo">
    <i aria-hidden="true" class="logo logo--national corporate-logo__icon" role="img" title="National"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M32 16c8.837 0 16 7.163 16 16s-7.163 16-16 16-16-7.163-16-16 7.163-16 16-16zm0-2c-9.941 0-18 8.059-18 18s8.059 18 18 18 18-8.059 18-18-8.059-18-18-18z" fill="#00193c"/><path d="M32 24a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm0-2c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10a10 10 0 0 0-10-10z" fill="#00193c"/><path d="M8 0a8 8 0 0 0-8 8v56h56a8 8 0 0 0 8-8V0H8zm53 56a5 5 0 0 1-5 5H3V8a5 5 0 0 1 5-5h53v53z" fill="#89ba17"/></svg></i>
  </figure>
</div></div>
<div class="h5">Heading 5
<div class="package-upgrade-visual package-upgrade-visual--inline">
  <figure class="corporate-logo corporate-logo--package package-upgrade-visual__logo">
    <i aria-hidden="true" class="logo logo--free corporate-logo__icon" role="img" title="Free"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M8 0a8 8 0 0 0-8 8v56h56a8 8 0 0 0 8-8V0H8zm53 56a5 5 0 0 1-5 5H3V8a5 5 0 0 1 5-5h53v53z" fill="#89ba17"/></svg></i>
  </figure>
  <i aria-hidden="true" class="svg-icon package-upgrade-visual__arrow" role="img"><svg><use xlink:href="#icon-arrow-right"></use></svg></i>
  <figure class="corporate-logo corporate-logo--package package-upgrade-visual__logo">
    <i aria-hidden="true" class="logo logo--national corporate-logo__icon" role="img" title="National"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M32 16c8.837 0 16 7.163 16 16s-7.163 16-16 16-16-7.163-16-16 7.163-16 16-16zm0-2c-9.941 0-18 8.059-18 18s8.059 18 18 18 18-8.059 18-18-8.059-18-18-18z" fill="#00193c"/><path d="M32 24a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm0-2c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10a10 10 0 0 0-10-10z" fill="#00193c"/><path d="M8 0a8 8 0 0 0-8 8v56h56a8 8 0 0 0 8-8V0H8zm53 56a5 5 0 0 1-5 5H3V8a5 5 0 0 1 5-5h53v53z" fill="#89ba17"/></svg></i>
  </figure>
</div></div>
<div class="h6">Heading 6
<div class="package-upgrade-visual package-upgrade-visual--inline">
  <figure class="corporate-logo corporate-logo--package package-upgrade-visual__logo">
    <i aria-hidden="true" class="logo logo--free corporate-logo__icon" role="img" title="Free"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M8 0a8 8 0 0 0-8 8v56h56a8 8 0 0 0 8-8V0H8zm53 56a5 5 0 0 1-5 5H3V8a5 5 0 0 1 5-5h53v53z" fill="#89ba17"/></svg></i>
  </figure>
  <i aria-hidden="true" class="svg-icon package-upgrade-visual__arrow" role="img"><svg><use xlink:href="#icon-arrow-right"></use></svg></i>
  <figure class="corporate-logo corporate-logo--package package-upgrade-visual__logo">
    <i aria-hidden="true" class="logo logo--national corporate-logo__icon" role="img" title="National"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M32 16c8.837 0 16 7.163 16 16s-7.163 16-16 16-16-7.163-16-16 7.163-16 16-16zm0-2c-9.941 0-18 8.059-18 18s8.059 18 18 18 18-8.059 18-18-8.059-18-18-18z" fill="#00193c"/><path d="M32 24a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm0-2c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10a10 10 0 0 0-10-10z" fill="#00193c"/><path d="M8 0a8 8 0 0 0-8 8v56h56a8 8 0 0 0 8-8V0H8zm53 56a5 5 0 0 1-5 5H3V8a5 5 0 0 1 5-5h53v53z" fill="#89ba17"/></svg></i>
  </figure>
</div></div>

Teasers – Direct link

A teaser is an advertising element which is typically used for a product launch or otherwise important event.

Corporate Products Teaser – Direct link – Raw Link

This container is used to promote and upsell inhouse products like the wlw corporate products (Local, National, etc.)

Content Handling

The component handles the height by the actual content. There’s no size limitation in any way.

Rails Helper wlw_service_package_teaser

Ribbon flag
Media object

The component handles less content as well as more text content

Call to Action
<div class="corporate-teaser">
  <div class="ribbon-flag ribbon-flag--info corporate-teaser__ribbon">
    Ribbon flag
  </div>
  <div class="corporate-teaser__inner">
    <div class="corporate-teaser__column">
      <div class="corporate-teaser__media">
        Media object
      </div>
    </div>
    <div class="corporate-teaser__column">
      <div class="corporate-teaser__body">
        <p>
          The component handles less content as well as more text content
        </p>
        <div class="btn btn-default">
          Call to Action
        </div>
      </div>
    </div>
  </div>
</div>

Service Package Upgrade Teaser – Direct link – Raw Link

The Service Package Upgrade Variant of the Corporate Products Teaser

Bestseller
Optional Headline to Promote the Product
  • feature and benefits of this product
  • buy first, think later
  • still not convinced, it’s just the best thing on earth
  • you should buy it
Call to Action
<div class="corporate-teaser corporate-teaser--upgrade">
  <div class="ribbon-flag ribbon-flag--info corporate-teaser__ribbon">
    Bestseller
  </div>
  <div class="corporate-teaser__inner">
    <div class="corporate-teaser__column">
      <div class="corporate-teaser__media">
        <div class="package-upgrade-visual corporate-teaser__upgrade-visual">
          <figure class="corporate-logo corporate-logo--package package-upgrade-visual__logo">
            <i aria-hidden="true" class="logo logo--free corporate-logo__icon" role="img"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M8 0a8 8 0 0 0-8 8v56h56a8 8 0 0 0 8-8V0H8zm53 56a5 5 0 0 1-5 5H3V8a5 5 0 0 1 5-5h53v53z" fill="#89ba17"/></svg></i><figcaption class="corporate-logo__text">Free</figcaption>
          </figure>
          <i aria-hidden="true" class="svg-icon package-upgrade-visual__arrow" role="img"><svg><use xlink:href="#icon-arrow-right"></use></svg></i>
          <figure class="corporate-logo corporate-logo--package package-upgrade-visual__logo">
            <i aria-hidden="true" class="logo logo--national corporate-logo__icon" role="img"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M32 16c8.837 0 16 7.163 16 16s-7.163 16-16 16-16-7.163-16-16 7.163-16 16-16zm0-2c-9.941 0-18 8.059-18 18s8.059 18 18 18 18-8.059 18-18-8.059-18-18-18z" fill="#00193c"/><path d="M32 24a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm0-2c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10a10 10 0 0 0-10-10z" fill="#00193c"/><path d="M8 0a8 8 0 0 0-8 8v56h56a8 8 0 0 0 8-8V0H8zm53 56a5 5 0 0 1-5 5H3V8a5 5 0 0 1 5-5h53v53z" fill="#89ba17"/></svg></i><figcaption class="corporate-logo__text">National</figcaption>
          </figure>
        </div>
      </div>
    </div>
    <div class="corporate-teaser__column">
      <div class="corporate-teaser__body">
        <div class="h1 corporate-teaser__title">
          Optional Headline to Promote the Product
        </div>
        <ul>
          <li>
            feature and benefits of this product
          </li>
          <li>
            buy first, think later
          </li>
          <li>
            still not convinced, it’s just the best thing on earth
          </li>
          <li>
            you should buy it
          </li>
        </ul>
        <div class="btn btn-info">
          Call to Action
        </div>
        <div class="btn btn-link">
          Secondary Action
        </div>
      </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.

Dashboard – Direct link

Dashboard Panels – Direct link – Raw 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 Layout – Direct link

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

Configuration – Direct 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 .

Templates – Direct 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 helper – Direct 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_top – Direct 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 helper – Direct 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 bootstrap-sass/assets/javascripts/bootstrap/dropdown

//= require jquery-ui/ui/version
//= require jquery-ui/ui/core
//= require jquery-ui/ui/widget
//= require jquery-ui/ui/position
//= require jquery-ui/ui/widgets/menu
//= require jquery-ui/ui/widgets/autocomplete
//= require 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 helper – Direct 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 helper – Direct link

The BreadcrumbHelper is deprecated. Please use the wlw_markup gem.

render_breadcrumb(collection) Deprecated – Direct 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 Helper – Direct 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 helper – Direct 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

Logo helper – Direct link

logo_tag(name, options = {}) – Direct link

Renders SVG markup by given logo name.

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

Example

= logo_tag('wlw-europe')
<i aria-hidden="true" class="logo logo--wlw-europe" role="img">
  <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
    <path d="M...z" fill="..."/>
    ...
  </svg>
</i>

Params

Name Type Description
name String Name of an available logo
options Hash the common content_tag options

Icon helper – Direct link

icon_tag(name, size, 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_tag('heard')
<i aria-hidden="true" class="svg-icon" 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
size Symbol range: :xsmall to :xlarge
options Hash the common content_tag options

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, size, 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" role="img">
  <svg>
    <use xlink:href="#svg-icon-heard"></use>
  </svg>
</i>

Params

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

Translation helper – Direct 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

Service Package Helper – Direct link

wlw_service_package_upgrade_inline_visual([popover: false, html_options: {}]) – Direct link

Renders the visualization of a service package upgrade inline element. Note: In order to enable the popover with popover: true, you also have to require and initialize the JS component PopoverHoverToggle:

  // in application.js
  //= require wlw_styleguide/wlw/helper/popover_hover_toggle

  // in initialize.js
  var popoverHoverToggle = new wlw.helper.PopoverHoverToggle().init()

Supported Gem – Direct link

Render example for Simple form gem – Direct 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.