CP Registry

HighlightFrame

Wrapper mit auffälliger Gradient-Border zur visuellen Hervorhebung. Bewusst sparsam einsetzen — pro Seite einer reicht. Innerer Inhalt bleibt regulär (nutzt --color-brand-surface), der Gradient zeigt sich nur am Rand.

Hauptbeispiel — VIP-Signup-Form

Klassischer Conversion-Anwendungsfall: hervorgehobene Anmelde-Card mit allen Feldern, die für die Registrierung nötig sind. Der Gradient-Rahmen lenkt den Blick, der Inhalt bleibt sachlich.

Signup-Card mit aurora-Gradient

10 EUR VIP-Zugang — Username im Voraus reservieren

Deine zukünftige Login-Adresse — kann später nicht geändert werden.

Maximal 16 Zeichen, nur Buchstaben, Zahlen und Bindestriche.

Wofür willst Du ISO Meet nutzen? 
<HighlightFrame gradient="aurora">
  <h2>10 EUR VIP-Zugang — Username im Voraus reservieren</h2>

  <div class="auto-grid" data-cols="2">
    <Input label="Vorname" name="firstName" placeholder="Max" autocomplete="given-name" required />
    <Input label="Nachname" name="lastName" placeholder="Mustermann" autocomplete="family-name" required />
  </div>

  <Input
    label="E-Mail"
    type="email"
    name="email"
    placeholder="max@example.de"
    hint="Deine zukünftige Login-Adresse — kann später nicht geändert werden."
    autocomplete="email"
    required
  />

  <Input
    label="Welchen Username möchtest Du reservieren?"
    name="username"
    placeholder="max-mustermann"
    hint="Maximal 16 Zeichen, nur Buchstaben, Zahlen und Bindestriche."
    pattern="[a-zA-Z0-9-]{1,16}"
    required
  />

  <CheckboxCardGroup legend="Wofür willst Du ISO Meet nutzen?" columns={1}>
    <CheckboxCard name="usage" value="hire" label="Dienstleistungen anbieten und gebucht werden" />
    <CheckboxCard name="usage" value="book" label="Talente finden und für Projekte buchen" />
  </CheckboxCardGroup>

  <div style="display: flex; justify-content: center; margin-top: 0.5rem;">
    <Button size="lg">Weiter zum Checkout</Button>
  </div>
</HighlightFrame>

Gradient-Presets

Sechs vorbereitete Gradient-Stile für unterschiedliche Stimmungen. brand nutzt das Brand-Token und passt sich automatisch an Theme-Switches an.

Alle Presets

aurora

Pink, Apricot, Limette — warmer Look

sunset

Rot, Orange, Magenta — energisch

ocean

Blau, Cyan, Violett — kuehl & ruhig

rainbow

Conic-Gradient, alle Farben — verspielt

brand

Brand-Primary mit Hue-Shift — konsistent

forest

Grün, Türkis, Blau — natürlich

<HighlightFrame gradient="aurora">…</HighlightFrame>
<HighlightFrame gradient="sunset">…</HighlightFrame>
<HighlightFrame gradient="ocean">…</HighlightFrame>
<HighlightFrame gradient="rainbow">…</HighlightFrame>
<HighlightFrame gradient="brand">…</HighlightFrame>
<HighlightFrame gradient="forest">…</HighlightFrame>

Border-Dicke

Drei Stufen zur Anpassung der visuellen Wucht. sm ist subtil, lg setzt einen starken Akzent. Default ist md.

borderWidth-Varianten

borderWidth: sm

Schmaler 2px-Rahmen

borderWidth: md

Default 4px

borderWidth: lg

Wuchtige 6px

<HighlightFrame borderWidth="sm">Subtil</HighlightFrame>
<HighlightFrame borderWidth="md">Default</HighlightFrame>
<HighlightFrame borderWidth="lg">Auffällig</HighlightFrame>

Animation beim Hover

Mit animate verschiebt sich der Gradient sanft beim Hover. Respektiert prefers-reduced-motion automatisch — Nutzer mit reduzierter Animation sehen keinen Effekt.

Animierter Gradient

Hover über mich

Der Gradient verschiebt sich sanft. Reduced-Motion-Nutzer sehen keinen Effekt.

<HighlightFrame gradient="rainbow" animate>
  <h3>Hover über mich</h3>
</HighlightFrame>

Custom-Gradient

Brauchst Du einen Stil außerhalb der Presets? gradient="custom" mit customGradient akzeptiert jeden CSS-Gradient-Wert.

Eigener Gradient

Custom — Orange zu Violett, horizontal

Jeder gueltige CSS-Gradient ist erlaubt — linear, radial, conic.

<HighlightFrame
  gradient="custom"
  customGradient="linear-gradient(90deg, oklch(70% 0.18 30), oklch(70% 0.18 280))"
>
  Inhalt mit custom-Gradient
</HighlightFrame>

Redakteurshinweise

Wann einsetzen

  • Conversion-Bereiche: VIP-Signup, Pre-Booking, Newsletter mit Anreiz
  • Featured-CTAs: ein einzelner Tarif oder Aktion soll auffallen
  • Limited-Time-Angebote: visueller Anker für Aktions-Boxen

Wann NICHT

  • Mehrere pro Seite — verliert Wirkung bei Wiederholung
  • Fehler oder Warnungen — dafür ist Alert da
  • Standard-Cards in Listen — dafür ist Card da
  • Hero-Section-Ersatz — Hero hat eigene Visual-Hierarchy

Inhaltliche Empfehlung

  • Kurze, konkrete Headline (max 8 Worte)
  • Genau ein primärer CTA — keine Wahl-Paralyse
  • Form-Felder kompakt, mit klaren Hints

Mobile / A11y

  • Padding skaliert automatisch über Container Query (32rem Breakpoint)
  • Animation respektiert prefers-reduced-motion
  • Focus-Within-Outline für Keyboard-Navigation in Forms
  • Inhalt nutzt reguläre Surface-Farbe — Light/Dark automatisch