Hero-Area (Sub-Row)
CODE
×
HTML
<div class='hero-area-sub clearfix'> <div class='sub-hero-teaser'><span class='teaser-label'>E-Service</span><h2 class="hero-area">Statistikportal</h2></div> <div class='sub-hero-teaser v2'><span class='teaser-label'>E-Service</span><h2 class="hero-area">Karten (Geoportal)</h2></div> <div class='sub-hero-teaser v2 v3'><span class='teaser-label'>Kanton Bern</span><h2 class="hero-area">Stellenmarkt</h2></div> </div>
CSS
span.teaser-label { display:block; font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 26px; letter-spacing: 0.01rem; word-spacing: 0.025rem; line-height: 125%; margin-bottom: 15px; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; color: rgba(0,0,0,1); } h2.hero-area { font-size: 34px; line-height: 41px; font-family: 'Roboto'; font-style: normal; font-weight: 300; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: rgba(0,0,0,1); position:absolute; left:0; bottom:0; overflow:hidden; text-overflow:ellipsis; margin-bottom: 30px; margin-left: 25px; width: calc(100% - 48px); } div.clearfix:before { display:table-cell; } div.clearfix:after { position:-webkit-sticky;position:sticky; } .context-column + .clearfix { height: 15px; width: 100%; display: inline-block; } div.sub-hero-teaser { cursor:pointer; background-color: rgba(247,233,210,1); float:left; position:relative; white-space:nowrap; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; margin-right: 17px; padding-top: 30px; padding-right: 25px; padding-bottom: 30px; padding-left: 25px; width: calc(33.3% - 11.34px); height: 143px; } div.sub-hero-teaser:hover, div.sub-hero-teaser:focus { background-color: rgba(242,224,195,1); } div.sub-hero-teaser:last-of-type { margin-right: 0; } @media screen and (max-width: 1119px) { div.sub-hero-teaser { margin-bottom: 17px; width: 100%; } } span.teaser-label { display:block; font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 26px; letter-spacing: 0.01rem; word-spacing: 0.025rem; line-height: 125%; margin-bottom: 15px; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; color: rgba(0,0,0,1); } h2.hero-area { font-size: 34px; line-height: 41px; font-family: 'Roboto'; font-style: normal; font-weight: 300; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: rgba(0,0,0,1); position:absolute; left:0; bottom:0; overflow:hidden; text-overflow:ellipsis; margin-bottom: 30px; margin-left: 25px; width: calc(100% - 48px); }
JS
Hero-Area (Sub-Row)
×
E-Service
Statistikportal
E-Service
Karten (Geoportal)
Kanton Bern
Stellenmarkt