Design System
Playground Zur Vorlage

Sektionen · ContentBlog-Übersicht

Sektion · 6 Varianten

Blog-Übersicht

sections/BlogUebersicht.astro

Featured, Raster, Filter und Pagination: Featured über dem Raster, Liste, Sidebar mit Kategorien, Filter oben, Suche im Kopf, Mauer.

Notizen

  • Shadcnblocks blog1 (Filter + Grid), blog11 (Sticky-Intro), blog16 (Zeilen). Liberate: Datum und Lesezeit als Meta.
  • Filter-Leiste, Pagination, Seitennav, Suchfeld aus dem Bestand; Filter ist in v1 statisch.

Props

Name Typ Default Notiz
variant "featured-raster" | "liste" | "sidebar" | "filter-oben" | "suche" | "mauer" "featured-raster" 01–06.
surface "nacht" | "paper" "nacht" Pflicht-Paar. 
<BlogUebersicht variant="featured-raster" surface="nacht" />

01 · Featured Raster

Eine große Karte, dann 3 Spalten

blog14. Haarlinie dazwischen.

Nacht

Echos

Alle Notizen.

AlleFlächeIndexDraht

Paper

Echos

Alle Notizen.

AlleFlächeIndexDraht

02 · Liste

Zeilen, kompakte Pagination

blog16. —

Nacht

Echos

Alle Notizen.

Paper

Echos

Alle Notizen.

03 · Sidebar

Kategorien links sticky

Seitennav blog. 3 + 8.

Nacht

Echos

Alle Notizen.

Paper

Echos

Alle Notizen.

04 · Filter oben

Chips, Select, Reset

Filter-Leiste zwei-zeilen. —

Nacht

Echos

Alle Notizen.

AlleFlächeIndexDraht Zurücksetzen

Paper

Echos

Alle Notizen.

AlleFlächeIndexDraht Zurücksetzen

05 · Suche

Suchfeld im Kopf

Suchfeld. —

Nacht

Echos

Alle Notizen.

Paper

Echos

Alle Notizen.

06 · Mauer

columns, break-inside

Galerie mauer. —

Nacht

Echos

Alle Notizen.

AlleFlächeIndexDraht

Paper

Echos

Alle Notizen.

AlleFlächeIndexDraht