1. DAKOSY
  2. Pattern Library
  3. Teaser Card Container

Artikel

h1.display-2 headline

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

References

Das Teaser-Grid bietet die Möglichkeit unterschiedliche Kacheln flexibel in einem Grid darzustellen. Die Flexibilität beschränkt sich zum Start des Magazins auf Teaser-Kacheln, die mit einem News-Datensatz verknüpft sind und eine zusätzliche Kachel für Aktuelle Meldungen und einen LinkedIn-Beitrag. Zum Ausbau der Webseite sind weitere Modi, Größen und Kachel-Arten vorgesehen, die hier noch nicht weiter beschrieben sind.

Jira-Ticket: Modul | Teaser-grid

Invision/Figma Screen: Teaser KachelnTeaser Kachel: Aktuelle MeldungenTeaser Card Container

Css-Class: dak-teaser-card-item dak-teaser-card-container

h2. display-2. Überschrift

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

KICKER

Text Card

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

w/image circle 33%

Copy. Teaser

grün mit einem kleinem Bild

w/image circle 50%

Teaser

w/image square 33% Breite mit Bild ohne Text-Hintergrunden (heller Text)

Text

w/image square 50% Breite mit Bild ohne Text-Hintergrunden (dunkler Text)

Text

w/image square 50% Breite mit Bild white

Teaser

category title
kciker

Teaser Card w/title 66%

Teaser Card vom Typ Title mit 66% Breite

Magazin

Text Card w/Image Small 25%

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni

Text Card w/ImageSmall 33%

Text Card w/ImageSmall 33%

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni

Text Card w/ImageSmall 50%

Text Card w/ImageSmall 50%

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Text Card w/ImageSmall 66%

Text Card w/ImageSmall 66%

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni

TextCard w/image background 25%

TextCard w/image background 25% and color DARK

orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

Text Card w/Image Background 66%

Text Card w/Image Background 66% and color LIGHT

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni

TextCard w/image background 33%

TextCard w/image background 33% and color DARK

Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo

TextCard w/Imagebackground 50%

TextCard w/Imagebackground 50% and Color LIGHT

orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

Text Card w/ImageSmall 20%

Text Card w/ImageSmall 20%

Text Card w/ImageSmall 20%

Text card w/Image background 50% reduced height

Text card w/Image background 50% reduced height

Text card w/Image background 50% reduced height

lorem ipsum

Teaser Cards mit 20% Breite

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis

Text Card

Text Card

Text Card

Text Card

Text Card

Text Card

Text Card