<a class=" list-teaser-training primary">
<div class="list-teaser__body">
<h2 class="list-teaser-training__headline">Titel</h2>
<div class="list-teaser-training__caption">Untertitel</div>
<div class="label-big badge badge--inverted">Labeltext</div>
</div>
<div class="list-teaser__footer"><span class="link-teaser inverted-text-color">Termine & Details</span></div>
</a>
<a class="list-teaser-training secondary">
<div class="list-teaser__body">
<h2 class="list-teaser-training__headline">Titel</h2>
<div class="list-teaser-training__caption">Untertitel</div>
<div class="label-big badge">Labeltext</div>
</div>
<div class="list-teaser__footer"><span class="link-teaser inverted-interaction-color">Termine & Details</span>
</div>
</a>
import { Fragment } from 'complate-stream'
import TrainingListTeaser from './components/02-molecules/teaser/list-teaser/training-list-teaser/index.jsx'
import Label from './components/01-atoms/text/block/label/index.jsx'
<Fragment>
<TrainingListTeaser primary title="Titel" subtitle="Untertitel" linkText="Termine & Details">
<Label type="badge" big inverted>Labeltext</Label>
</TrainingListTeaser>
<TrainingListTeaser secondary title="Titel" subtitle="Untertitel" linkText="Termine & Details">
<Label type="badge" big>Labeltext</Label>
</TrainingListTeaser>
</Fragment>
/* No context defined for this component. */
$list-teaser-training-height: ms(32);
// sass-lint:disable nesting-depth
.list-teaser-training {
@extend %list-teaser;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: $list-teaser-training-height;
&.primary {
background-color: $list-teaser-abstract-primary-bg-color;
background-image: asset-url('visual-trainings-07.jpg');
background-repeat: no-repeat;
background-position: top;
background-size: cover;
background-blend-mode: multiply;
}
&.secondary {
background-color: $list-teaser-abstract-secondary-bg-color;
background-image: asset-url('visual-trainings-07.jpg');
background-repeat: no-repeat;
background-position: top;
background-size: cover;
background-blend-mode: multiply;
}
}
.list-teaser-training__caption {
@extend %teaser-caption;
margin-bottom: $spacer-base;
color: $list-teaser-abstract-caption-color;
}
.list-teaser-training__headline {
margin-bottom: $spacer-md;
line-height: $list-teaser-abstract-headline-line-height-small;
color: $list-teaser-abstract-headline-color;
font-size: $list-teaser-abstract-headline-font-size-small;
}
//
//Breakpoints
//
@media screen and (min-width: $grid-breakpoint-md) {
.list-teaser-training__headline {
margin-bottom: $spacer-sm;
line-height: $list-teaser-abstract-headline-line-height;
font-size: $list-teaser-abstract-headline-font-size;
}
}
import { createElement } from 'complate-stream'
import classNames from 'classnames'
export default function TrainingListTeaser ({ primary, secondary, title, subtitle, linkText, href }, ...children) {
let teaserClass = classNames({ ' list-teaser-training primary': primary }, { 'list-teaser-training secondary': secondary })
let linkTeaserClass = classNames('link-teaser', {
'inverted-text-color': primary,
'inverted-interaction-color': secondary
})
return <a href={href} class={teaserClass}>
<div class='list-teaser__body'>
<h2 class='list-teaser-training__headline'>{title}</h2>
{subtitle ? <div class='list-teaser-training__caption'>{subtitle}</div> : ''}
{children}
</div>
<div class='list-teaser__footer'>
<span class={linkTeaserClass}>{linkText}</span>
</div>
</a>
}
There are no notes for this item.