Cards · GEDISA UI

Verwendung

Eine Card fasst zusammengehörende Inhalte zusammen. Überschrift, Text und Aktionen werden als Slot übergeben.

Standard-Card

Profil vervollständigen

Ergänze Adresse und Telefonnummer, damit dich dein Team erreichen kann.

blade

<gedisa:card class="max-w-sm">
    <gedisa:heading size="lg">Profil vervollständigen</gedisa:heading>
    <gedisa:text class="mt-2">Ergänze Adresse und Telefonnummer, damit dich dein Team erreichen kann.</gedisa:text>
</gedisa:card>

Varianten

Die Standardvariante steht auf weißem Grund mit feinem Rahmen. subtle ist leicht abgesetzt, brand nutzt den Markenverlauf und hellen Text.

Default, Subtle und Brand

Default

Weiße Fläche mit feinem Rahmen.

Subtle

Leicht abgesetzte Fläche für ruhige Bereiche.

Brand

Markenverlauf für hervorgehobene Hinweise.

blade

<gedisa:card class="max-w-xs">
    <gedisa:heading size="lg">Default</gedisa:heading>
    <gedisa:text class="mt-2">Weiße Fläche mit feinem Rahmen.</gedisa:text>
</gedisa:card>
<gedisa:card variant="subtle" class="max-w-xs">
    <gedisa:heading size="lg">Subtle</gedisa:heading>
    <gedisa:text class="mt-2">Leicht abgesetzte Fläche für ruhige Bereiche.</gedisa:text>
</gedisa:card>
<gedisa:card variant="brand" class="max-w-xs">
    <gedisa:heading size="lg" class="!text-gedisa-text-white">Brand</gedisa:heading>
    <p class="mt-2">Markenverlauf für hervorgehobene Hinweise.</p>
</gedisa:card>

Mit Close-Button

gedisa:card.close platziert einen Button oben rechts. Aktionen wie wire:click werden an den Button weitergereicht.

Schließbare Cards

Hinweis

Dieser Hinweis lässt sich ausblenden.

Hinweis

Auch auf dem Markenverlauf.

blade

<gedisa:card class="max-w-xs">
    <gedisa:card.close />
    <gedisa:heading size="lg">Hinweis</gedisa:heading>
    <gedisa:text class="mt-2">Dieser Hinweis lässt sich ausblenden.</gedisa:text>
</gedisa:card>
<gedisa:card variant="brand" class="max-w-xs">
    <gedisa:card.close />
    <gedisa:heading size="lg" class="!text-gedisa-text-white">Hinweis</gedisa:heading>
    <p class="mt-2">Auch auf dem Markenverlauf.</p>
</gedisa:card>

Livewire

Das Beispiel entfernt die Card über den Close-Button aus der Liste und stellt sie auf Knopfdruck wieder her.

Hinweise ausblenden

Profil vervollständigen

Zwei-Faktor aktivieren

Team einladen

blade

<gedisa:card wire:key="notice-{{ $loop->index }}">
    <gedisa:card.close wire:click="dismiss('{{ $notice }}')" />
    <gedisa:heading size="lg">{{ $notice }}</gedisa:heading>
</gedisa:card>

Referenz

Diese Übersicht umfasst die gezeigten Attribute und die Close-Unterkomponente.

gedisa:card

Eigenschaft	Werte	Default
variant	`default`, `subtle`, `brand`	`default`
slot	Inhalt der Card

gedisa:card.close

Eigenschaft	Werte	Default
label	Zugänglicher Name des Buttons	`Schließen`
wire:click, x-on:click	Aktion beim Schließen der Card