<div class="blocks">
<div class="simple-teaser">
<div class="simple-teaser__body"><a class="simple-teaser__link">
<h5>Teaser Titel</h5>
<h6>Teaser Untertitel</h6>
</a>
</div>
<div class="simple-teaser__footer">
<button class="btn btn--small btn--cta" data-label="Hier klicken!">Hier klicken!</button>
</div>
</div>
<div class="simple-teaser">
<div class="simple-teaser__body"><a class="simple-teaser__link">
<h5>Teaser Titel</h5>
</a>
</div>
<div class="simple-teaser__footer">
<button class="btn btn--small btn--cta" data-label="Hier klicken!">Hier klicken!</button>
</div>
</div>
<div class="simple-teaser">
<div class="simple-teaser__body"><a class="simple-teaser__link">
<h5>Teaser Titel</h5>
<h6>Teaser Untertitel</h6>
</a>
</div>
<div class="simple-teaser__footer">
<button class="btn btn--small btn--cta" data-label="Hier klicken!">Hier klicken!</button>
</div>
</div>
</div>
<div class="blocks">
<div class="simple-teaser">
<div class="simple-teaser__body"><a class="simple-teaser__link">
<h5>Teaser Titel</h5>
<h6>Teaser Untertitel</h6>
</a>
</div>
<div class="simple-teaser__footer">
<button class="btn btn--small btn--cta" data-label="Hier klicken!">Hier klicken!</button>
</div>
</div>
<div class="simple-teaser">
<div class="simple-teaser__body"><a class="simple-teaser__link">
<h5>Teaser Titel</h5>
<h6>Teaser Untertitel</h6>
</a>
</div>
<div class="simple-teaser__footer">
<button class="btn btn--small btn--cta" data-label="Hier klicken!">Hier klicken!</button>
</div>
</div>
<div class="simple-teaser">
<div class="simple-teaser__body"><a class="simple-teaser__link">
<h5>Teaser Titel</h5>
<h6>Teaser Untertitel</h6>
</a>
</div>
<div class="simple-teaser__footer">
<button class="btn btn--small btn--cta" data-label="Hier klicken!">Hier klicken!</button>
</div>
</div>
</div>
import SimpleTileTeaser from "./components/02-molecules/teaser/tile-teaser/simple-tile-teaser/index.jsx";
<div class="blocks">
<SimpleTileTeaser title="Teaser Titel" subtitle="Teaser Untertitel" buttonText="Hier klicken!"></SimpleTileTeaser>
<SimpleTileTeaser title="Teaser Titel" buttonText="Hier klicken!"></SimpleTileTeaser>
<SimpleTileTeaser title="Teaser Titel" subtitle="Teaser Untertitel" buttonText="Hier klicken!"></SimpleTileTeaser>
</div>
<div class="blocks">
<SimpleTileTeaser title="Teaser Titel" subtitle="Teaser Untertitel" buttonText="Hier klicken!"></SimpleTileTeaser>
<SimpleTileTeaser title="Teaser Titel" subtitle="Teaser Untertitel" buttonText="Hier klicken!"></SimpleTileTeaser>
<SimpleTileTeaser title="Teaser Titel" subtitle="Teaser Untertitel" buttonText="Hier klicken!"></SimpleTileTeaser>
</div>
/* No context defined for this component. */
.simple-teaser {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: center;
padding-bottom: $spacer-base;
&__body {
flex-basis: 100%;
flex-grow: 1;
align-content: center;
margin-bottom: $spacer-sm;
background-color: $simple-teaser-bg;
padding: $spacer-sm $spacer-sm $spacer-md;
min-height: 20vh;
text-align: center;
}
&__footer {
margin-top: -$spacer-base;
}
&__link {
@extend %link-unstyled;
transition: standard-transition(color);
&,
h5,
h6 {
color: $simple-teaser-color;
&:focus,
&:hover {
color: $simple-teaser-link-focus-color;
}
}
h5 {
margin-bottom: $spacer-sm;
}
h6 {
@extend %body-font-italic;
}
}
}
//
// Breakpoints
//
@media screen and (min-width: $grid-breakpoint-md) {
.simple-teaser {
margin-bottom: 0;
}
}
import { createElement } from 'complate-stream'
import Button from '../../../../01-atoms/form/button/index.jsx'
export default function SimpleTileTeaser ({ title, subtitle, buttonText, href, buttonHref }) {
return <div class='simple-teaser'>
<div class='simple-teaser__body'>
<a href={href} class='simple-teaser__link'>
<h5>{title}</h5>
{ subtitle ? <h6>{subtitle}</h6> : ''}
</a>
</div>
<div class='simple-teaser__footer'>
<Button href={buttonHref} size='small' cta>{buttonText}</Button>
</div>
</div>
}
There are no notes for this item.