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

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

the copyright

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.

Carousel

Default carousel with `options.autoheight`

the copyright
the copyright

Card carousel with `options.disableAnchors`

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.carousel', {slides: slides}) }}

Parameter

Name	Default	Description
slides	required	An array with slide markup.
name		Name of carousel. Added to class list.
showBullets	true	Set to false to disable bullets
options		An object with glidejs options.
options.autoheight	false	Enable autoheight for glidejs
options.disableAnchors	false	Disable Anchors component to enable clicking on cards inside the slider

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

Tour finden

With `headline`, `subline` and `text`

Tour finden

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

Text1

Title2

Lorem ipsum etc.

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

Code

import {openLoginOverlay} from '../login/components/calltologin/calltologin';

// use somewhere in your app flow
openLoginOverlay();

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], ...]

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

Default Grid

Sortable Grid

Quote 1 Author 1

content of teaser 1

Quote 2 Author 2

Quote 3 Author 3

content of teaser 2

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.

Pinbox

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 …

Trends

Page

19.04.2024

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 …

Page

19.04.2024

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 …

Code

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

Parameter

Name	Default	Description
post		The post object. You can overwrite values from the post with the attributes below.
title		The title of the box
href		Href attribute of the box link
image		The background timber image.
imageSizes		The image sizes attribute.
text		The text of the box
tag		The tag/category of the box.
date		The date of the box content.
ratio	16/9	The box aspect ratio.
showText	false	Weather or not to always show text. Default is showing text on hover

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>

Button

Code

Parameter

Icon

List of all available icons

Variations

Code

Parameter

Image

Image with falsy/not available image

Code

Parameter

Video

Code

Parameter

Crossheading

Use only headline attribute

Use h1 as tagName

Cross heading with h1

Code

Parameter

Carousel

Default carousel with options.autoheight

Card carousel with options.disableAnchors

Code

Parameter

Loader

Code

Parameter

Parallax

height 0.1

height 0.2

height 0.3

height 0.5

max 0

max 0.2

max 1

Code

Parameter

Teaser

Simple

With headline, subline and text

Code

Parameter

Card

Only Front

Back and Front

Code

Parameter

Card-Grid

Code

Parameter

Card-Layout-Front

Profile-Card

Card with default image

Code

Parameter

Card-Layout-Back

Code

Parameter

Call-to-login

Code

Call-for-Premium

Code

Sharing

Code

Breadcrumb

Code

Alert

Code

Parameter

Paging

Code

Parameter

Map

Code

Parameter

Sidebyside

Code

Parameter

Use only `headline` attribute

Use h1 as `tagName`

Default carousel with `options.autoheight`

Card carousel with `options.disableAnchors`

`height` 0.1

`height` 0.2

`height` 0.3

`height` 0.5

`max` 0

`max` 0.2

`max` 1

With `headline`, `subline` and `text`