Zum Inhalt springen
fend-ui
Vorschau

Feature-Grid

Merkmalsraster mit Tint-Icons, Überschrift und Erklärung. Zwei bis vier Spalten ab lg, auf dem Handy eine Spalte; die Kacheln heben sich beim Hover sanft an.

Live-Beispiel

  • Dienstplanung

    Pläne in Minuten statt Stunden – mit Wünschen, Regeln und Live-Konflikten.

  • Tauschbörse

    Dienste fair tauschen, ohne lange Telefonketten und doppelte Absprachen.

  • Auswertungen

    Überstunden, Abdeckung und Ausfälle auf einen Blick, exportierbar für die Leitung.

  • Rollen und Rechte

    Station, Team und Leitung sehen genau das, was sie für ihre Arbeit brauchen.

Vorschau

Desktop, Tablet und Mobil über den Umschalter in der Kopfzeile. Unterhalb von 768 px greifen die echten Media-Queries im Rahmen.

Code

Der Block bringt keine Datenlogik mit; Inhalte kommen über Props. Links lassen sich über renderLink an den Router der App anschließen.

feature-grid.tsxtsx
import { FeatureGrid } from '@lukasfend/ui/blocks/marketing';
import { CalendarDays } from 'lucide-react';

export function Merkmale() {
  return (
    <FeatureGrid
      columns={3}
      items={[
        {
          icon: <CalendarDays className="size-5" />,
          title: 'Dienstplanung',
          description: 'Pläne in Minuten statt Stunden.',
          tint: 'orange',
        },
      ]}
    />
  );
}