Button

Code

{{ component('base.button', {text: 'test'}) }}

Parameter

Name Default Description
text
required
The translation key.
tagName
"button"
The tag to use for the button.
size
"large"
Size of button. One of "large", "normal".
type Type of button. One of "submit", "button".
href The href attribute to use for the button.
extraClasses Class(es) of button element.

Icon

List of all available icons

image/svg+xml
image/svg+xml

Variations

Code

{{ component('base.icon', {name: 'menu'}) }}

Parameter

Name Default Description
name
required
The name of the icon
size
"standard"
Size of icon. One of "standard", "small", "original", "logo-small" (only for logo).
style
"primary"
Style of icon. Multiple of "primary", "light", "badge", "original", "logo-white" (only for logo).
class Class(es) of icon element. "logo" class is needed for Kompass logo.
tooltip Tooltip for the icon. Use {position: "top", text: "text"} to edit text and postion. See Tooltips
forceFullMarkup
false
Multiple instance of the same icon use references to one single definition. If the old inlining behaviour should be used, set this option to true. It is set true by default for Logo.svg and Nordkette.svg because else the svgs are broken

Image

Image with falsy/not available image

Image missing

Code

{{ component('base.image', {image: timberImage}) }}

Parameter

Name Default Description
image
required
The timber image.
autosize
true
Use autosizing?
copyright Overwrite the image copyright. Defaults to copyright set in media meta fields.
hideCopyright
false
Explicitly hide copyright
sizes Set the sizes attribute on the image tag.
class Class(es) of icon element.

Video

Code

{{ component('base.video', {video: timberImage}) }}

Parameter

Name Default Description
video
required
The video object. (Wrapped as timber image)
autoplay
true
Use autoplay?
muted
true
Should be muted?
loop
true
Should loop the video?
controls
false
Should show video controls?
class Class(es) of icon element.

Crossheading

Use only headline attribute

Cross heading

Use h1 as tagName

Cross heading with h1

Code

{{ component('base.crossheading', {headline: 'Cross heading'}) }}

Parameter

Name Default Description
headline
required
The headline text.
tagName
"div"
The tag to use for the headline.

Loader

Code

{{ component('base.loader') }}

Parameter

Name Default Description
size Size of the loader (small, default (empty), big)
color Color of the loader. Defaults to primary color (see docs)

Parallax

height 0.1

height 0.2

height 0.3

height 0.5

max 0

max 0.2

max 1

Code

{{ component('base.parallax', {content: content}) }}

Parameter

Name Default Description
content
required
Content of parallax container
height
0.25
Height of container. Relative to width.
max
0.75
Maximum effect strength. 1 means content is fix (content height must be large enough). 0 means no effect at all.

Teaser

Simple

With headline, subline and text

Code

{{ component('base.teaser', teaser) }}

Parameter

Name Default Description
post The post object. You can overwrite values from the post with the attributes below.
image The Teaser image
imageSizes The Teaser image sizes attribute
buttontext The label for the button
buttonurl The url where the button should link to
title The Teaser Headline
subtitle The subtitle of the Teaser Element. This gets not prefilled by the post picker.
text The Teaser Text. Should not be too long, because it gets cut then.
class Class(es) of icon element.

Card

Only Front

Front content 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Front content 2

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.

Front content 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Back and Front

Front content 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Back content

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Front content 2

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.

Back content

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Front content 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Back content

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Code

{{ component('base.card', {front: front}) }}

Parameter

Name Default Description
front
required
The content on the "front".
back The content on the "back" if any.
class Class(es) of card element.

Card-Grid

Title1
Title1
Text1
Title2
Title2
Lorem ipsum etc.
Placeholder
Placeholder
Placeholder Text

Code

{{ component('base.card-layouts.grid', {elements: elements}) }}

Parameter

Name Default Description
elements
required
Array of Elements having the properties used by see: base.card-layouts.front and base.card-layouts.back
placeholder An Element like one item of elements used to fill the grid
profileImage If set to true the image will be rounded
class Class(es) of card element.

Card-Layout-Front

Profile-Card

Max Mustermann
Mitarbeiter der Woche

Card with default image

Max Mustermann
Mitarbeiter der Woche

Code

{{ component('base.card-layouts.front', {image: image, title: title}) }}

Parameter

Name Default Description
image
required
The timber image.
title The Title of the Card
subline A subline, will be placed under the title
profileImage
false
If set to true the image will be rounded.
class Class(es) of card element.

Card-Layout-Back

Max Mustermann
Mitarbeiter der Woche
Max Mustermann
Max Mustermann hat sich durch herausragende Leistungen den Titel Mitarbeiter der Woche verdient.

Code

{{ component('base.card-layouts.back', {title: image, text: title}) }}

Parameter

Name Default Description
title
required
The title of the card.
text
required
The text of the card.
class Class(es) of card element.

Call-for-Premium

Code

import {openPremiumOverlay} from '../premium/components/overlay/overlay';

// use somewhere in your app flow
openPremiumOverlay('infoText');

Sharing

Code

{{ component('base.sharing') }}

Breadcrumb

Code

{{ component('base.breadcrumb', {items: [{url: '', text:''},{url: '', text:''} ]}) }}

Alert

×
I'm a message! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Success! Yay!
×
I'm a message!

Code

{{ component('base.alert', {text: 'This is a real message.'}) }}

Parameter

Name Default Description
text
required
The message to show
color
red darken-1
The color class used to set the background color. See materializecss
class Any additional classes to add to the alert box.
closable
true
If closable is true the box has a close icon and can be dismissed by clicking it.

Paging

Code

{{ component('base.paging', {pagination: pagination}) }}

Parameter

Name Default Description
pagination
required
The Timber Pagination object.

Map

Code

{{ component('tour.map', {tour: tour}) }}

Parameter

Name Default Description
tour
required
Array of arrays in the format [[lng, lat], [lng, lat], ...]

Chart

Using data

Using options to create more complex charts

Code

{{ component('base.chart', {options: chartJsOptions}) }}

Parameter

Name Default Description
options
required
The chart.js options. See Chart.js
data Simpler format to setting data. You can set only y-values like [5,3,9] or x- and y-values in this format: [[4,5], [5,3], [6,9]]
unit If you use the simple format you can provide an unit, which will be added to tooltip and y-axis.

Sidebyside

Sidebyside 1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Sidebyside 2
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Sidebyside 3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Code

{{ component('base.sidebyside') }}

Parameter

Name Default Description
items
required
The array with all items to display
items.headline Headline of the item
items.text The text of the item
items.image The image beside the item
items.alignment
required
whether the item has the image on the right or on the left (values: "left", "right")
items.url The target url the items image should link to
items.ratio The image ratio
items.icon The icon next to the headline

Grid

Code

 {{ component('base.grid', {items: items}) }}

Parameter

Name Default Description
items
required
Array of html elements
sort
false
Sort by priority
contentWidth
false
Grid should have the width of the main content.

Tabs

Simple

Code

{{ component('base.tabs', tabs) }}

Parameter

Name Default Description
items
required
An array of tab items
items[].title
required
The Tab title
items[].href The Tab href. If not available, tab is active.
items[].target Overwrite the target attribute.
items[].hidden Flag for hiding unwanted items.
items[].featured Display important tabs in primary style.

Headlines

Headline h1

Headline h2

Headline h3

Headline h4

Headline h5
Headline h6

Code


<h1>Headline h1</h1>
<h2>Headline h2</h2>
<h3>Headline h3</h3>
<h4>Headline h4</h4>
<h5>Headline h5</h5>
<h6>Headline h6</h6>

or use classes

<div class="h1">Headline h1</div>
<h4 class="h2">Headline h2</div>