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

Colors

Color Shades & Variables

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

Typography

Font Families

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

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

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

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

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

Transform a text shape in a specific font-weight.

Class name Style definition
.font-weight-light I see you rolled your way into the semis. Dios mio, man. Seamus and me, we’re gonna fuck you up.…100
.font-weight-normal I see you rolled your way into the semis. Dios mio, man. Seamus and me, we’re gonna fuck you up.…100
.font-weight-bold I see you rolled your way into the semis. Dios mio, man. Seamus and me, we’re gonna fuck you up.…100

Contextual Colors

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 I see you rolled your way into the semis. Dios mio, man. Seamus and me, we’re gonna fuck you up.…100
.text-brand I see you rolled your way into the semis. Dios mio, man. Seamus and me, we’re gonna fuck you up.…100
.text-bright I see you rolled your way into the semis. Dios mio, man. Seamus and me, we’re gonna fuck you up.…100
.text-info I see you rolled your way into the semis. Dios mio, man. Seamus and me, we’re gonna fuck you up.…100
.text-muted I see you rolled your way into the semis. Dios mio, man. Seamus and me, we’re gonna fuck you up.…100
.text-primary I see you rolled your way into the semis. Dios mio, man. Seamus and me, we’re gonna fuck you up.…100

Text Alignments

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
This text should be centered in the mobile screen.
<div class="text-center-xs-down">
  This text should be centered in the mobile screen.
</div>

Text truncate

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

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

Checked List

  • 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 ro…211
  • 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 re…195
  • I see you rolled your way into the semis. Dios mio, ma…57
<ul class="list-check">
  <li>
    I see you rolled your way into t…35
  </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 elem…173
  </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 …205
  </li>
</ul>

List Size

For larger lists use .list-md.

  • I see you rolled your way in…31
  • 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 t…206
  • I see you rolled your way into the semis. Dios mio, man. Seamus and me, we’re gonna fu…89
<ul class="list-check list-md">
  <li>
    I see you rolled your way into the semis. Dios mio, man. Seamus and me, w…76
  </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 fa…145
  </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 eleifen…242
  </li>
</ul>

Icons Inline List

<ul class="list-inline list-inline-slim">
  <li>
    <i aria-hidden="true" class="svg-icon icon-md" role="img"><svg height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#icon-manufacturer"></use></svg></i>
  </li>
  <li>
    <i aria-hidden="true" class="svg-icon icon-md" role="img"><svg height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#icon-service-provider"></use></svg></i>
  </li>
  <li>
    <i aria-hidden="true" class="svg-icon icon-md" role="img"><svg height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#icon-distributor"></use></svg></i>
  </li>
  <li>
    <i aria-hidden="true" class="svg-icon icon-md" role="img"><svg height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#icon-wholesaler"></use></svg></i>
  </li>
</ul>

Splitted Inline List

  • I see y…9
  • I see y…9
  • I see y…9
  • I see y…9
  • I see y…9
  • I see y…9
<div class="row">
  <div class="col-sm-6">
    <ul class="list-inline-splitted">
      <li>
        I see y…9
      </li>
      <li>
        I see y…9
      </li>
      <li>
        I see y…9
      </li>
    </ul>
  </div>
  <div class="col-sm-6">
    <ul class="list-inline-splitted pull-right">
      <li>
        I see y…9
      </li>
      <li>
        I see y…9
      </li>
      <li>
        I see y…9
      </li>
    </ul>
  </div>
</div>

List group

  • 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

<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()">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 …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

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

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

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

Rails helper: WlwMarkup::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-border
  • AbcEfg
    bookmark
  • AbcEfg
    bulb
  • AbcEfg
    caret
  • AbcEfg
    chevron-left
  • AbcEfg
    chevron-right
  • AbcEfg
    clock
  • AbcEfg
    download
  • AbcEfg
    earphone-alt
  • AbcEfg
    earphone
  • AbcEfg
    email-alt
  • AbcEfg
    email
  • AbcEfg
    employees
  • AbcEfg
    envelope
  • AbcEfg
    eye
  • AbcEfg
    filter
  • AbcEfg
    gauge
  • AbcEfg
    home
  • AbcEfg
    info
  • AbcEfg
    link
  • AbcEfg
    map-marker-alt
  • AbcEfg
    map-marker
  • AbcEfg
    menu
  • AbcEfg
    ok-sign
  • AbcEfg
    ok
  • 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

Social Icons

  • AbcEfg
    facebook
  • AbcEfg
    googleplus
  • AbcEfg
    linkedin
  • AbcEfg
    twitter
  • AbcEfg
    xing
  • AbcEfg
    youtube

Range Icons

Represents the distribution ranges of a supplier.

  • AbcEfg
    regional
  • AbcEfg
    national
  • AbcEfg
    europe
  • AbcEfg
    international
  • AbcEfg
    local
Supplier Type Icons

Represents the type of a supplier.

  • AbcEfg
    manufacturer
  • AbcEfg
    distributor
  • AbcEfg
    service-provider
  • AbcEfg
    wholesaler

Sizing

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

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

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

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


Colors

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

Logos

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

Rails helper: WlwMarkup::LogoHelper

Corporate Logos

Service Packages
Default version
  • Free.92275573free
  • Regional.ee377a04regional
  • National.3a42346anational
  • National premium.874fe530national-premium
  • Europe.42f6c283europe
  • Europe premium.734f615aeurope-premium
  • International.af18345cinternational
  • International premium.a9ada695international-premium
Reversed version
  • Free reversed.92275573free-reversed
  • Regional reversed.17e97db0regional-reversed
  • National reversed.69c68ae4national-reversed
  • National premium reversed.eba0cdd5national-premium-reversed
  • Europe reversed.a67d6c07europe-reversed
  • Europe premium reversed.6c1112aaeurope-premium-reversed
  • International reversed.696ca46einternational-reversed
  • International premium reversed.f5641c94international-premium-reversed

Marketplace Services
Default version
  • Product upload service.46371e1cproduct-upload-service
  • Product data feed.b6aa77ceproduct-data-feed
  • Sponsored products.8c5a943esponsored-products
Reversed version
  • Product upload service reversed.fae02897product-upload-service-reversed
  • Product data feed reversed.4c01ca88product-data-feed-reversed
  • Sponsored products reversed.ebed724fsponsored-products-reversed

Online Marketing Services
Default version
  • Active hosting.59d96740active-hosting
  • Ad words.c548e031ad-words
  • Homepage.ceb54d48homepage
  • Retargeting.dfda9ab2retargeting
  • Top ranking.e858e97btop-ranking
  • Web analytics.b123ca03web-analytics
  • Wlw dach.afed7382wlw-dach
  • Wlw europe.0725e894wlw-europe
  • Wlw seo.bcaf1d58wlw-seo
Reversed version
  • Active hosting reversed.b519e873active-hosting-reversed
  • Ad words reversed.79f49d90ad-words-reversed
  • Homepage reversed.574731c7homepage-reversed
  • Retargeting reversed.0d430a96retargeting-reversed
  • Top ranking reversed.8175f9c1top-ranking-reversed
  • Web analytics reversed.4cd144b0web-analytics-reversed
  • Wlw dach reversed.ad2ce27dwlw-dach-reversed
  • Wlw europe reversed.cbed5ecewlw-europe-reversed
  • Wlw seo reversed.1ff3ae80wlw-seo-reversed

Icons with web font deprecated – since 6.19.0

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-border
  • icon-bookmark
  • icon-bulb
  • icon-caret
  • icon-chevron-left
  • icon-chevron-right
  • icon-clock
  • icon-download
  • icon-earphone-alt
  • icon-earphone
  • icon-email-alt
  • icon-email
  • icon-employees
  • icon-envelope
  • icon-eye
  • icon-filter
  • icon-gauge
  • icon-home
  • icon-info
  • icon-link
  • icon-map-marker-alt
  • icon-map-marker
  • icon-menu
  • icon-ok-sign
  • icon-ok
  • 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
  • icon-local
Supplier Type Icons
  • icon-manufacturer
  • icon-distributor
  • icon-service-provider
  • icon-wholesaler

Shapes

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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#icon-company-profile"></use></svg></i>
  </div>
</div>

Images

Image placeholder

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

Name Media Ratio Size recommendation
company_logo Company logo.967f45a9 4x3 144x108, 72x54
company_image Company image.762b98d6 1x1 500x500, 120x120, 80x80
product Product.dd8978dc 4x3 144x108, 72x54

Buttons

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

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

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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#icon-trash"></use></svg></i></button>
</div>

Buttons with icon and pipe

Buttons can handle icons as child separated with a pipe.

<button class="btn btn-default" type="button">Button</button> <button class="btn btn--piped btn-default" type="button"><i aria-hidden="true" class="svg-icon btn__icon" role="img"><svg height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#icon-earphone"></use></svg></i><span class="btn__label">default</span></button> <button class="btn btn--piped btn-primary" type="button"><i aria-hidden="true" class="svg-icon btn__icon" role="img"><svg height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#icon-earphone"></use></svg></i><span class="btn__label">primary</span></button> <button class="btn btn--piped btn-info" type="button"><i aria-hidden="true" class="svg-icon btn__icon" role="img"><svg height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#icon-earphone"></use></svg></i><span class="btn__label">info</span></button> <button class="btn btn--piped btn-info-outlined" type="button"><i aria-hidden="true" class="svg-icon btn__icon" role="img"><svg height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#icon-earphone"></use></svg></i><span class="btn__label">info-outlined</span></button> 

Buttons as bookmark variant

This variant is used for feature subscribe/unsubscribe use case which handles the active state differently to the common pattern.


<button class="btn btn--piped btn--bookmark btn-default" type="button"><i aria-hidden="true" class="svg-icon btn__icon" role="img"><svg height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#icon-bookmark-border"></use></svg></i><span class="btn__label">Subscribe</span></button> <br><button class="btn btn--piped btn--bookmark is-active btn-default" type="button"><i aria-hidden="true" class="svg-icon btn__icon" role="img"><svg height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#icon-bookmark"></use></svg></i><span class="btn__label btn__label-default">Subscribed</span><span class="btn__label btn__label-hover">Unsubscribe</span></button> 

Button Types and Icons

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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#icon-search"></use></svg></i></button> 

Button States

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

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

Labels and differents font sizes

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

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

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

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

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

There are 4 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-around This is used on all popovers
$box-shadow-hover Use this only for interaction elements like a clickable panel

Static content

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

Content with interaction

$box-shadow-hover
<div class="row">
  <div class="col-sm-7">
    <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 class="docs-shadow-square docs-shadow-around">
        <code>$box-shadow-around</code>
      </div>
    </div>
  </div>
  <div class="col-sm-5">
    <p>
      Content with interaction
    </p>
    <div class="docs-shadow-square docs-shadow-hover">
      <code>$box-shadow-hover</code>
    </div>
  </div>
</div>

Scaffolding helper

Main container

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

Logos Without Text

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

<figure class="corporate-logo">
  <img src="wlw_assets/images/logos/wlw-seo.bcaf1d58.svg" class="corporate-logo__icon" alt="Wlw seo.bcaf1d58" />
</figure>

Logos With Text

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">
  <img src="wlw_assets/images/logos/product-data-feed.b6aa77ce.svg" class="corporate-logo__icon" alt="Product data feed.b6aa77ce" /><figcaption class="corporate-logo__text">Product Data<br>Feed</figcaption>
</figure>

Service Package Logos

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">
  <img src="wlw_assets/images/logos/europe.42f6c283.svg" class="corporate-logo__icon" alt="Europe.42f6c283" /><figcaption class="corporate-logo__text">Europe</figcaption>
</figure>
<figure class="corporate-logo corporate-logo--package">
  <img src="wlw_assets/images/logos/europe-premium.734f615a.svg" class="corporate-logo__icon" alt="Europe premium.734f615a" /><figcaption class="corporate-logo__text">Europe&nbsp;<span class="corporate-logo__extension">Premium</span></figcaption>
</figure>

Inline Logos

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"><img src="wlw_assets/images/logos/retargeting.dfda9ab2.svg" class="corporate-logo__icon" alt="Retargeting.dfda9ab2" /></span>Retargeting boosts your traffic.
</p>

Wide Logos

The wide corporate logo variant provides the secondary text position.

<figure class="corporate-logo corporate-logo--wide corporate-logo--package">
  <img src="wlw_assets/images/logos/national.3a42346a.svg" class="corporate-logo__icon" alt="National.3a42346a" /><figcaption class="corporate-logo__text">National</figcaption>
</figure>
<figure class="corporate-logo corporate-logo--wide corporate-logo--package">
  <img src="wlw_assets/images/logos/europe-premium.734f615a.svg" class="corporate-logo__icon" alt="Europe premium.734f615a" /><figcaption class="corporate-logo__text">Europe&nbsp;<span class="corporate-logo__extension">Premium</span></figcaption>
</figure>
<figure class="corporate-logo corporate-logo--wide">
  <img src="wlw_assets/images/logos/product-data-feed.b6aa77ce.svg" class="corporate-logo__icon" alt="Product data feed.b6aa77ce" /><figcaption class="corporate-logo__text">Product Data<br>Feed</figcaption>
</figure>

Logo Sizes

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">
  <img src="wlw_assets/images/logos/sponsored-products.8c5a943e.svg" class="corporate-logo__icon" alt="Sponsored products.8c5a943e" />
</figure>
<br><strong>Size: medium</strong><br>
<figure class="corporate-logo corporate-logo--medium" style="vertical-align: middle">
  <img src="wlw_assets/images/logos/sponsored-products.8c5a943e.svg" class="corporate-logo__icon" alt="Sponsored products.8c5a943e" />
</figure>
<br><strong>Size: large</strong><br>
<figure class="corporate-logo corporate-logo--large" style="vertical-align: middle">
  <img src="wlw_assets/images/logos/sponsored-products.8c5a943e.svg" class="corporate-logo__icon" alt="Sponsored products.8c5a943e" />
</figure>
<br>

Page Navigation Bar

This is a part of the global page header. It can be different equipped.

Logged Out Version

The number items, 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 elements
  • 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
<ul class="page-navbar fn-mobile-nav">
  <li class="page-navbar__item">
    <a class="page-navbar__action page-navbar__action--primary" href="javascript:void(0)">Register your company for free</a>
  </li>
  <li class="page-navbar__item">
    <a class="page-navbar__action" href="javascript:void(0)">Buyer registration</a>
  </li>
  <li class="page-navbar__item page-navbar__item--desktop">
    <a aria-expanded="false" class="dropdown-toggle page-navbar__action" data-toggle="dropdown" href="#">English <i aria-hidden="true" class="svg-icon" role="img"><svg height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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="page-navbar__item">
    <a class="page-navbar__action" href="javascript:void(0)">Login</a>
  </li>
  <li class="page-navbar__item page-navbar__item--divider page-navbar__item--mobile" role="separator"></li>
  <li class="page-navbar__item page-navbar__item--mobile">
    <a class="page-navbar__action is-active">English</a>
  </li>
  <li class="page-navbar__item page-navbar__item--mobile">
    <a class="page-navbar__action">Deutsch</a>
  </li>
  <li class="page-navbar__item page-navbar__item--mobile">
    <a class="page-navbar__action">Français</a>
  </li>
</ul>

Logged In Version

The rules for the logged in version are:

  • the user name element is between language and logout items
  • the marketing links are not shown
<ul class="page-navbar fn-mobile-nav">
  <li class="page-navbar__item page-navbar__item--desktop">
    <a aria-expanded="false" class="dropdown-toggle page-navbar__action" data-toggle="dropdown" href="#">English <i aria-hidden="true" class="svg-icon" role="img"><svg height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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="page-navbar__item">
    <div class="page-navbar__action" 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="page-navbar__item">
    <a class="page-navbar__action" href="javascript:void(0)">logout</a>
  </li>
  <li class="page-navbar__item page-navbar__item--divider page-navbar__item--mobile" role="separator"></li>
  <li class="page-navbar__item page-navbar__item--mobile">
    <a class="page-navbar__action is-active">English</a>
  </li>
  <li class="page-navbar__item page-navbar__item--mobile">
    <a class="page-navbar__action">Deutsch</a>
  </li>
  <li class="page-navbar__item page-navbar__item--mobile">
    <a class="page-navbar__action">Français</a>
  </li>
</ul>

Navigation

Breadcrumbs

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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#icon-home"></use></svg></i> Home</a>
  </li>
  <li>
    <a href="#">Library</a>
  </li>
  <li class="active">
    Data
  </li>
</ol>

Flat Tabs

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.

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

Traditional Tabs

Deutschland Tab content
Österreich Tab content
Schweiz Tab content
<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

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

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

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

Default progress bar

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

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

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

Accordions

Default accordion

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.

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 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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#icon-arrow-down"></use></svg></i>I see you rolled …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

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 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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#icon-arrow-down"></use></svg></i>I see you rolled …20
    </div>
  </a>
  <div class="accordion__body collapse" id="hollow-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>

Content Boxes

Default Content Box

A bordered content box.

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
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
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
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 class="content-box">
  <div class="row">
    <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 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">
      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 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

Panel variants

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

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

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

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

I see you rolled your way into the semis. Dios …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>
              I see you rolled your way into the semis. Dios …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>
              I see you rolled your way into the semis. Dios …50
            </p>
          </div>
        </div>
      </div>
    </a>
  </div>
</div>

Collapsible Panel

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

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

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

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">
      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 nul…140
    </p>
    <div class="btn btn-primary intro-ani-later">
      Jetzt informieren
    </div>
  </a>
</div>

Underlay Panel

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">
    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>
</a>

Overview Bar

Default overview bar

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

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
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 class="row overview-bar">
  <div class="col-xs-12 col-md-6 overview-bar__section">
    <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 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

Media Object Example

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

64x64

Media heading

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
64x64

Media heading

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
64x64

Nested media heading

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 facilis…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>
        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 facilis…150
      </div>
    </div>
  </div>
</div>

Media Object Spaces

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

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

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

Modal Skeleton

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

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">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 facilis…150</figcaption></figure>
      </div>
    </div>
  </div>
</div>

Modal Media Carousel

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

Modal Demo

<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

Intro

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

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

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

Text Input Fields

<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

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

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

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

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 width="64" height="64" 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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 width="64" height="64" 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

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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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

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

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 width="64" height="64" 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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 width="64" height="64" 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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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

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

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

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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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="I see you rolled your …25"><span class="autocomplete-count pull-right">I see you rolled your …25</span><span class="autocomplete-label pull-left"><span class="searchsuggest-term autocomplete-term">I see you rolled your way into the semis. Dios mio, man. Seamus and me, we’re gonna fuck you up.…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="I see you rolled your …25"><span class="autocomplete-label pull-left">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…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

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

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>

Tables

Alignments

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

Thumbnail Rectangle Base

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

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

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

Ribbons

Bookmark Ribbon

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

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

Animation Helper - Intro fade in

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

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 I see you rolled your way into the semis. Dios …50 Tooltip on left I see you rolled your way into the semis. Dios …50 Tooltip on bottom



<p>
  <span>I see you rolled your way into the semis. Dios …50</span> <a data-container="body" data-placement="top" data-toggle="tooltip" href="javascript:void();" title="Tooltip on top">Tooltip on top</a>
  <span>I see you rolled your way into the semis. Dios …50</span> <a data-container="body" data-placement="right" data-toggle="tooltip" href="javascript:void();" title="Tooltip on right">Tooltip on right</a>
  <span>I see you rolled your way into the semis. Dios …50</span> <a data-container="body" data-placement="left" data-toggle="tooltip" href="javascript:void();" title="Tooltip on left">Tooltip on left</a>
  <span>I see you rolled your way into the semis. Dios …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

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.

I see you rolled your way i…30

I see you rolled your way into the semis. Dios mio, man. Seamus and me, we’re gonna fuc…90

I see you rolled your way i…30

I see you rolled your way into the semis. Dios mio, man. Seamus and me, we’re gonna fuc…90

I see you rolled your way i…30

I see you rolled your way into the semis. Dios mio, man. Seamus and me, we’re gonna fuc…90

I see you rolled your way i…30

I see you rolled your way into the semis. Dios mio, man. Seamus and me, we’re gonna fuc…90

<div class="clearfix">
  <div class="popover top">
    <div class="arrow"></div>
    <h3 class="popover-title">
      I see you rolled your way i…30
    </h3>
    <div class="popover-content">
      <p>
        I see you rolled your way into the semis. Dios mio, man. Seamus and me, we’re gonna fuc…90
      </p>
    </div>
  </div>
  <div class="popover right">
    <div class="arrow"></div>
    <h3 class="popover-title">
      I see you rolled your way i…30
    </h3>
    <div class="popover-content">
      <p>
        I see you rolled your way into the semis. Dios mio, man. Seamus and me, we’re gonna fuc…90
      </p>
    </div>
  </div>
  <div class="popover left">
    <div class="arrow"></div>
    <h3 class="popover-title">
      I see you rolled your way i…30
    </h3>
    <div class="popover-content">
      <p>
        I see you rolled your way into the semis. Dios mio, man. Seamus and me, we’re gonna fuc…90
      </p>
    </div>
  </div>
  <div class="popover bottom">
    <div class="arrow"></div>
    <h3 class="popover-title">
      I see you rolled your way i…30
    </h3>
    <div class="popover-content">
      <p>
        I see you rolled your way into the semis. Dios mio, man. Seamus and me, we’re gonna fuc…90
      </p>
    </div>
  </div>
</div>

Popover Demo

<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

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

Tippy Demo

In the wlw_markup gem, there is a helper you can use to easily add a new popover which has some default configs, as shown in the markup here. The defaults can be overwritten.

  • tippy-delay: 100 (ms)
  • tippy-arrow: true
  • tippy-arrow-type: 'round'
  • tippy-interactive: true (means you can click inside a tippy e.g. for links)
  • tippy-placement: left
  • tippy-theme: 'wlw' (for custom style)
  • tippy-duration: 500
  • tippy-animation: 'shift-away'
  • tippy-interactiveDebounce: 200 (ms until the tippy hides again)
  • tippy-content: '' (content of the tippy, can be HTML)

Tippy documentation with more config fields

<button class="btn tippy" data-tippy-animation="shift-away" data-tippy-arrow="true" data-tippy-arrow-type="round" data-tippy-content="<div class='tippy__title'>Headline</div><div class='tippy__content'>Content</div>" data-tippy-delay="100" data-tippy-duration="500" data-tippy-interactive="true" data-tippy-interactivedebounce="200" data-tippy-placement="left" data-tippy-theme="wlw"><i aria-hidden="true" class="svg-icon" role="img"><svg height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#icon-question-sign"></use></svg></i></button>

Mail to protector (mail_to_unscrambler.js)

To stop people from harvesting customer email adresses they can be rendered in reverse (Read more).

For regular email addresses that should not be harvested:

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

For regular email addresses:

  <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

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)

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.

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. Lebowski ipsum goodnight, sweet prince. Dolor sit amet, consectetur adipiscing. If the plan gets too complex something always goes wrong. If t…650


<div id="doc-spinner-overlay-target" style="padding: 1rem">
  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. Lebowski ipsum goodnight, sweet prince. Dolor sit amet, consectetur adipiscing. If the plan gets too complex something always goes wrong. If t…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

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

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.

Print Helper

<h1>
  Print Helper
</h1>

Toggle Visibility

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

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

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.

Masthead

/ˈmɑːsthɛd/: the title of a newspaper or magazine at the head of the first or editorial page.

The page header skeleton is available for Rails app via wlw_markup gem.

Maximal Version

The header navigation elements are aligned to the right and transforms to toggleable menu behind a hamburger menu icon.

<header class="masthead">
  <div class="masthead__container">
    <nav class="masthead__navbar">
      <ul class="page-navbar fn-mobile-nav">
        <li class="page-navbar__item">
          <a class="page-navbar__action page-navbar__action--primary" href="javascript:void(0)">Register your company for free</a>
        </li>
        <li class="page-navbar__item">
          <a class="page-navbar__action" href="javascript:void(0)">Buyer registration</a>
        </li>
        <li class="page-navbar__item page-navbar__item--desktop">
          <a aria-expanded="false" class="dropdown-toggle page-navbar__action" data-toggle="dropdown" href="#">English <i aria-hidden="true" class="svg-icon" role="img"><svg height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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="page-navbar__item">
          <a class="page-navbar__action" href="javascript:void(0)">Login</a>
        </li>
        <li class="page-navbar__item page-navbar__item--divider page-navbar__item--mobile" role="separator"></li>
        <li class="page-navbar__item page-navbar__item--mobile">
          <a class="page-navbar__action is-active">English</a>
        </li>
        <li class="page-navbar__item page-navbar__item--mobile">
          <a class="page-navbar__action">Deutsch</a>
        </li>
        <li class="page-navbar__item page-navbar__item--mobile">
          <a class="page-navbar__action">Français</a>
        </li>
      </ul>
    </nav>
    <button class="masthead__toggle fn-mobile-nav-trigger" title="Toggle navigation" type="button"><i aria-hidden="true" class="svg-icon masthead__icon" role="img"><svg height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#icon-menu"></use></svg></i></button><a class="masthead__brand"><svg xmlns="http://www.w3.org/2000/svg" height="111" width="165" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 165 111"><defs><path id="a" d="M12.543 0h137.94c0 5.276.01 38.049.02 61.348h-35.31V96.77H.003V10.219C.812 4.303 6.428-.001 12.546-.001z"/><radialGradient id="c" cy="-3.119%" cx="18.634%" r="97.241%"><stop stop-color="#26435D" offset="0"/><stop stop-color="#26435D" stop-opacity="0" offset="1"/></radialGradient><path id="b" d="M0 10.219C.809 4.303 6.425 0 12.543 0h137.94c0 5.276.01 38.049.02 61.348h-35.31V96.77H.003V10.219z"/><radialGradient id="e" cy="100.14%" cx="23.394%" r="116.55%"><stop stop-color="#B9D36A" offset="0"/><stop stop-color="#9AC427" offset=".429"/><stop stop-color="#96C21F" offset=".781"/><stop stop-color="#94C11A" offset="1"/></radialGradient></defs><g transform="translate(0 .01)" fill="none" fill-rule="evenodd"><use xlink:href="#a" fill="#0D1C34"/><mask id="d" fill="#fff"><use xlink:href="#b"/></mask><use xlink:href="#b" fill="url(#c)"/><path transform="matrix(1 0 0 -1 0 86.096)" mask="url(#d)" d="M41.03 72.274h11.895v-3.462h-7.102v-3.286h5.563v-3.414h-5.563v-3.634h7.351v-3.462H41.03v17.258zm14.229 0h7.25c4.346 0 6.532-1.669 6.532-5.379 0-2.367-1.068-3.586-2.855-4.359v-.099l3.848-7.421h-5.015l-3.153 6.275h-1.765v-6.275h-4.842v17.258zm6.581-8.069c1.713 0 2.408.822 2.408 2.465 0 1.594-.72 2.318-2.457 2.318h-1.739v-4.783h1.788zM30.427 34.569h4.843v17.258h-4.843V34.569zm7.375 17.258h11.896v-3.462h-7.103v-3.286h5.563v-3.413h-5.563v-3.635h7.351v-3.462H37.802v17.258zm14.229 0h11.87v-3.462h-7.028v-3.908h5.489V41.07h-5.489v-6.501h-4.842v17.258zm13.609 0h11.893v-3.462h-7.102v-3.286h5.562v-3.413h-5.562v-3.635h7.351v-3.462H65.64v17.258zm14.104 0h7.248c4.346 0 6.531-1.669 6.531-5.378 0-2.367-1.067-3.586-2.854-4.359v-.099l3.848-7.422h-5.015l-3.157 6.276h-1.761v-6.276h-4.84v17.258zm6.579-8.068c1.713 0 2.408.822 2.408 2.465 0 1.594-.721 2.317-2.46 2.317h-1.736v-4.782h1.788zm12.959 4.606h-4.518v3.462h13.876v-3.462h-4.51V34.569h-4.848v13.796zM16.299 72.274h4.841l2.259-10.882h.101l2.756 10.882h3.875l2.73-10.882h.099l2.409 10.882h4.198l-4.123-17.258h-4.842L28.018 65.65h-.075l-2.681-10.634h-4.866l-4.097 17.258zm1.116-20.447h4.843V38.031h6.531v-3.462H17.415v17.258zm-1.116-20.446h4.841l2.259-10.883h.101l2.756 10.883h3.875l2.73-10.883h.099l2.409 10.883h4.198l-4.123-17.258h-4.842l-2.584 10.634h-.075l-2.681-10.634h-4.866l-4.097 17.258zm27.736 0h5.141l5.958-17.258h-4.915l-1.144 3.411h-5.66l-1.069-3.411h-4.345l6.034 17.258zm.324-10.733h3.749l-1.838 5.728h-.1l-1.811-5.728zm11.968-5.802v3.535c1.515-.548 3.104-.972 5.09-.972 1.937 0 2.682.574 2.682 1.62 0 .996-.447 1.321-2.11 1.643l-1.291.249c-2.733.524-4.42 1.743-4.42 5.355 0 3.263 2.035 5.405 6.407 5.405 2.73 0 4.096-.424 5.09-.896v-3.489c-1.193.424-2.683.822-4.645.822-1.538 0-2.334-.473-2.334-1.468 0-.921.498-1.27 2.012-1.57l1.291-.248c3.029-.574 4.718-1.793 4.718-5.304 0-3.687-2.358-5.705-6.828-5.705-2.408 0-4.42.375-5.662 1.023z" fill="#fff"/><path d="M.493 49.653V.2h39.651c5.385 0 9.759 3.708 9.759 9.055v30.416c0 4.892-3.663 9.274-8.412 9.982H.493z" fill="url(#e)" transform="matrix(1 0 0 -1 114.7 111)"/><path d="M141.013 70.312a13.362 13.362 0 0 1 6.728 4.604c-2.283-3.459-6.094-5.768-10.45-5.847-7.135-.128-13.038 5.754-13.17 13.121a13.533 13.533 0 0 0 2.343 7.885 13.61 13.61 0 0 0 0 0c2.295 3.377 6.057 5.624 10.351 5.701 7.131.129 13.038-5.757 13.169-13.12a13.554 13.554 0 0 0-2.243-7.74 13.362 13.362 0 0 0-6.728-4.604zm-3.81 3.696c4.422.081 7.94 3.91 7.855 8.556-.081 4.65-3.733 8.348-8.156 8.273-4.419-.083-7.939-3.915-7.858-8.558.088-4.644 3.733-8.348 8.159-8.271zm10.561 20.367a17.53 17.53 0 0 1-1.573 1.416l-.543-.564a15.749 15.749 0 0 0 3.42-3.451l6.34 6.807.009.014-6.279-5.848 6.279 5.848.119.284c0 1.642-1.251 3.112-3.001 3.24-.259.023-.416-.169-.416-.169l-5.928-6.161a17.53 17.53 0 0 0 1.573-1.416z" fill="#FAFAFA"/><path d="M137.448 96.393l-.227-.003c-4.437-.079-8.318-2.474-10.568-6.043 2.31 3.225 5.985 5.354 10.162 5.429l.23.002c7.027-.001 12.809-5.838 12.939-13.122.035-1.83-.294-3.58-.913-5.181a13.434 13.434 0 0 1 1.255 5.915c-.129 7.216-5.883 13.003-12.878 13.003zm-8.293-12.695a8.978 8.978 0 0 1-.111-1.419c.088-4.597 3.66-8.272 8.025-8.272l.134.001c3.332.062 6.147 2.252 7.298 5.315-1.19-2.431-3.377-4.205-6.074-4.544a7.477 7.477 0 0 0-.941-.059c-4.105 0-7.714 3.405-8.297 8.021-.041.325-.024.638-.034.957zm23.282 19.358c-.233 0-.372-.17-.372-.17l-6.417-6.699v-.957l.002-.002 6.469 6.725a.516.516 0 0 0 .416.17c1.467-.109 2.574-1.165 2.895-2.47l.051.16c0 1.644-1.251 3.113-3.002 3.241a.49.49 0 0 1-.042.002z" fill="#8FB22C"/></g></svg>
      </a>
    <div class="masthead__search">
      <form accept-charset="UTF-8" action="#" class="search-form" method="get">
        <b class="search-form-action">Search for:</b><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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#icon-search"></use></svg></i></button>
          </div>
        </div>
      </form>
    </div>
  </div>
</header>

Minimal Version

The minimal version of the header is mostly used when the user is logged in.

<header class="masthead">
  <div class="masthead__container">
    <nav class="masthead__navbar">
      <ul class="page-navbar fn-mobile-nav">
        <li class="page-navbar__item page-navbar__item--desktop">
          <a aria-expanded="false" class="dropdown-toggle page-navbar__action" data-toggle="dropdown" href="#">English <i aria-hidden="true" class="svg-icon" role="img"><svg height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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="page-navbar__item">
          <div class="page-navbar__action" 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="page-navbar__item">
          <a class="page-navbar__action" href="javascript:void(0)">logout</a>
        </li>
        <li class="page-navbar__item page-navbar__item--divider page-navbar__item--mobile" role="separator"></li>
        <li class="page-navbar__item page-navbar__item--mobile">
          <a class="page-navbar__action is-active">English</a>
        </li>
        <li class="page-navbar__item page-navbar__item--mobile">
          <a class="page-navbar__action">Deutsch</a>
        </li>
        <li class="page-navbar__item page-navbar__item--mobile">
          <a class="page-navbar__action">Français</a>
        </li>
      </ul>
    </nav>
    <button class="masthead__toggle fn-mobile-nav-trigger" title="Toggle navigation" type="button"><i aria-hidden="true" class="svg-icon masthead__icon" role="img"><svg height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#icon-menu"></use></svg></i></button><a class="masthead__brand"><svg xmlns="http://www.w3.org/2000/svg" height="111" width="165" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 165 111"><defs><path id="a" d="M12.543 0h137.94c0 5.276.01 38.049.02 61.348h-35.31V96.77H.003V10.219C.812 4.303 6.428-.001 12.546-.001z"/><radialGradient id="c" cy="-3.119%" cx="18.634%" r="97.241%"><stop stop-color="#26435D" offset="0"/><stop stop-color="#26435D" stop-opacity="0" offset="1"/></radialGradient><path id="b" d="M0 10.219C.809 4.303 6.425 0 12.543 0h137.94c0 5.276.01 38.049.02 61.348h-35.31V96.77H.003V10.219z"/><radialGradient id="e" cy="100.14%" cx="23.394%" r="116.55%"><stop stop-color="#B9D36A" offset="0"/><stop stop-color="#9AC427" offset=".429"/><stop stop-color="#96C21F" offset=".781"/><stop stop-color="#94C11A" offset="1"/></radialGradient></defs><g transform="translate(0 .01)" fill="none" fill-rule="evenodd"><use xlink:href="#a" fill="#0D1C34"/><mask id="d" fill="#fff"><use xlink:href="#b"/></mask><use xlink:href="#b" fill="url(#c)"/><path transform="matrix(1 0 0 -1 0 86.096)" mask="url(#d)" d="M41.03 72.274h11.895v-3.462h-7.102v-3.286h5.563v-3.414h-5.563v-3.634h7.351v-3.462H41.03v17.258zm14.229 0h7.25c4.346 0 6.532-1.669 6.532-5.379 0-2.367-1.068-3.586-2.855-4.359v-.099l3.848-7.421h-5.015l-3.153 6.275h-1.765v-6.275h-4.842v17.258zm6.581-8.069c1.713 0 2.408.822 2.408 2.465 0 1.594-.72 2.318-2.457 2.318h-1.739v-4.783h1.788zM30.427 34.569h4.843v17.258h-4.843V34.569zm7.375 17.258h11.896v-3.462h-7.103v-3.286h5.563v-3.413h-5.563v-3.635h7.351v-3.462H37.802v17.258zm14.229 0h11.87v-3.462h-7.028v-3.908h5.489V41.07h-5.489v-6.501h-4.842v17.258zm13.609 0h11.893v-3.462h-7.102v-3.286h5.562v-3.413h-5.562v-3.635h7.351v-3.462H65.64v17.258zm14.104 0h7.248c4.346 0 6.531-1.669 6.531-5.378 0-2.367-1.067-3.586-2.854-4.359v-.099l3.848-7.422h-5.015l-3.157 6.276h-1.761v-6.276h-4.84v17.258zm6.579-8.068c1.713 0 2.408.822 2.408 2.465 0 1.594-.721 2.317-2.46 2.317h-1.736v-4.782h1.788zm12.959 4.606h-4.518v3.462h13.876v-3.462h-4.51V34.569h-4.848v13.796zM16.299 72.274h4.841l2.259-10.882h.101l2.756 10.882h3.875l2.73-10.882h.099l2.409 10.882h4.198l-4.123-17.258h-4.842L28.018 65.65h-.075l-2.681-10.634h-4.866l-4.097 17.258zm1.116-20.447h4.843V38.031h6.531v-3.462H17.415v17.258zm-1.116-20.446h4.841l2.259-10.883h.101l2.756 10.883h3.875l2.73-10.883h.099l2.409 10.883h4.198l-4.123-17.258h-4.842l-2.584 10.634h-.075l-2.681-10.634h-4.866l-4.097 17.258zm27.736 0h5.141l5.958-17.258h-4.915l-1.144 3.411h-5.66l-1.069-3.411h-4.345l6.034 17.258zm.324-10.733h3.749l-1.838 5.728h-.1l-1.811-5.728zm11.968-5.802v3.535c1.515-.548 3.104-.972 5.09-.972 1.937 0 2.682.574 2.682 1.62 0 .996-.447 1.321-2.11 1.643l-1.291.249c-2.733.524-4.42 1.743-4.42 5.355 0 3.263 2.035 5.405 6.407 5.405 2.73 0 4.096-.424 5.09-.896v-3.489c-1.193.424-2.683.822-4.645.822-1.538 0-2.334-.473-2.334-1.468 0-.921.498-1.27 2.012-1.57l1.291-.248c3.029-.574 4.718-1.793 4.718-5.304 0-3.687-2.358-5.705-6.828-5.705-2.408 0-4.42.375-5.662 1.023z" fill="#fff"/><path d="M.493 49.653V.2h39.651c5.385 0 9.759 3.708 9.759 9.055v30.416c0 4.892-3.663 9.274-8.412 9.982H.493z" fill="url(#e)" transform="matrix(1 0 0 -1 114.7 111)"/><path d="M141.013 70.312a13.362 13.362 0 0 1 6.728 4.604c-2.283-3.459-6.094-5.768-10.45-5.847-7.135-.128-13.038 5.754-13.17 13.121a13.533 13.533 0 0 0 2.343 7.885 13.61 13.61 0 0 0 0 0c2.295 3.377 6.057 5.624 10.351 5.701 7.131.129 13.038-5.757 13.169-13.12a13.554 13.554 0 0 0-2.243-7.74 13.362 13.362 0 0 0-6.728-4.604zm-3.81 3.696c4.422.081 7.94 3.91 7.855 8.556-.081 4.65-3.733 8.348-8.156 8.273-4.419-.083-7.939-3.915-7.858-8.558.088-4.644 3.733-8.348 8.159-8.271zm10.561 20.367a17.53 17.53 0 0 1-1.573 1.416l-.543-.564a15.749 15.749 0 0 0 3.42-3.451l6.34 6.807.009.014-6.279-5.848 6.279 5.848.119.284c0 1.642-1.251 3.112-3.001 3.24-.259.023-.416-.169-.416-.169l-5.928-6.161a17.53 17.53 0 0 0 1.573-1.416z" fill="#FAFAFA"/><path d="M137.448 96.393l-.227-.003c-4.437-.079-8.318-2.474-10.568-6.043 2.31 3.225 5.985 5.354 10.162 5.429l.23.002c7.027-.001 12.809-5.838 12.939-13.122.035-1.83-.294-3.58-.913-5.181a13.434 13.434 0 0 1 1.255 5.915c-.129 7.216-5.883 13.003-12.878 13.003zm-8.293-12.695a8.978 8.978 0 0 1-.111-1.419c.088-4.597 3.66-8.272 8.025-8.272l.134.001c3.332.062 6.147 2.252 7.298 5.315-1.19-2.431-3.377-4.205-6.074-4.544a7.477 7.477 0 0 0-.941-.059c-4.105 0-7.714 3.405-8.297 8.021-.041.325-.024.638-.034.957zm23.282 19.358c-.233 0-.372-.17-.372-.17l-6.417-6.699v-.957l.002-.002 6.469 6.725a.516.516 0 0 0 .416.17c1.467-.109 2.574-1.165 2.895-2.47l.051.16c0 1.644-1.251 3.113-3.002 3.241a.49.49 0 0 1-.042.002z" fill="#8FB22C"/></g></svg>
      </a>
  </div>
</header>

Deprecated Header deprecated – since 10.2.0

This is necessary to provide since the all clients ported to v10.3.0.

Search for:
<header class="head">
  <nav class="navbar">
    <div class="container">
      <ul class="nav navbar-nav navbar-right">
        <li class="nav-item">
          <a class="nav-action link-inverse" href="javascript:void(0)">Register your company for free</a>
        </li>
        <li class="nav-item">
          <a class="nav-action" href="javascript:void(0)">Buyer registration</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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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="divider visible-xs" role="separator"></li>
        <li class="nav-item">
          <a class="nav-action" href="javascript:void(0)">Login</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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#icon-search"></use></svg></i></button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</header>

Content

Content Head Element deprecated – since 12.7.0

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.

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 facilis…150

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 facilis…150

<div class="content-head">
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <p>
          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 facilis…150
        </p>
      </div>
      <div class="col-sm-6">
        <p>
          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 facilis…150
        </p>
      </div>
    </div>
  </div>
</div>

Sections

Section Head

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.

When a text fragment is emphasised, use light font type for regular text and bold for the emphasised text parts (<strong>).

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

<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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#icon-search"></use></svg></i> Filter</button>
    </div>
  </div>
</div>

Section Head Mono

When no emphasis needed, use only the regular font type (modifier class: .section-head--mono).

Section head with monotone meaning

<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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#icon-search"></use></svg></i> Filter</button>
    </div>
  </div>
</div>

Section Head and Form Types

36 Suppliers for “A very long search term that runs over more than one line”

<div class="section-head row" role="sectionhead">
  <div class="section-head__heading col-lg-6">
    <h1 class="section-head__title">
      36 Suppliers for <strong>“A very long search term that runs over more than one line”</strong>
    </h1>
  </div>
  <div class="section-head__controls col-lg-6">
    <div class="form-horizontal">
      <div class="form-group section-head__form-group">
        <label class="control-label col-sm-9 col-md-10 col-lg-9 hidden-xs" for="docs-page">Sort by</label>
        <div class="col-sm-3 col-md-2 col-lg-3">
          <select aria-label="Sort by" class="form-control">
            <option>
              Option 1
            </option>
            <option>
              Option 2
            </option>
          </select>
        </div>
      </div>
    </div>
  </div>
</div>

Product stage

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

Company Card Minimal Version

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 "></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>
            <small>Dienstleister</small>
          </li>
          <li>
            <small>Händler</small>
          </li>
          <li>
            <small>Großhändler</small>
          </li>
        </ul>
        <div class="clearfix"></div>
        <div class="media card-company-media">
          <div class="media-body"></div>
          <div class="media-right media-bottom card-company-media-right">
            <a href="javascript:void()" class="btn btn-primary hidden-xs">Firmendetails ansehen</a>
            <div class="btn-group btn-group-justified visible-xs">
              <a href="javascript:void()" class="btn btn-primary">Firmendetails</a><a href="javascript:void()" class="btn btn-info">Website</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Company Card Maximal Version

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 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 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>
            <small>Großhändler</small>
          </li>
        </ul>
        <div class="clearfix"></div>
        <p class="text-muted card-company-description hidden-xs">
          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? …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

<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">
            I see you rolled your way into the semis. Dios mio, man. …60
          </h5>
          ca. € 1.999,99 netto
          <div class="card-product-more">
            <p>
              pro Palette
            </p>
            <p class="text-muted">
              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 …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>I see you rolled your way into the semis. Dios mio, man. …60</strong>
          </div>
          <div class="text-truncate">
            I see you rolled your way into the semis. Dios mio, man. …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">
            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">
              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 …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">
              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 …200
            </p>
            <div class="text-center">
              <button class="btn btn-primary">Mehr Details</button>
            </div>
          </div>
        </div></a>
  </div>
</div>

Sponsored Product Card Teaser

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

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

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

Rails Helper: WlwMarkup::ServicePackageHelper

<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 width="64" height="64" 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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 width="64" height="64" 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

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: WlwMarkup::ServicePackageHelper

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 width="64" height="64" 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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 width="64" height="64" 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 width="64" height="64" 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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 width="64" height="64" 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 width="64" height="64" 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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 width="64" height="64" 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 width="64" height="64" 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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 width="64" height="64" 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 width="64" height="64" 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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 width="64" height="64" 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 width="64" height="64" 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 height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/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 width="64" height="64" 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

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

Corporate Products Teaser

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: WlwMarkup::ServicePackageHelper

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

The Service Package Upgrade Variant of the Corporate Products Teaser

Teaser with comparative logo setup
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

Teaser with single logo
Headline

Content

Call to Action
<h5 class="doc-h5">
  Teaser with comparative logo setup
</h5>
<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">
            <img src="wlw_assets/images/logos/free.92275573.svg" class="logo logo--free corporate-logo__icon" alt="Free.92275573" /><figcaption class="corporate-logo__text">Free</figcaption>
          </figure>
          <i aria-hidden="true" class="svg-icon package-upgrade-visual__arrow" role="img"><svg height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#icon-arrow-right"></use></svg></i>
          <figure class="corporate-logo corporate-logo--package package-upgrade-visual__logo">
            <img src="wlw_assets/images/logos/national.3a42346a.svg" class="logo logo--national corporate-logo__icon" alt="National.3a42346a" /><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>
<hr>
<h5 class="doc-h5">
  Teaser with single logo
</h5>
<div class="corporate-teaser corporate-teaser--upgrade">
  <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--small">
            <img src="wlw_assets/images/logos/top-ranking.e858e97b.svg" class="corporate-logo__icon" alt="Top ranking.e858e97b" /><figcaption class="corporate-logo__text">Top Ranking</figcaption>
          </figure>
        </div>
      </div>
    </div>
    <div class="corporate-teaser__column">
      <div class="corporate-teaser__body">
        <div class="h1 corporate-teaser__title">
          Headline
        </div>
        <p>
          Content
        </p>
        <div class="btn">
          Call to Action
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

All provided JavaScript packages are served via the wlw assets CDN.

It is recommended to use the CDN to deliver content of the application to people more quickly and efficiently.

JavaScript Collections

Collections are a summaries of functionalities that serve for a specific purpose.

Available Collections

The following packages can be consumed via CDN:

Package name Description
wlw_bootstrap.js Includes all bootstrap plugins like
wlw_common.js Includes the basic setup for a wlw page. It includes also jQuery.
wlw_form.js Includes helpers for form validaions and other form related functionalities
wlw_helper.js Includes other useful helpers which only on some pages
wlw_search.js Includes all functionalities for the general search input field

JavaScript Packages

Webpack configuration

In case that the consuming app uses webpack as the generator for JS, you must register the package as an external resource to gain access through module import.

// webpack.config.js
module.exports = {
  …
  externals: {
    '@wlw/<package-name>': '<module-name>'
  }
}

Available Packages

Package name Module name Description
content-toggle ContentToggle The content-toggle wraps long contents and toggles whether the full content is shown or cropped to a specific height.
lazy-loader LazyLoader The lazy-loader delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them.
contact-request-form ContactRequestForm The contact-request-form holds functionality for a multipage form with soft validation.
data-privacy-bar DataPrivacyBar The data-privacy-bar checks for the tracking permission cookie and shows the bar if none is found.