<div class="blocks">
<div class="case-teaser topic-header-bg-image-girl">
<div class="case-teaser__wrapper">
<div class="case-teaser__body">
<div>
<div class="case-teaser__caption">case study</div>
<div>
<div class="case-teaser__header">
<h1 class="punch-in topic-header-bg-image-text-box-girl">case study headline eggs</h1>
</div>
<div class="case-teaser__text">lorem ipsum dolor sit amet, consectetur adipisicing elit. velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!</div>
<div class="case-teaser__footer"><a href="#" class="link-teaser">mehr erfahren</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="blocks">
<div class="case-teaser case-teaser--simple landing-page-header-bg-image">
<div class="case-teaser__wrapper">
<div class="case-teaser__body">
<div>
<div class="case-teaser__caption">Case Study</div>
<div>
<div class="case-teaser__header">
<h1>Case Study Headline</h1>
</div>
<div class="case-teaser__text">lorem ipsum dolor sit amet, consectetur adipisicing elit. velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!</div>
<div class="case-teaser__footer"><a href="#" class="btn btn--small btn--cta" data-label="mehr erfahren">mehr erfahren</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
import { Fragment } from 'complate-stream'
import CaseListTeaser from "./components/02-molecules/teaser/list-teaser/case-list-teaser"
<Fragment>
<div class="blocks">
<CaseListTeaser header="case study headline eggs" caption="case study" href="#" linkText="mehr erfahren" additionalClasses="topic-header-bg-image-girl" headerAdditionalClasses="topic-header-bg-image-text-box-girl" punchIn>
lorem ipsum dolor sit amet, consectetur adipisicing elit. velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
</CaseListTeaser>
</div>
<div class="blocks">
<CaseListTeaser header="Case Study Headline" caption="Case Study" href="#" linkText="mehr erfahren"
additionalClasses="landing-page-header-bg-image" simple withButton>
lorem ipsum dolor sit amet, consectetur adipisicing elit. velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
</CaseListTeaser>
</div>
</Fragment>
/* No context defined for this component. */
$case-teaser-bg-width: 1444px; // Arbitrary value
$case-teaser-bg-height: 1000px; // Arbitrary value
$teaser-outer-padding: $spacer-md;
$teaser-inner-padding: $spacer-base;
$teaser-inner-padding-bottom: $spacer-xxl;
.case-teaser {
@extend %page-header;
justify-content: center;
width: 100%;
max-width: 100%;
min-height: 50vh;
&--right-aligned {
justify-content: flex-end;
}
&__punch-in {
@extend %punch-in;
}
}
.case-teaser__wrapper {
display: flex;
justify-content: flex-start;
padding: $container-spacer-x-sm;
}
.case-teaser__body {
display: flex;
flex-basis: 100%;
flex-direction: column;
justify-content: space-between;
background-color: $case-teaser-body-bg;
padding: $teaser-inner-padding;
}
.case-teaser__text {
@extend %teaser-text;
margin-bottom: $spacer-base;
line-height: $big-content-teaser-text-line-height-small;
font-size: $big-content-teaser-text-font-size-small;
hyphens: auto;
}
.case-teaser__header {
padding-bottom: 0;
color: $case-teaser-body-color;
.punch-in {
line-height: 1.31; // fix cut descender
}
}
.case-teaser__caption {
@extend %teaser-caption;
margin-bottom: $spacer-xxs;
height: $spacer-md;
}
//
// Media Queries
//
@media screen and (max-width: $grid-breakpoint-sm) {
.case-teaser {
margin-bottom: $spacer-xxl;
}
.case-teaser__body {
position: relative;
top: $spacer-xxl;
}
}
@media screen and (min-width: $grid-breakpoint-md) {
.case-teaser {
min-height: 50vh;
}
.case-teaser__wrapper {
padding: $spacer-base;
}
}
@media screen and (min-width: $grid-breakpoint-md-lg) {
.case-teaser {
min-height: 75vh;
}
.case-teaser__wrapper {
padding: $spacer-sm;
width: $default-page-layout-width-xl;
max-width: $default-page-layout-content-width-xl;
}
.case-teaser__text {
line-height: $big-content-teaser-text-line-height;
font-size: $big-content-teaser-text-font-size;
hyphens: none;
}
// Variation without stencil Headlines
.case-teaser--simple {
background-position: top left;
}
}
@media screen and (min-width: $grid-breakpoint-lg) {
.case-teaser__body {
flex-basis: 50%;
}
}
import { createElement } from 'complate-stream'
import classNames from 'classnames'
import Button from '../../../../01-atoms/form/button/index.jsx'
export default function CaseListTeaser ({ header, caption, href, linkText, simple, punchIn, withButton, additionalClasses, headerAdditionalClasses, align }, ...children) {
let leftAligned = (align === 'left')
let classname = classNames('case-teaser', { 'case-teaser--simple': simple, 'case-teaser--left-aligned': leftAligned }, additionalClasses)
let headerClass
if (punchIn) {
headerClass = classNames('punch-in', headerAdditionalClasses)
}
return <div class={classname}>
<div class='case-teaser__wrapper'>
<div class='case-teaser__body'>
<div>
<div class='case-teaser__caption'>{caption}</div>
<div>
<div class='case-teaser__header'>
<h1 class={headerClass}>{header}</h1>
</div>
<div class='case-teaser__text'>
{children}
</div>
<div class='case-teaser__footer'>
{ withButton ? <Button href={href} size='small' cta>{linkText}</Button>
: <a href={href} class='link-teaser'>{linkText}</a> }
</div>
</div>
</div>
</div>
</div>
</div>
}
There are no notes for this item.