Pulse Grid Cards

Drei performante Card-Varianten mit pulsierendem Gitter-Hintergrund. Nur opacity und transform werden animiert — GPU-composited, kein Reflow, 0 extra HTTP-Requests.

---

Variante 1 — SVG grid + Radial Orb · Light

Empfohlen für Feature-Cards, Hero-Sektionen und Service-Übersichten.

<PulseGridCard
  variant="v1"
  eyebrow="Identity & Access"
  title="Federated Identity Management"
  badge={<Badge variant="primary" dot>IAM Ready</Badge>}
>
  Zentralisiertes SSO für klinische Umgebungen — kompatibel mit
  IHE XUA, HL7 SMART on FHIR und bestehenden AD-Strukturen.
</PulseGridCard>

Identity & Access

Federated Identity Management

Zentralisiertes SSO für klinische Umgebungen — kompatibel mit IHE XUA, HL7 SMART on FHIR und bestehenden AD-Strukturen.

IAM Ready

---

Variante 2 — Pure CSS gradient grid + Vignette · Light

Kein SVG anywhere. Minimalistisch, ideal für Compliance- und Audit-Sektionen.

<PulseGridCard
  variant="v2"
  eyebrow="Compliance"
  title="DSGVO-konforme Session-Steuerung"
  badge={<Badge variant="success" dot>DSGVO-konform</Badge>}
>
  Automatische Session-Invalidierung, Audit-Log und rollenbasiertes
  Zugriffsmodell nach dem Principle of Least Privilege.
</PulseGridCard>

Compliance

DSGVO-konforme Session-Steuerung

Automatische Session-Invalidierung, Audit-Log und rollenbasiertes Zugriffsmodell nach dem Principle of Least Privilege.

DSGVO-konform

---

Variante 3 — Dark Card · SVG grid + Conic Glow Sweep

Für API-Dokumentation, Token-Endpoints und technische Feature-Highlights.

<PulseGridCard
  variant="v3"
  eyebrow="API Access"
  title="FHIR R4 Token Endpoint"
  badge={<Badge variant="dark" dot>R4 Endpoint active</Badge>}
>
  OAuth 2.0 Bearer Tokens mit kurzlebiger TTL, automatischer Rotation
  und scoped Permissions auf Ressourcentyp-Ebene.
</PulseGridCard>

API Access

FHIR R4 Token Endpoint

OAuth 2.0 Bearer Tokens mit kurzlebiger TTL, automatischer Rotation und scoped Permissions auf Ressourcentyp-Ebene.

R4 Endpoint active

---

Setup

1. Dateien ablegen

src/
  components/
    PulseGridCard/
      PulseGridCard.tsx   ← Komponente
  css/
    custom.css            ← @import './azuma-grid.css' hinzufügen
    azuma-grid.css        ← Keyframes + CSS Custom Properties
tailwind.config.js        ← Azuma Tokens

2. Google Fonts in docusaurus.config.js

// docusaurus.config.js
module.exports = {
  headTags: [
    {
      tagName: 'link',
      attributes: {
        rel: 'preconnect',
        href: 'https://fonts.googleapis.com',
      },
    },
    {
      tagName: 'link',
      attributes: {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Figtree:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap',
      },
    },
  ],
};

3. Tailwind in Docusaurus aktivieren

Falls noch nicht eingerichtet:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Dann in docusaurus.config.js das postcss-Plugin registrieren oder das Community-Plugin docusaurus-tailwindcss verwenden:

npm install docusaurus-tailwindcss

plugins: ['docusaurus-tailwindcss'],

---

Props

Prop	Typ	Default	Beschreibung
variant	'v1' | 'v2' | 'v3'	'v1'	Grid-Variante
title	string	—	Card-Heading (Space Grotesk xl)
eyebrow	string	—	Overline-Label (optional)
badge	ReactNode	—	Badge-Slot unten (optional)
children	ReactNode	—	Body-Text
className	string	''	Zusätzliche Tailwind-Klassen

Badge Props

Prop	Typ	Default	Beschreibung
variant	'primary' | 'success' | 'warning' | 'error' | 'dark'	'primary'	Farbschema
dot	boolean	false	Animierter Status-Punkt