DokumentationTeaser
Teaserboxen und -buttons führen Nutzer gezielt zu weiterführenden Inhalten und unterstützen die Navigation innerhalb der Website. Sie heben relevante Themen und Handlungsoptionen hervor und schaffen klare Einstiegspunkte in nachgelagerte Seiten und Bereiche.
Teaserbox
{{!-- ==========================================================================
TEASERBOX
Structure divided into individually removable blocks.
Structure:
- Image with caption (optional)
- Icon (optional)
- Topline (optional)
- Headline (required)
- Text (required)
========================================================================== --}}
{{>
components/card-default
icon="hwki-erde"
}}
{{!-- ==========================================================================
END TEASERBOX
========================================================================== --}}
Teaserbox
Option: Bild oder Icon
Option Topline
Headline
Text
Teaser komplett
<article class="card">
<figure>
<img class="card-img-top" src="[...]" alt="[...]">
<figcaption class="caption-inside text-end">[...]</figcaption>
</figure>
<div class="card-body">
<div class="hwk-icon">
<i class="hwki hwki-erde" aria-hidden="true"></i>
</div>
<div class="card-content">
<h3 class="card-title">
<span class="topline">[Topline] </span>
[Überschrift]
</h3>
<p class="card-text mb-0">[Text]</p>
</div>
<a href="[...]" class="stretched-link">
<span class="visually-hidden">Mehr erfahren</span>
</a>
</div>
</article>
Teaser optional
<article class="card">
<figure>
<img class="card-img-top" src="[...]" alt="[...]">
<figcaption class="caption-inside text-end">[...]</figcaption>
</figure>
<div class="card-body">
<div class="hwk-icon">
<i class="hwki hwki-erde" aria-hidden="true"></i>
</div>
<div class="card-content">
<h3 class="card-title">
<span class="topline">[Topline] </span>
[Überschrift]
</h3>
<p class="card-text mb-0">[Text]</p>
</div>
<a href="[...]" class="stretched-link">
<span class="visually-hidden">Mehr erfahren</span>
</a>
</div>
</article>
Variationsmöglichkeiten im Layout
{{>
components/card-default
}}
{{>
components/card-default
image="./uploads/placeholder-group.jpg"
topline="Instrop"
title="Viele Roseren schlonderad"
text="Manche ziemlich hansig Kapfens qualimat ein Destement. Manche ulano Jopf hemeder jessenbert eine faulenske Maosenhast hulloper sesemal der zerschlosen."
}}
{{>
components/card-default
image="./uploads/placeholder-woman.jpg"
topline="Ziemlich hansig"
title="Die ziemlich kraaster Kopf hulloper sesemal der zerschlosen"
text="Viele Roseren schlonderad prasterwan der nildersentar Instrop. Die ziemlich kraaster Kopf Saumen unschma hulloper sesemal der zerschlosen Laspaab"
}}
{{!-- Variant 2: without image, without topline --}}
{{>
components/card-default
image=""
icon="hwki-erde"
topline=""
title="Außenwirtschaft"
text="Wer Geschäfte im Ausland tätigen möchten, kann sich bei uns kostenlos und individuell beraten lassen."
}}
{{!-- Variant 3: without image, with topline --}}
{{>
components/card-default
image=""
icon="hwki-frau"
topline="Beratung"
title="Frauenförderung"
text="Gusen Fertelmann jerting klamm gerangen. In Tellopersch verbasen kunnen und mehren Pfrunten in Kaläntherprainen kunnten."
}}
{{!-- Variant 4: without image, without icon --}}
{{>
components/card-default
image=""
topline="Datenschutz"
title="Außenwirtschaft"
text="Wer Geschäfte im Ausland tätigen möchten, kann sich bei uns kostenlos und individuell beraten lassen."
}}
Teaserbox Kurs
{{!-- ==========================================================================
TEASERBOX KURS
Structure:
- Image
- Option type: Hybrid, Online, In-person
- Topline
- Headline
- Icon list: Duration, Location, Start
- Button
========================================================================== --}}
{{> components/card-course }}
{{!-- ==========================================================================
END TEASERBOX KURS
========================================================================== --}}
Teaserbox Kurs
Bild
Option Art: Hybrid, Online, Präsenz
Topline
Headline
Icon-Liste: Dauer, Ort, Start
Button
Kontaktbox
{{> components/card-contact }}
{{!-- ==========================================================================
END KONTAKTBOX
========================================================================== --}}
Kontaktbox
Bild
Topline
Headline
Icon-Liste: Dauer, Ort, Start
Button
Teaserbutton
{{!-- ==========================================================================
TEASERBUTTON
div.card.btn
Structure:
- Icon
- Topline (optional)
- Headline (required)
- Text (required)
========================================================================== --}}
{{> components/card-btn }}
{{!-- ==========================================================================
END TEASERBOX
========================================================================== --}}
{{>
components/card-btn
topline=""
text="Die ziemlich kraaster Kopf Saumen unschma hulloper sesemal der zerschlosen Laspaab. Manche ziemlich hansig Kapfens qualimat ein Destement. "
}}
Teaserbutton
Icon
Option Topline
Headline
Text