Text-Teaser sand
CODE
×
HTML
<div class='teaser-sand-refused'> <span class='teaser-label'>Schutz vor Hitzewelle</span> <h5>Dies ist eine Headline (H5)</h5> <p class='splitter-text'>Liberer clita kasd gubergren, no takimata sanctus est Lorem ipsum honem ex labore sit amet.</p> <a class='text-link-2' href='#'>www.be.ch / rathaus</a> </div>
CSS
@media screen and (max-width: 767px) { div.teaser-sand-refused { margin-right: 0; 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: var(--black); } a.text-link-2 { text-decoration:none; color: var(--black); font-family: 'Roboto'; font-style: normal; font-weight: 300; border-bottom: 1px solid rgba(0,0,0,1); display:inline-block; cursor:pointer; line-height: 125%; vertical-align:top; margin-top: 10px; } h5 { font-size: 21px; line-height: 25px; font-family: 'Roboto'; font-style: normal; font-weight: 300; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; } p.splitter-text { font-family: 'Roboto'; font-style: normal; font-weight: 300; font-size: 16px; line-height: 26px; line-height: 24px; color: var(--black); margin-top: 10px; margin-bottom: 0px; width: auto; max-width: 500px; } a.text-link-2:hover, a.text-link-2:focus { border-bottom: var(--bottom-line-1px-red); } div.teaser-sand-refused:hover > a.text-link-2, div.teaser-sand-refused:focus > a.text-link-2 { border-bottom: 1px solid rgba(234,22,31,1); } @media screen and (max-width: 1119px) { h5 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } } @media screen and (max-width: 767px) { h5 { font-size: 18px; line-height: 21px; } } a { color: var(--black); } a:hover, a:focus { color: var(--black); } p { color: var(--black); font-family: 'Roboto'; font-style: normal; font-weight: 300; margin-bottom: 15px; margin-top: -2px; max-width: 800px; font-size: 16px; line-height: 26px; } @media screen and (max-width: 767px) { p { font-size: 15px; line-height: 24px; } }
JS
Text-Teaser sand
Letzte Änderung: 24.06.2021 - 07:44 Uhr
×
Schutz vor Hitzewelle
Dies ist eine Headline (H5)
Liberer clita kasd gubergren, no takimata sanctus est Lorem ipsum honem ex labore sit amet.
www.be.ch / rathaus