Hero-Area (Right-Column Small HL)
CODE
×
HTML
<div class='hero-area-right-col-2'> <div class='right-hero-teaser-small red'><span class='teaser-label-white-small'>Kanton Bern</span><h2 class="hero-area-small important">Dies ist eine längere zweizeilige Headline</h2></div> <div class='right-hero-teaser-small'><span class='teaser-label-small'>E-Service</span><h2 class="hero-area-small">Ausweise</h2></div> <div class='right-hero-teaser-small big'><span class='teaser-label-small'>Informationen</span><h2 class="hero-area-small">Abstimmungen, Wahlen und politische Geschäfte</h2></div> </div>
CSS
@media screen and (max-width: 1119px) { div.hero-area-right-col-2 { clear:both; width: 100%; height: auto; } } 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); } span.teaser-label-white { display:block; font-family: 'Roboto'; font-style: normal; font-weight: 500; 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(255,255,255,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); } h2.hero-area.important { font-family: 'Roboto'; font-style: normal; font-weight: 400; color: rgba(255,255,255,1); margin-bottom: 30px; margin-left: 25px; } div.right-hero-teaser-small.red { background-color: var(--red); max-width: 800px; } div.right-hero-teaser-small { background-color: rgba(247,233,210,1); cursor:pointer; position:relative; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; margin-bottom: 17px; padding-top: 27px; padding-right: 25px; padding-bottom: 27px; padding-left: 25px; width: 100%; height: 143px; } div.right-hero-teaser-small.big { white-space: normal; height: 303px; } div.right-hero-teaser-small.red:hover, div.right-hero-teaser-small.red:focus { background-color: var(--dark-red); } div.right-hero-teaser-small:hover, div.right-hero-teaser-small:focus { background-color: rgba(242,224,195,1); } div.right-hero-teaser-small.red:last-of-type { margin-bottom: 0; } div.right-hero-teaser-small:last-of-type { margin-bottom: 0; } div.right-hero-teaser-small.big:last-of-type { margin-bottom: 0; } @media screen and (max-width: 1119px) { div.right-hero-teaser-small.big { white-space:nowrap; } div.hero-area-right-col-2 > div.right-hero-teaser-small.red { float: left; margin-right: 17px; width: calc(50% - 8.5px); } div.hero-area-right-col-2 > div.right-hero-teaser-small { float: right; width: calc(50% - 8.5px); } div.hero-area-right-col-2 > div.right-hero-teaser-small.big { clear: both; width: 100%; height: 143px; } } @media screen and (max-width: 767px) { div.right-hero-teaser-small { padding-top: 25px; padding-right: 20px; padding-bottom: 25px; padding-left: 20px; } div.right-hero-teaser-small.big { white-space: normal; height: auto; } div.hero-area-right-col-2 > div.right-hero-teaser-small.red { clear: both; margin-right: 0px; width: 100%; } div.hero-area-right-col-2 > div.right-hero-teaser-small { clear: both; 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); } div.right-hero-teaser-small { background-color: rgba(247,233,210,1); cursor:pointer; position:relative; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; margin-bottom: 17px; padding-top: 27px; padding-right: 25px; padding-bottom: 27px; padding-left: 25px; width: 100%; height: 143px; } div.right-hero-teaser-small:hover, div.right-hero-teaser-small:focus { background-color: rgba(242,224,195,1); } div.right-hero-teaser-small:last-of-type { margin-bottom: 0; } @media screen and (max-width: 767px) { div.right-hero-teaser-small { padding-top: 25px; padding-right: 20px; padding-bottom: 25px; padding-left: 20px; } } 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 (Right-Column Small HL)
×
Kanton Bern
Dies ist eine längere zweizeilige Headline
E-Service
Ausweise
Informationen
Abstimmungen, Wahlen und politische Geschäfte