card

Darstellung

Titel

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor

Titel

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor

Label

Titel

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor

Label

Titel

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor

Label

Code

<div class="four-cols env-sur spacing-bottom-xl">

<a href="" class="card bg-sur env-sur" aria-label="Titel - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor">
<div class="card-image-wrap">
<img loading="lazy" decoding="async" src="https://wp6.staudeintern.de/base-template-v4/wp-content/uploads/sites/79/stadt-3-1024x576.webp" alt="Skyline von Franktur" width="1024" height="576" class="alignnone size-large wp-image-3543" srcset="https://wp6.staudeintern.de/base-template-v4/wp-content/uploads/sites/79/stadt-3-1024x576.webp 1024w, https://wp6.staudeintern.de/base-template-v4/wp-content/uploads/sites/79/stadt-3-300x169.webp 300w, https://wp6.staudeintern.de/base-template-v4/wp-content/uploads/sites/79/stadt-3-768x432.webp 768w, https://wp6.staudeintern.de/base-template-v4/wp-content/uploads/sites/79/stadt-3-1536x864.webp 1536w, https://wp6.staudeintern.de/base-template-v4/wp-content/uploads/sites/79/stadt-3.webp 1920w" sizes="auto, (max-width: 1024px) 100vw, 1024px" />
</div>
<div class="card-content-wrap">
<p class="hl4 icon-right"><span class="icn arrow-6" aria-hidden="true"></span>Titel</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
</div>
</a>

<a href="" class="card bg-main env-main" aria-label="Titel - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor">
<div class="card-image-wrap">
<img loading="lazy" decoding="async" src="https://wp6.staudeintern.de/base-template-v4/wp-content/uploads/sites/79/freigestellte-person.webp" alt="" width="512" height="1007" class="alignnone size-full wp-image-3536" srcset="https://wp6.staudeintern.de/base-template-v4/wp-content/uploads/sites/79/freigestellte-person.webp 512w, https://wp6.staudeintern.de/base-template-v4/wp-content/uploads/sites/79/freigestellte-person-153x300.webp 153w" sizes="auto, (max-width: 512px) 100vw, 512px" />
</div>
<div class="card-content-wrap">
<p class="hl4 icon-right"><span class="icn arrow-6" aria-hidden="true"></span>Titel</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
</div>
<div class="label">Label</div>
</a>

<a href="" class="card bg-sec env-sec" aria-label="Titel - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor">
<div class="card-image-wrap">
<img loading="lazy" decoding="async" src="https://wp6.staudeintern.de/base-template-v4/wp-content/uploads/sites/79/image-512x512-1.jpg" alt="" width="512" height="512" class="alignnone size-full wp-image-3208" srcset="https://wp6.staudeintern.de/base-template-v4/wp-content/uploads/sites/79/image-512x512-1.jpg 512w, https://wp6.staudeintern.de/base-template-v4/wp-content/uploads/sites/79/image-512x512-1-300x300.jpg 300w, https://wp6.staudeintern.de/base-template-v4/wp-content/uploads/sites/79/image-512x512-1-150x150.jpg 150w" sizes="auto, (max-width: 512px) 100vw, 512px" />
</div>
<div class="card-content-wrap">
<p class="hl4 icon-right"><span class="icn arrow-6" aria-hidden="true"></span>Titel</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
</div>
<div class="label env-error">Label</div>
</a>

<a href="" class="card" aria-label="Titel - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor">
<div class="card-image-wrap">
<img loading="lazy" decoding="async" src="https://wp6.staudeintern.de/base-template-v4/wp-content/uploads/sites/79/hero-image-desktop-1024x683.webp" alt="" width="1024" height="683" class="alignnone size-large wp-image-3207" srcset="https://wp6.staudeintern.de/base-template-v4/wp-content/uploads/sites/79/hero-image-desktop-1024x683.webp 1024w, https://wp6.staudeintern.de/base-template-v4/wp-content/uploads/sites/79/hero-image-desktop-300x200.webp 300w, https://wp6.staudeintern.de/base-template-v4/wp-content/uploads/sites/79/hero-image-desktop-768x512.webp 768w, https://wp6.staudeintern.de/base-template-v4/wp-content/uploads/sites/79/hero-image-desktop-1536x1024.webp 1536w, https://wp6.staudeintern.de/base-template-v4/wp-content/uploads/sites/79/hero-image-desktop.webp 1800w" sizes="auto, (max-width: 1024px) 100vw, 1024px" />
</div>
<div class="card-content-wrap">
<p class="hl4 icon-right"><span class="icn arrow-6" aria-hidden="true"></span>Titel</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
</div>
<div class="label">Label</div>
<div class="icon-bg"><div class="icn fettes-kind"></div></div>
</a>

</div>