CP Registry

Teaser

Inhaltskachel mit Bild, Kategorie-Tag, Titel und Fließtext. Drei Layout-Varianten: Bild links, Bild rechts und Bild oben. Nutzt Container Queries – das Layout passt sich dem verfügbaren Platz an, nicht der Browserbreite.

Bild links (Standard)

Klassische Variante für Redaktions- und Newsseiten. Das Bild nimmt etwa ein Drittel der Breite ein; Text und Titel stehen rechts daneben. Auf kleinen Bildschirmen stapelt sich der Teaser vertikal.

Neuigkeit mit Bild links

Aktuell

Neues Solarfeld Nord in Betrieb genommen

Stadtwerke Musterstadt hat sein groesstes Photovoltaik-Projekt eröffnet: Das neue Solarfeld am Nordring produziert jährlich rund 4,2 GWh – genug Strom für 1.200 Haushalte in der Region.

<Teaser
  title="Neues Solarfeld Nord in Betrieb genommen"
  tag="Aktuell"
  href="/news/solarfeld-nord-2026"
  layout="image-left"
>
  <p>
    Stadtwerke Musterstadt hat sein groesstes Photovoltaik-Projekt
    eroefffnet: Das neue Solarfeld am Nordring produziert jährlich
    rund 4,2 GWh – genug Strom für 1.200 Haushalte.
  </p>
</Teaser>

Bild rechts

Gespiegelte Variante – nützlich, wenn mehrere Teaser untereinander abwechseln sollen, um visuell mehr Rhythmus zu erzeugen.

Tipp mit Bild rechts

Energietipps

Energiekosten senken: 7 Tipps für den Sommer

Mit einfachen Maßnahmen können Sie Ihren Stromverbrauch in den Sommermonaten spuerbar reduzieren. Wir zeigen, wie Lueftungsroutinen, Rollaeden und energieeffiziente Geräte helfen.

<Teaser
  title="Energiekosten senken: 7 Tipps für den Sommer"
  tag="Energietipps"
  href="/ratgeber/energiesparen-sommer"
  layout="image-right"
>
  <p>
    Mit einfachen Maßnahmen können Sie Ihren Stromverbrauch in
    den Sommermonaten spuerbar reduzieren. Wir zeigen, wie.
  </p>
</Teaser>

Bild oben (Kachel-Layout)

Ideal für Kachel-Grids mit drei oder vier Einträgen nebeneinander. Das Bild nimmt die volle Breite der Kachel ein; Titel und Text folgen darunter.

Drei Teaser als Grid

Produkt

Oekostrom-Tarif

Gruener Strom direkt aus Musterstadt – faire Preise, keine Mindestlaufzeit.

<div class="auto-grid" data-cols="3">
  <Teaser title="Oekostrom-Tarif" tag="Produkt" href="/tarife/oekostrom" layout="image-top">
    <p>Gruener Strom direkt aus Musterstadt – faire Preise, keine Mindestlaufzeit.</p>
  </Teaser>
  <Teaser title="Glasfaser-Ausbau 2026" tag="Infrastruktur" href="/news/glasfaser" layout="image-top">
    <p>Ab Herbst 2026 erhalten weitere 8.000 Haushalte einen Glasfaseranschluss.</p>
  </Teaser>
  <Teaser title="Wärmepumpen-Förderung" tag="Förderung" href="/service/waermepumpe" layout="image-top">
    <p>Bis zu 70 % Förderung beim Umstieg auf eine Wärmepumpe. Jetzt informieren.</p>
  </Teaser>
</div>

Ohne Link (rein informativ)

Ein Teaser ohne href-Prop ist nicht anklickbar, hat keinen Hover-Effekt und rendert ohne <a>-Element. Sinnvoll für statische Informationsblocks im Redaktionssystem.

Nicht klickbarer Infoblock

Info

Wichtige Hinweise zur Abrechnung

Ihre Jahresabrechnung wird jeweils zum 31. März verschickt. Bitte prüfen Sie Ihre hinterlegte E-Mail-Adresse im Kundenkonto, damit keine Post verloren geht.

<Teaser title="Wichtige Hinweise zur Abrechnung" tag="Info">
  <p>
    Ihre Jahresabrechnung wird jeweils zum 31. März verschickt.
    Bitte prüfen Sie Ihre hinterlegte E-Mail-Adresse im Kundenkonto.
  </p>
</Teaser>

Redakteur-Hinweise

Empfehlungen für konsistente Teaser-Inhalte.

Element Empfehlung
Titel4–10 Wörter. Konkret, nicht generisch. „Glasfaser-Ausbau startet im Herbst“ statt „Neuigkeiten zum Thema Internet“.
Anrisstext1–2 Sätze, max. 160 Zeichen. Den wichtigsten Fakt zuerst. Keine „Hier erfahren Sie mehr“-Floskeln.
TagKategorie oder Themenbereich, 1 Wort. „Aktuell“, „Produkt“, „Service“. Einheitlich innerhalb einer Seite.
BildMin. 800×600px (4:3). Motiv darf angeschnitten werden (object-fit: cover). Kein Text im Bild.
Layout-MixBild-links/rechts abwechseln für Rhythmus. Bild-oben für 3er-Grids. Gleiche Textlängen in einer Reihe.

Installation

cp-components add teaser