Design System
Playground Zur Vorlage

Komponenten · KartenService-Card quer

Komponente · 6 Varianten

Service-Card quer

components/ServiceCardQuer.astro

Horizontale Service-Card: Icon oder Bild links, Satz rechts, Pfeil-Link. Als Zeile in Haarlinie, im Fond oder mit Kante.

Notizen

  • Bestand Service-Card: bild, zellen, pfeil, alle vertikal.
  • Wenn Approved: Variant quer in ServiceCard, keine zweite Komponente.

Props

Name Typ Default Notiz
variant "icon-links" | "bild-links" | "bild-rechts" | "zeile" | "fond" | "kante" "icon-links" 01–06.
surface "nacht" | "paper" "nacht" Pflicht-Paar.
<ServiceCardQuer variant="icon-links" surface="nacht" />

01 · Icon links

2 + 10 Spalten

Service-Card zellen. Icon lg.

Nacht

Fläche

Website in vierzehn Tagen. Ein Slot, ein Draht, kein Baukasten.

Paper

Fläche

Website in vierzehn Tagen. Ein Slot, ein Draht, kein Baukasten.

02 · Bild links

5 + 7, 4:3

Über-uns-Teaser. Bild bleibt Bild.

Nacht

Fläche

Website in vierzehn Tagen. Ein Slot, ein Draht, kein Baukasten.

Paper

Fläche

Website in vierzehn Tagen. Ein Slot, ein Draht, kein Baukasten.

03 · Bild rechts

Spiegel

02. order-2.

Nacht

Fläche

Website in vierzehn Tagen. Ein Slot, ein Draht, kein Baukasten.

Paper

Fläche

Website in vierzehn Tagen. Ein Slot, ein Draht, kein Baukasten.

04 · Zeile

Icon, Titel, Pfeil in einer Linie

Service-Liste. Für Listen.

Nacht

Paper

05 · Fond

granit-100 / 900

Karten. p-8.

Nacht

Fläche

Website in vierzehn Tagen. Ein Slot, ein Draht, kein Baukasten.

Paper

Fläche

Website in vierzehn Tagen. Ein Slot, ein Draht, kein Baukasten.

06 · Kante

Haarlinie um alles

Feature-Card kante. Kein Fond.

Nacht

Fläche

Website in vierzehn Tagen. Ein Slot, ein Draht, kein Baukasten.

Paper

Fläche

Website in vierzehn Tagen. Ein Slot, ein Draht, kein Baukasten.