Components
BaseWork in progress
Input Range Slider using JavaScript
<div class="input-range b-color"></div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var searchboxElement = document.getElementsByClassName('input-range')[0];
var searchbox = new EKW.InputRange(searchboxElement);
});
</script>
Toggle code
A box in itself does not have any size and only basic responsive behavior. It is always a material, it inherits its style automatically.
Adding the class box--with-image when the box contains an .box__header.
In order to adjust the layout of a box, you have to wrap it in a .box-container.
<a href="#" class="contextual-region box box--with-image link-unstyled">
<div class="box__header" style="background-image: url(/assets/toolkit/images/hero-hand1.jpg)"></div>
<div class="box__body">
<div class="box__title">
<h5>Wer und was sind wir?</h5>
</div>
<div class="box__text">
<p>Fair und zuverlässig - diese genossenschaftlichen Werte sind aktueller denn je. Auch und gerade für den Finanzsektor.</p>
</div>
<div class="box__footer">
<span class="btn btn--link b-color">Zu den Stellen</span>
</div>
</div>
</a>
Toggle code
Use these modifiers for .box-container to adjust the layout of the containing box.
<div class="mrgv+">
<div class="box-container box-container--h">
<a href="#" class="contextual-region box box--with-image link-unstyled">
<div class="box__header" style="background-image: url(/assets/toolkit/images/hero-hand1.jpg)"></div>
<div class="box__body">
<div class="box__title">
<h5>Wer und was sind wir?</h5>
</div>
<div class="box__text">
<p>Fair und zuverlässig - diese genossenschaftlichen Werte sind aktueller denn je. Auch und gerade für den Finanzsektor.</p>
</div>
<div class="box__footer">
<span class="btn btn--link b-color">Zu den Stellen</span>
</div>
</div>
</a>
</div>
</div>
<div class="mrgv+">
<div class="box-container box-container--h box-container--small">
<a href="#" class="contextual-region box box--with-image link-unstyled">
<div class="box__header" style="background-image: url(/assets/toolkit/images/hero-hand1.jpg)"></div>
<div class="box__body">
<div class="box__title">
<h5>Wer und was sind wir?</h5>
</div>
<div class="box__text">
<p>Fair und zuverlässig - diese genossenschaftlichen Werte sind aktueller denn je. Auch und gerade für den Finanzsektor.</p>
</div>
<div class="box__footer">
<span class="btn btn--link b-color">Zu den Stellen</span>
</div>
</div>
</a>
</div>
</div>
<div class="mrgv+">
<div class="box-container box-container--h box-container--right">
<a href="#" class="contextual-region box box--with-image link-unstyled">
<div class="box__header" style="background-image: url(/assets/toolkit/images/hero-hand1.jpg)"></div>
<div class="box__body">
<div class="box__title">
<h5>Wer und was sind wir?</h5>
</div>
<div class="box__text">
<p>Fair und zuverlässig - diese genossenschaftlichen Werte sind aktueller denn je. Auch und gerade für den Finanzsektor.</p>
</div>
<div class="box__footer">
<span class="btn btn--link b-color">Zu den Stellen</span>
</div>
</div>
</a>
</div>
</div>
<div class="mrgv+">
<div class="box-container box-container--h box-container--right box-container--small">
<a href="#" class="contextual-region box box--with-image link-unstyled">
<div class="box__header" style="background-image: url(/assets/toolkit/images/hero-hand1.jpg)"></div>
<div class="box__body">
<div class="box__title">
<h5>Wer und was sind wir?</h5>
</div>
<div class="box__text">
<p>Fair und zuverlässig - diese genossenschaftlichen Werte sind aktueller denn je. Auch und gerade für den Finanzsektor.</p>
</div>
<div class="box__footer">
<span class="btn btn--link b-color">Zu den Stellen</span>
</div>
</div>
</a>
</div>
</div>
Toggle code
A .box changes it's appearance based on what .section it is.
When put inside a .section--default, the box will get an alt color.
If inside a .section--alt, the box becomes white.
<div class="section section--default pdg++">
<div class="box-container box-container--h">
<a href="#" class="contextual-region box box--with-image link-unstyled">
<div class="box__header" style="background-image: url(/assets/toolkit/images/hero-hand1.jpg)"></div>
<div class="box__body">
<div class="box__title">
<h5>Wer und was sind wir?</h5>
</div>
<div class="box__text">
<p>Fair und zuverlässig - diese genossenschaftlichen Werte sind aktueller denn je. Auch und gerade für den Finanzsektor.</p>
</div>
<div class="box__footer">
<span class="btn btn--link b-color">Zu den Stellen</span>
</div>
</div>
</a>
</div>
</div>
<div class="section section--alt pdg++">
<div class="box-container box-container--h">
<a href="#" class="contextual-region box box--with-image link-unstyled">
<div class="box__header" style="background-image: url(/assets/toolkit/images/hero-hand1.jpg)"></div>
<div class="box__body">
<div class="box__title">
<h5>Wer und was sind wir?</h5>
</div>
<div class="box__text">
<p>Fair und zuverlässig - diese genossenschaftlichen Werte sind aktueller denn je. Auch und gerade für den Finanzsektor.</p>
</div>
<div class="box__footer">
<span class="btn btn--link b-color">Zu den Stellen</span>
</div>
</div>
</a>
</div>
</div>
Toggle code
You can put two or three .box elements in a .box-container.
Wer und was sind wir?
Fair und zuverlässig - diese genossenschaftlichen Werte sind aktueller denn je. Auch und gerade für den Finanzsektor.
Wer und was sind wir?
Fair und zuverlässig - diese genossenschaftlichen Werte sind aktueller denn je. Auch und gerade für den Finanzsektor.
Wer und was sind wir?
Fair und zuverlässig - diese genossenschaftlichen Werte sind aktueller denn je. Auch und gerade für den Finanzsektor.
<div class="mrgv+">
<div class="box-container box-container--v">
<a href="#" class="contextual-region box box--with-image link-unstyled">
<div class="box__header" style="background-image: url(/assets/toolkit/images/hero-hand1.jpg)"></div>
<div class="box__body">
<div class="box__title">
<h5>Wer und was sind wir?</h5>
</div>
<div class="box__text">
<p>Fair und zuverlässig - diese genossenschaftlichen Werte sind aktueller denn je. Auch und gerade für den Finanzsektor.</p>
</div>
<div class="box__footer">
<span class="btn btn--link b-color">Zu den Stellen</span>
</div>
</div>
</a>
<a href="#" class="contextual-region box box--with-image link-unstyled">
<div class="box__header" style="background-image: url(/assets/toolkit/images/hero-hand1.jpg)"></div>
<div class="box__body">
<div class="box__title">
<h5>Wer und was sind wir?</h5>
</div>
<div class="box__text">
<p>Fair und zuverlässig - diese genossenschaftlichen Werte sind aktueller denn je. Auch und gerade für den Finanzsektor.</p>
</div>
<div class="box__footer">
<span class="btn btn--link b-color">Zu den Stellen</span>
</div>
</div>
</a>
<a href="#" class="contextual-region box box--with-image link-unstyled">
<div class="box__header" style="background-image: url(/assets/toolkit/images/hero-hand1.jpg)"></div>
<div class="box__body">
<div class="box__title">
<h5>Wer und was sind wir?</h5>
</div>
<div class="box__text">
<p>Fair und zuverlässig - diese genossenschaftlichen Werte sind aktueller denn je. Auch und gerade für den Finanzsektor.</p>
</div>
<div class="box__footer">
<span class="btn btn--link b-color">Zu den Stellen</span>
</div>
</div>
</a>
</div>
</div>
Toggle code
BaseWork in progress
Show numbers, text and icons in a highlighted way by using a .bubble.
A bubble is always a material.
72
Unternehmen
<div class="bubble material">
<div class="bubble__title b-color">72</div>
<div class="bubble__text">Unternehmen</div>
</div>
Toggle code
CollectionWork in progress
Put up to 6 .bubble elements in a .bubble-collection.
72
Unternehmen
8'231
Lernende
100‘373
Mitarbeitende
<div class="bubble-collection">
<div class="bubble-collection__content">
<div class="bubble material">
<div class="bubble__title b-color">72</div>
<div class="bubble__text">Unternehmen</div>
</div>
<div class="bubble bubble--large material">
<div class="bubble__title b-color">8'231</div>
<div class="bubble__text">Lernende</div>
</div>
<div class="bubble bubble--huge material">
<div class="bubble__title b-color">100‘373</div>
<div class="bubble__text">Mitarbeitende</div>
</div>
</div>
</div>
Toggle code
By default, we normalize button style to the minimum. Use the sizes, styles and variants classes to make them shinier. You can also use this as a base for any custom button.
<a href="#" class="btn">Anchor</a>
<button class="btn">Button</button>
<input type="submit" value="Submit" class="btn">
Toggle code
<button class="btn btn--default b-background b-border btn--small">Small</button>
<button class="btn btn--default b-background b-border">Regular</button>
<button class="btn btn--default b-background b-border btn--large">Large</button>
Toggle code
<button class="btn btn--default b-background b-border btn--md" disabled>Disabled</button>
Toggle code
<button class="btn btn--md btn--default b-background b-border">Default</button>
<button class="btn btn--md btn--secondary b-color">Secondary</button>
Toggle code
<p><button class="btn btn--link b-color">Link button</button></p>
<p><button class="btn btn--default b-background b-border btn--md btn--block">Block button</button></p>
Toggle code
Drupal LanguageswitcherWork in progress
The language switcher from Drupal
<div id="block-languagedropdownswitcher" class="contextual-region">
<form class="lang-dropdown-form lang_dropdown_form language_interface" id="lang_dropdown_form_591307a030cbb" data-drupal-selector="lang-dropdown-form" action="/node/19" method="post" accept-charset="UTF-8">
<div class="js-form-item form-item js-form-type-select form-item-lang-dropdown-select js-form-item-lang-dropdown-select form-no-label">
<label for="edit-lang-dropdown-select" class="visually-hidden">Select your language</label>
<select style="width:65px" class="lang-dropdown-select-element form-select" id="lang-dropdown-select-591307a030cbb" data-drupal-selector="edit-lang-dropdown-select" name="lang_dropdown_select">
<option value="en">en</option>
<option value="de" selected="selected">de</option>
<option value="it">it</option>
<option value="fr">fr</option>
</select>
</div>
<input data-drupal-selector="edit-en" type="hidden" name="en" value="/en/node/19">
<input data-drupal-selector="edit-de" type="hidden" name="de" value="/node/19">
<input data-drupal-selector="edit-it" type="hidden" name="it" value="/it/node/19">
<input data-drupal-selector="edit-fr" type="hidden" name="fr" value="/fr/node/19">
<input data-drupal-selector="form-ebfjszpf8quihgehhurmwcwiwqzpalpxnvz5yjouwhw" type="hidden" name="form_build_id" value="form-eBfJszPF8quIHgEhHuRmWcwiWqZPaLPxnvz5YJOuWhw">
<input data-drupal-selector="edit-lang-dropdown-form-form-token" type="hidden" name="form_token" value="Vj6jvRA2mH3dZX6zaEaktJZ1dIdyZWKTo94oBsJD-sU">
<input data-drupal-selector="edit-lang-dropdown-form" type="hidden" name="form_id" value="lang_dropdown_form">
</form>
</div>
Toggle code
Widths are percentages represented by fractions. All classes are constructed like .w-{nominator}/{denominator}. By default you have halves, thirds, quarters, fifths and sixths. You can easily add more by changing the $widths-columns setting.
Widths are independent from the grid, you’re free to use them anywhere, with other components such as mosaic, media, etc.
Note that only the smallest fractions are generated; for example .w-2/4 doesn’t exist when both quarters and halves are in the settings, .w-1/2 take over it.
1/6
5/6
1/5
4/5
1/4
3/4
1/3
2/3
2/5
3/5
1/2
1/2
1/1
<div class="( grid )">
<div class="w-1/6 ( grid__item )">
<div class="( box box--default box--tiny text-center )">1/6</div>
</div>
<div class="w-5/6 ( grid__item )">
<div class="( box box--default box--tiny text-center )">5/6</div>
</div>
</div>
<div class="( grid ) mrgt">
<div class="w-1/5 ( grid__item )">
<div class="( box box--default box--tiny text-center )">1/5</div>
</div>
<div class="w-4/5 ( grid__item )">
<div class="( box box--default box--tiny text-center )">4/5</div>
</div>
</div>
<div class="( grid ) mrgt">
<div class="w-1/4 ( grid__item )">
<div class="( box box--default box--tiny text-center )">1/4</div>
</div>
<div class="w-3/4 ( grid__item )">
<div class="( box box--default box--tiny text-center )">3/4</div>
</div>
</div>
<div class="( grid ) mrgt">
<div class="w-1/3 ( grid__item )">
<div class="( box box--default box--tiny text-center )">1/3</div>
</div>
<div class="w-2/3 ( grid__item )">
<div class="( box box--default box--tiny text-center )">2/3</div>
</div>
</div>
<div class="( grid ) mrgt">
<div class="w-2/5 ( grid__item )">
<div class="( box box--default box--tiny text-center )">2/5</div>
</div>
<div class="w-3/5 ( grid__item )">
<div class="( box box--default box--tiny text-center )">3/5</div>
</div>
</div>
<div class="( grid ) mrgt">
<div class="w-1/2 ( grid__item )">
<div class="( box box--default box--tiny text-center )">1/2</div>
</div>
<div class="w-1/2 ( grid__item )">
<div class="( box box--default box--tiny text-center )">1/2</div>
</div>
</div>
<div class="( grid ) mrgt">
<div class="w-1/1 ( grid__item )">
<div class="( box box--default box--tiny text-center )">1/1</div>
</div>
</div>
Toggle code
Change an element width depending on predefined breakpoints. This use a mobile-first approach — it use breakpoints defined as min-width only — and therefor cover all upper resolutions.
XS 1/1 · SM 1/2 · MD 1/3 · LG 1/4
XS 1/1 · SM 1/2 · MD 1/3 · LG 1/4
<div class="( grid grid--center )">
<div class="sm-w-1/2 md-w-1/3 lg-w-1/4 ( grid__item )">
<div class="( box box--default box--tiny text-center )"><strong>XS</strong> 1/1 · <strong>SM</strong> 1/2 · <strong>MD</strong> 1/3 · <strong>LG</strong> 1/4</div>
</div>
<div class="sm-w-1/2 md-w-1/3 lg-w-1/4 ( grid__item xs-mrgt )">
<div class="( box box--default box--tiny text-center )"><strong>XS</strong> 1/1 · <strong>SM</strong> 1/2 · <strong>MD</strong> 1/3 · <strong>LG</strong> 1/4</div>
</div>
</div>
Toggle code
Tight
Tiny
Small
Default
Large
Huge
<div class="grid grid--tight">
<div class="grid__item ( w-1/3 )">
<div class="( box box--default box--tiny text-center )"> </div>
</div>
<div class="grid__item ( w-1/3 )">
<div class="( box box--default box--tiny text-center )">Tight</div>
</div>
<div class="grid__item ( w-1/3 )">
<div class="( box box--default box--tiny text-center )"> </div>
</div>
</div>
<div class="grid grid--tiny ( mrgt )">
<div class="grid__item ( w-1/3 )">
<div class="( box box--default box--tiny text-center )"> </div>
</div>
<div class="grid__item ( w-1/3 )">
<div class="( box box--default box--tiny text-center )">Tiny</div>
</div>
<div class="grid__item ( w-1/3 )">
<div class="( box box--default box--tiny text-center )"> </div>
</div>
</div>
<div class="grid grid--small ( mrgt )">
<div class="grid__item ( w-1/3 )">
<div class="( box box--default box--tiny text-center )"> </div>
</div>
<div class="grid__item ( w-1/3 )">
<div class="( box box--default box--tiny text-center )">Small</div>
</div>
<div class="grid__item ( w-1/3 )">
<div class="( box box--default box--tiny text-center )"> </div>
</div>
</div>
<div class="grid mrgt">
<div class="grid__item ( w-1/3 )">
<div class="( box box--default box--tiny text-center )"> </div>
</div>
<div class="grid__item ( w-1/3 )">
<div class="( box box--default box--tiny text-center )">Default</div>
</div>
<div class="grid__item ( w-1/3 )">
<div class="( box box--default box--tiny text-center )"> </div>
</div>
</div>
<div class="grid grid--large ( mrgt )">
<div class="grid__item ( w-1/3 )">
<div class="( box box--default box--tiny text-center )"> </div>
</div>
<div class="grid__item ( w-1/3 )">
<div class="( box box--default box--tiny text-center )">Large</div>
</div>
<div class="grid__item ( w-1/3 )">
<div class="( box box--default box--tiny text-center )"> </div>
</div>
</div>
<div class="grid grid--huge ( mrgt )">
<div class="grid__item ( w-1/3 )">
<div class="( box box--default box--tiny text-center )"> </div>
</div>
<div class="grid__item ( w-1/3 )">
<div class="( box box--default box--tiny text-center )">Huge</div>
</div>
<div class="grid__item ( w-1/3 )">
<div class="( box box--default box--tiny text-center )"> </div>
</div>
</div>
Toggle code
Change columns alignment with .grid modifiers; combining horizontal (center, right) and vertical (middle, bottom) alignment are possible. Top and left are the default values.
Right
Center
Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci.
Middle
Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.
Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci.
Bottom
Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.
<div class="grid grid--right ( mrgt )">
<div class="grid__item ( w-1/3 )">
<div class="( box box--default box--tiny text-center )">Right</div>
</div>
<div class="grid__item ( w-1/3 )">
<div class="( box box--default box--tiny text-center )"> </div>
</div>
</div>
<div class="grid grid--center ( mrgt )">
<div class="grid__item ( w-1/6 )">
<div class="( box box--default box--tiny text-center )"> </div>
</div>
<div class="grid__item ( w-1/6 )">
<div class="( box box--default box--tiny text-center )">Center</div>
</div>
<div class="grid__item ( w-1/6 )">
<div class="( box box--default box--tiny text-center )"> </div>
</div>
</div>
<div class="grid grid--middle ( mrgt )">
<div class="grid__item ( w-1/3 )">
<div class="( box box--default box--small )">
<p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci.</p>
</div>
</div>
<div class="grid__item ( w-1/3 )">
<div class="( box box--default box--small text-center )">Middle</div>
</div>
<div class="grid__item ( w-1/3 )">
<div class="( box box--default box--small )">
<p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
</div>
</div>
</div>
<div class="grid grid--bottom ( mrgt )">
<div class="grid__item ( w-1/3 )">
<div class="( box box--default box--small )">
<p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci.</p>
</div>
</div>
<div class="grid__item ( w-1/3 )">
<div class="( box box--default box--small text-center )">Bottom</div>
</div>
<div class="grid__item ( w-1/3 )">
<div class="( box box--default box--small )">
<p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
</div>
</div>
</div>
Toggle code
Reverse columns order with .grid--rev when there’s more than one per row.
First column
Second column
<div class="grid grid--rev">
<div class="grid__item ( sm-w-1/2 )">
<div class="( box box--default box--tiny text-center )">First column</div>
</div>
<div class="grid__item ( sm-w-1/2 xs-mrgt )">
<div class="( box box--default box--tiny text-center )">Second column</div>
</div>
</div>
Toggle code
A headline with a background color for every line. No JavaScript required. It is kinda hacky, but even works when words break which contain a hyphen.
Entscheiden Sie sich für eine Karriere, die auch Freude bereitet.
<div class="headline headline--h1">
<div class="headline__padding headline--h1">
<div><span></span></div>
</div>
<div class="headline__text b-color headline--h1">
<div><span>Entscheiden Sie sich für eine Karriere, die auch Freude bereitet. </span></div>
</div>
</div>
Toggle code
SVG icons ready to be referenced anywhere as long as the source file1 has been embeded in the page2, preferably right after the body opening tag3.
Use the following snippet to display an icon:
<svg class="icon icon--ID">
<use xlink:href="#ID" />
</svg>
Where ID should be replaced by the icon unique identifier (documented under each icon below).
- 1 Source file is located at assets/toolkit/icons/icons.svg
- 2 You can easily embed the source file in your page, with PHP for example.
- 3 Putting it elsewhere could result in unexpected behavior, see Chrome issue.
Sectors
jobrubric-administration
jobrubric-finance
jobrubric-research
jobrubric-leisure
jobrubric-gastronomy
jobrubric-facility
jobrubric-humanresources
jobrubric-it
jobrubric-klubschule
jobrubric-pr
jobrubric-culture
jobrubric-logistics
jobrubric-marketing
jobrubric-engineering
jobrubric-production
jobrubric-office
jobrubric-misc
jobrubric-selling
jobrubric-projectmanagement
Sharing
socialmedia-facebook
socialmedia-facebook-filled
socialmedia-twitter
socialmedia-googleplus
socialmedia-email
socialmedia-whatchado
socialmedia-youtube
socialmedia-xing
socialmedia-linkedin
UI
ui-menu
ui-play
<h3 class="mrgt0">Sectors</h3>
<div class="grid mrgb">
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--jobrubric-administration img-responsive">
<use xlink:href="#jobrubric-administration" />
</svg>
<p class="mrgt0">jobrubric-administration</p>
</div>
</div>
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--jobrubric-finance img-responsive">
<use xlink:href="#jobrubric-finance" />
</svg>
<p class="mrgt0">jobrubric-finance</p>
</div>
</div>
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--jobrubric-research img-responsive">
<use xlink:href="#jobrubric-research" />
</svg>
<p class="mrgt0">jobrubric-research</p>
</div>
</div>
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--jobrubric-leisure img-responsive">
<use xlink:href="#jobrubric-leisure" />
</svg>
<p class="mrgt0">jobrubric-leisure</p>
</div>
</div>
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--jobrubric-gastronomy img-responsive">
<use xlink:href="#jobrubric-gastronomy" />
</svg>
<p class="mrgt0">jobrubric-gastronomy</p>
</div>
</div>
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--jobrubric-facility img-responsive">
<use xlink:href="#jobrubric-facility" />
</svg>
<p class="mrgt0">jobrubric-facility</p>
</div>
</div>
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--jobrubric-humanresources img-responsive">
<use xlink:href="#jobrubric-humanresources" />
</svg>
<p class="mrgt0">jobrubric-humanresources</p>
</div>
</div>
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--jobrubric-it img-responsive">
<use xlink:href="#jobrubric-it" />
</svg>
<p class="mrgt0">jobrubric-it</p>
</div>
</div>
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--jobrubric-klubschule img-responsive">
<use xlink:href="#jobrubric-klubschule" />
</svg>
<p class="mrgt0">jobrubric-klubschule</p>
</div>
</div>
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--jobrubric-pr img-responsive">
<use xlink:href="#jobrubric-pr" />
</svg>
<p class="mrgt0">jobrubric-pr</p>
</div>
</div>
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--jobrubric-culture img-responsive">
<use xlink:href="#jobrubric-culture" />
</svg>
<p class="mrgt0">jobrubric-culture</p>
</div>
</div>
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--jobrubric-logistics img-responsive">
<use xlink:href="#jobrubric-logistics" />
</svg>
<p class="mrgt0">jobrubric-logistics</p>
</div>
</div>
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--jobrubric-marketing img-responsive">
<use xlink:href="#jobrubric-marketing" />
</svg>
<p class="mrgt0">jobrubric-marketing</p>
</div>
</div>
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--jobrubric-engineering img-responsive">
<use xlink:href="#jobrubric-engineering" />
</svg>
<p class="mrgt0">jobrubric-engineering</p>
</div>
</div>
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--jobrubric-production img-responsive">
<use xlink:href="#jobrubric-production" />
</svg>
<p class="mrgt0">jobrubric-production</p>
</div>
</div>
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--jobrubric-office img-responsive">
<use xlink:href="#jobrubric-office" />
</svg>
<p class="mrgt0">jobrubric-office</p>
</div>
</div>
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--jobrubric-misc img-responsive">
<use xlink:href="#jobrubric-misc" />
</svg>
<p class="mrgt0">jobrubric-misc</p>
</div>
</div>
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--jobrubric-selling img-responsive">
<use xlink:href="#jobrubric-selling" />
</svg>
<p class="mrgt0">jobrubric-selling</p>
</div>
</div>
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--jobrubric-projectmanagement img-responsive">
<use xlink:href="#jobrubric-projectmanagement" />
</svg>
<p class="mrgt0">jobrubric-projectmanagement</p>
</div>
</div>
</div>
<h3 class="mrgt0">Sharing</h3>
<div class="grid mrgb">
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--socialmedia-facebook img-responsive">
<use xlink:href="#socialmedia-facebook" />
</svg>
<p class="mrgt0">socialmedia-facebook</p>
</div>
</div>
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--socialmedia-facebook-filled img-responsive">
<use xlink:href="#socialmedia-facebook-filled" />
</svg>
<p class="mrgt0">socialmedia-facebook-filled</p>
</div>
</div>
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--socialmedia-twitter img-responsive">
<use xlink:href="#socialmedia-twitter" />
</svg>
<p class="mrgt0">socialmedia-twitter</p>
</div>
</div>
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--socialmedia-googleplus img-responsive">
<use xlink:href="#socialmedia-googleplus" />
</svg>
<p class="mrgt0">socialmedia-googleplus</p>
</div>
</div>
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--socialmedia-email img-responsive">
<use xlink:href="#socialmedia-email" />
</svg>
<p class="mrgt0">socialmedia-email</p>
</div>
</div>
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--socialmedia-whatchado img-responsive">
<use xlink:href="#socialmedia-whatchado" />
</svg>
<p class="mrgt0">socialmedia-whatchado</p>
</div>
</div>
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--socialmedia-youtube img-responsive">
<use xlink:href="#socialmedia-youtube" />
</svg>
<p class="mrgt0">socialmedia-youtube</p>
</div>
</div>
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--socialmedia-xing img-responsive">
<use xlink:href="#socialmedia-xing" />
</svg>
<p class="mrgt0">socialmedia-xing</p>
</div>
</div>
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--socialmedia-linkedin img-responsive">
<use xlink:href="#socialmedia-linkedin" />
</svg>
<p class="mrgt0">socialmedia-linkedin</p>
</div>
</div>
</div>
<h3 class="mrgt0">UI</h3>
<div class="grid mrgb">
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--ui-menu img-responsive">
<use xlink:href="#ui-menu" />
</svg>
<p class="mrgt0">ui-menu</p>
</div>
</div>
<div class="grid__item w-1/2 sm-w-1/3 md-w-1/4 lg-w-1/6 text-center">
<div class="pdgh+">
<svg class="icon icon--ui-play img-responsive">
<use xlink:href="#ui-play" />
</svg>
<p class="mrgt0">ui-play</p>
</div>
</div>
</div>
Toggle code
Simply remove list default bullets or numbers.
- Class aptent taciti sociosqu ad litora
- Torquent per conubia nostra, per inceptos himenaeos
- Sed molestie augue sit amet leo consequat posuere
<ul class="list">
<li>Class aptent taciti sociosqu ad litora</li>
<li>Torquent per conubia nostra, per inceptos himenaeos</li>
<li>Sed molestie augue sit amet leo consequat posuere</li>
</ul>
Toggle code
Put list items inline with or without gutters. You can reduce or increase the space by using the modifiers tiny, small, large or huge. Remove gutters with tight, add separators with divided.
Since the list items are displayed as inline-block, you will probablby get an extra white space between them. Kanbasu was first removing those by setting the font-size to zero but this will prevent your code from being DRY in many cases. Therefor you should handle that on your side the way your prefer. This article covers the topic pretty well.
- Lorem
- Ipsum
- Dolor
- Lorem
- Ipsum
- Dolor
- Lorem
- Ipsum
- Dolor
<ul class="list-inline ( mrgb+ )">
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
<ul class="list-inline list-inline--tight ( mrgb+ )">
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
<ul class="list-inline list-inline--divided">
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
Toggle code
Stack list items with gutters. You can reduce or increase the space by using the modifiers tiny, small, large or huge. Add separators with divided.
- Class aptent taciti sociosqu ad litora
- Torquent per conubia nostra, per inceptos himenaeos
- Sed molestie augue sit amet leo consequat posuere
- Lorem
- Ipsum
- Dolor
- Class aptent taciti sociosqu ad litora
- Torquent per conubia nostra, per inceptos himenaeos
- Sed molestie augue sit amet leo consequat posuere
<ul class="list-stacked ( mrgb+ )">
<li>Class aptent taciti sociosqu ad litora</li>
<li>Torquent per conubia nostra, per inceptos himenaeos</li>
<li>Sed molestie augue sit amet leo consequat posuere</li>
</ul>
<ul class="list-stacked list-stacked--tight ( mrgb+ )">
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
<ul class="list-stacked list-stacked--divided">
<li>Class aptent taciti sociosqu ad litora</li>
<li>Torquent per conubia nostra, per inceptos himenaeos</li>
<li>Sed molestie augue sit amet leo consequat posuere</li>
</ul>
Toggle code
This term is used for elements that appear differently than the rest. In the context of this styleguide this is a class used for giving elements a shadow.
Normal material
Elevated material
Active material
<div class="material ( pdg )">
<h4 class="pdg0">Normal material</h4>
</div>
<div class="material material--elevated ( pdg mrgt )">
<h4 class="pdg0">Elevated material</h4>
</div>
<div class="material material--active ( pdg mrgt )">
<h4 class="pdg0">Active material</h4>
</div>
Toggle code
The famous media object created by Nicole Sullivan. Simply put content next to an image or anything else.
Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi.
Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim.
<div class="media ( mrgb )">
<div class="media__left">
<img src="https://placehold.it/200x200" class="media__image">
</div>
<div class="media__body">
<p>Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio
ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi.</p>
</div>
</div>
<div class="media">
<div class="media__right">
<img src="https://placehold.it/200x200" class="media__image">
</div>
<div class="media__body">
<p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum
mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim.</p>
</div>
</div>
Toggle code
Extend the default media component but vertically align image and content under a specific breakpoint.
Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.
<div class="media media--responsive">
<div class="media__left">
<img src="https://placehold.it/200x200" class="media__image">
</div>
<div class="media__body">
<p>Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio
ac lectus vestibulum faucibus eget in metus.</p>
</div>
</div>
Toggle code
The section component consists of a .section class, which is a wrapper for a thematic section. It only defines the visual part. Every section needs at least one .section__body. This is basically a container which defines a max-width for the content to follow.
Use the .section__body--wide modifier in order to let content take up the whole available width of the screen.
.section variants
.section--alt |
Light grey background. Use to seperate different content after a white section. |
.section--medium |
Dark grey background. To further make thematic seperation, use this slightly darker grey. |
.section--dark |
Palladium background. Used for sections that need some extra highlighting inbetween content sections, like a call to action. |
.section--image |
Image background. Used for thematic sections that also act as a call to action. |
.section__body variants
.section__body |
Default section__body for content to remain inside the page grid. Defines a max-width of 1200px. |
.section__body--wide |
Use this to make the content take up the whole available width, up to the padding of the parent section. |
Default section
- White background
- Normal text color
Light section
- Light grey background
- Normal text color
Medium section
- Dark grey background
- Normal text color
Dark section
- Palladium background
- White text color
Image section
- Background image
- White text color
<section class="section">
<div class="section__body">
<h1>Default section</h1>
<ol>
<li>White background</li>
<li>Normal text color</li>
</ol>
</div>
</section>
<section class="section section--alt">
<div class="section__body">
<h1>Light section</h1>
<ol>
<li>Light grey background</li>
<li>Normal text color</li>
</ol>
</div>
</section>
<section class="section section--medium">
<div class="section__body">
<h1>Medium section</h1>
<ol>
<li>Dark grey background</li>
<li>Normal text color</li>
</ol>
</div>
</section>
<section class="section section--dark">
<div class="section__body">
<h1>Dark section</h1>
<ol>
<li>Palladium background</li>
<li>White text color</li>
</ol>
</div>
</section>
<section class="section section--image" style="background-image: url(assets/toolkit/images/hero-hand1.jpg)">
<div class="section__body">
<h1>Image section</h1>
<ol>
<li>Background image</li>
<li>White text color</li>
</ol>
</div>
</section>
Toggle code
Entscheiden Sie sich für eine Karriere, die auch Freude bereitet.
<section class="section section--hero section--image">
<div class="section__body section__body">
<div>
<div class="headline headline--h1">
<div class="headline__padding headline--h1">
<div><span></span></div>
</div>
<div class="headline__text b-color headline--h1">
<div><span>Entscheiden Sie sich für eine Karriere, die auch Freude bereitet. </span></div>
</div>
</div>
</div>
</div>
</section>
Toggle code
Also known as Berufsfelder.
<a href="#" class="sector link-inverted b-color">
<div class="mosaic">
<div class="mosaic__cell mosaic__cell--fit">
<div class="sector__icon b-background b-color mrgr-">
<svg class="icon icon--full icon--facility">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#facility"></use>
</svg>
</div>
</div>
<div class="mosaic__cell">
<div class="h6 mrg0">Hausdienste / Raumpflege / Technik</div>
<div class="text-small text-muted">21 offene Stellen</div>
</div>
</div>
</a>
Toggle code