ICF Nürnberg

Church Management

UI Library

Tailwind CSS Navbar component

Cards

Cards gruppieren und präsentieren Inhalte übersichtlich

ICF Card Styles

Cards im minimalistischen ICF-Design mit Icons

Standard Card

Minimalistisches Design mit subtilen Borders und Hover-Effekt. Icons in Dunkelgrau.

Highlight Card

Mit oranger Border-Left für wichtige Inhalte. Icon in Orange.

Weitere Card

Clean und übersichtlich - typisch ICF

🧑 Wiederverwendbare Personen-Cards

Die <app-person-card> Komponente kann in der gesamten App verwendet werden. Sie ist voll konfigurierbar und unterstützt alle Personen-Felder.

Max Mustermann

Musterstraße 123
12345 Musterstadt
max.mustermann@example.com
+49 123 456 78

Anna Schmidt

anna.schmidt@example.com

Peter Müller

80331 München
+49 89 123 456 78

Lisa Wagner

Hauptstraße 45
10115 Berlin
lisa.wagner@example.com
+49 30 123 456 78

Thomas Klein

John Doe Avatar

John Doe

john.doe@example.com
+49 40 123 456
Jane Smith Avatar

Jane Smith

60311 Frankfurt
jane.smith@example.com

💳 Wiederverwendbare Bankkonto-Cards

Die <app-bank-account-card> Komponente kann in der gesamten App verwendet werden. Sie ist voll konfigurierbar und unterstützt alle Bankkonto-Felder.

Sparkasse Berlin

DE89 3704 0044 0532 0130 00

Max Mustermann
BLZ: 37040044
COBADEFFXXX

Deutsche Bank

DE12 5001 0517 1234 5678 90

Anna Schmidt

Commerzbank

DE89 5004 0000 0123 4567 89

Peter Müller
BLZ: 50040000

Postbank

DE44 5001 0060 9876 5432 10

Lisa Wagner
BLZ: 50010060
PBNKDEFFXXX

Volksbank München

DE21 7016 0000 0001 2345 67

Thomas Klein
GENODEF1M01

N26 Bank

DE75 1001 0123 4567 8901 23

Julia Schneider

💸 Wiederverwendbare Transaktions-Cards

Die <app-transaction-card> Komponente kann in der gesamten App verwendet werden. Sie unterstützt eingehende und ausgehende Transaktionen mit vollständigen Details.

15.03.2024

-250,00 €

Zahlungsempfänger:

Max Mustermann

DE89 3704 0044 0532 0130 00

Betreff:

Spende für Sozialprojekt

Konto:

HVB Spendenkonto

14.03.2024

+1500,00 €

Zahlungsempfänger:

Anna Schmidt

DE12 5001 0517 1234 5678 90

Betreff:

Monats-Spende März 2024

Konto:

HVB Spendenkonto

12.03.2024

-890,50 €

Zahlungsempfänger:

Event-Location GmbH

DE89 5004 0000 0123 4567 89

Betreff:

Raummiete Jugend-Event März

Konto:

EB 00er Events

10.03.2024

+3200,00 €

Zahlungsempfänger:

Peter Müller

DE21 7016 0000 0001 2345 67

Betreff:

Spende Missions-Projekt Afrika

Konto:

EB 20er Mission

08.03.2024

-125,00 €

Zahlungsempfänger:

Lisa Wagner

DE44 5001 0060 9876 5432 10

Betreff:

Material für Kinderprogramm

Konto:

EB 00er Events

05.03.2024

+25,00 €

Zahlungsempfänger:

Thomas Klein

DE75 1001 0123 4567 8901 23

Betreff:

Spende Kaffeekasse

Konto:

HVB Spendenkonto

💝 Wiederverwendbare Spender-Cards

Die <app-donor-card> Komponente kann in der gesamten App verwendet werden. Sie unterstützt alle Spendertypen mit farbigen Badges.

Max Mustermann

Mann

Anna Schmidt

Frau

Peter & Lisa Müller

Paar

Thomas & Julia Wagner

Familie

Müller GmbH & Co. KG

Unternehmen

Michael Klein

Mann

Tech Solutions International AG

Unternehmen

Sebastian & Katharina Schneider

Familie

Martin & Sarah Fischer

Paar

Card Größen

Cards in verschiedenen Größen mit Icons

Max Mustermann

Mann

Anna Schmidt

Frau

Peter & Lisa Müller

Paar

Thomas & Julia Wagner

Familie

Müller GmbH & Co. KG

Unternehmen

Michael Klein

Mann

Tech Solutions International AG

Unternehmen

Sebastian & Katharina Schneider

Familie

Martin & Sarah Fischer

Paar

Card Größen

Cards in verschiedenen Größen mit Icons

Extra Small

Sehr kompakte Card

Small

Kleine Card

Medium

Standard Card-Größe

Large

Große Card für mehr Inhalt

Code-Beispiele

ICF Card mit Icon

<div class="card-icf"> <div class="flex items-start gap-3 mb-3"> <svg class="h-8 w-8 text-[var(--color-icf-charcoal)]">...</svg> <h3>Titel</h3> </div> <p>Inhalt...</p> </div>

Personen-Card

<div class="card-icf"> <div class="flex items-start gap-3 mb-4"> <div class="bg-[var(--color-icf-gray-lightest)] p-3 rounded-full"> <svg class="h-8 w-8">...Personen-Icon...</svg> </div> <h3>Vorname Name</h3> </div> <div class="space-y-2"> <!-- Optional: Adresse --> <div class="flex items-start gap-2"> <svg>...Adress-Icon...</svg> <div>Straße 123<br>12345 Stadt</div> </div> <!-- Optional: E-Mail --> <div class="flex items-center gap-2"> <svg>...Mail-Icon...</svg> <a href="mailto:...">email@example.com</a> </div> <!-- Optional: Telefon --> <div class="flex items-center gap-2"> <svg>...Phone-Icon...</svg> <a href="tel:...">+49 123 456</a> </div> </div> </div>

Personen-Card mit Edit-Button

<div class="card-icf relative"> <div class="flex items-start gap-3 mb-4"> <div class="bg-[var(--color-icf-gray-lightest)] p-3 rounded-full"> <svg class="h-8 w-8">...Personen-Icon...</svg> </div> <h3>Vorname Name</h3> </div> <div class="space-y-2 mb-3"> <!-- Kontaktfelder... --> </div> <!-- Optional: Edit Button (Icon only) --> <div class="flex justify-end"> <button class="btn btn-ghost btn-sm btn-square text-[var(--color-icf-charcoal)] hover:text-[var(--color-icf-orange)] hover:bg-[rgba(255,102,0,0.1)]" aria-label="Person bearbeiten"> <svg class="h-5 w-5">...Edit-Icon...</svg> </button> </div> </div>

Personen-Card mit Gravatar-Avatar

<div class="card-icf"> <div class="flex items-start gap-3 mb-4"> <!-- Gravatar Avatar statt Icon --> <img src="https://www.gravatar.com/avatar/MD5_HASH?s=64&d=mp&r=g" alt="Name Avatar" class="w-14 h-14 rounded-full border-2 border-[var(--color-icf-gray-lighter)] object-cover" /> <h3>Vorname Name</h3> </div> <div class="space-y-2"> <!-- E-Mail ist erforderlich für Gravatar --> <a href="mailto:email@example.com">email@example.com</a> </div> </div>

Gravatar URL generieren:

  1. E-Mail-Adresse in Kleinbuchstaben konvertieren
  2. MD5-Hash der E-Mail-Adresse berechnen
  3. URL: https://www.gravatar.com/avatar/MD5_HASH
  4. Parameter: ?s=64 (Größe), &d=mp (Standard-Bild)

Fallback-Optionen (d=...):

  • mp - Mystery Person (Standard-Silhouette)
  • identicon - Geometrisches Muster
  • monsterid - Monster-Avatar
  • wavatar - Gesichter-Avatar
  • retro - Retro 8-Bit-Stil
  • robohash - Roboter-Avatar

Spender-Card

<div class="card-icf"> <div class="flex items-start gap-3 mb-4"> <!-- Icon: Personen für Einzelperson/Paar/Familie, Gebäude für Unternehmen --> <div class="bg-[var(--color-icf-gray-lightest)] p-3 rounded-full"> <svg class="h-8 w-8">...Spender-Icon...</svg> </div> <div class="flex-1"> <h3>Name / Name & Name / Firmenname</h3> </div> </div> <div class="space-y-2"> <div class="flex items-center gap-2"> <svg class="h-4 w-4">...Tag-Icon...</svg> <span class="px-2 py-1 text-white text-xs rounded"> Typ </span> </div> </div> </div>

Spender-Card Felder:

  • Icon: Personen-Icon (Mann/Frau/Paar/Familie) oder Gebäude-Icon (Unternehmen)
  • Name: Einzelname, "Name & Name" oder Firmenname
  • Typ: Badge mit Farbcodierung (Mann, Frau, Paar, Familie, Unternehmen)

Typ-Farbcodierung:

  • Blau - Mann / Frau (Einzelpersonen)
  • Orange - Paar
  • Grün - Familie
  • Dunkelgrau - Unternehmen

Namensformate:

  • Einzelperson: "Max Mustermann"
  • Paar: "Peter & Lisa Müller"
  • Familie: "Thomas & Julia Wagner"
  • Unternehmen: "Müller GmbH & Co. KG"

Transaktions-Card

<div class="card-icf"> <div class="flex items-start gap-3 mb-4"> <!-- Icon: Pfeil nach oben (rot) oder unten (grün) --> <div class="bg-[var(--color-icf-gray-lightest)] p-3 rounded-full"> <svg class="h-8 w-8 text-[var(--color-icf-red)]"> ...Pfeil-Icon... </svg> </div> <div class="flex-1"> <div class="flex justify-between"> <p class="text-xs">Datum</p> <p class="text-lg font-semibold">Betrag</p> </div> </div> </div> <div class="space-y-3"> <!-- Zahlungsempfänger --> <div> <p class="text-xs mb-1">Zahlungsempfänger:</p> <div class="flex items-start gap-2"> <svg class="h-4 w-4">...Personen-Icon...</svg> <div> <p class="font-semibold">Vorname Name</p> <p class="text-xs font-mono">IBAN</p> </div> </div> </div> <!-- Betreff --> <div> <p class="text-xs mb-1">Betreff:</p> <p>Verwendungszweck</p> </div> <!-- ICF Konto --> <div> <p class="text-xs mb-1">Konto:</p> <div class="flex items-center gap-2"> <svg class="h-4 w-4">...Konto-Icon...</svg> <span class="font-medium">HVB Spendenkonto</span> </div> </div> </div> </div>

Transaktions-Card Felder:

  • Icon: Pfeil nach oben (rot, ausgehend) oder unten (grün, eingehend)
  • Datum: Transaktionsdatum (kleinere Schrift)
  • Betrag: Groß und fettgedruckt, rot (-) oder grün (+)
  • Zahlungsempfänger: Name (fett) + IBAN (monospaced)
  • Betreff: Verwendungszweck der Transaktion
  • Konto: Name des eigenen ICF Kontos (z.B. "HVB Spendenkonto")

Styling-Hinweise:

  • Ausgehende Zahlungen: Roter Pfeil nach oben, negativer Betrag in Rot
  • Eingehende Zahlungen: Grüner Pfeil nach unten, positiver Betrag in Grün
  • IBAN mit font-mono für Lesbarkeit
  • Feldbezeichnungen als text-xs in Grau
  • Kontoname als font-medium hervorgehoben

ICF Konten-Beispiele:

  • HVB Spendenkonto
  • EB 00er Events
  • EB 20er Mission
  • Kaffeekasse

Bankkonto-Card

<div class="card-icf"> <div class="flex items-start gap-3 mb-4"> <!-- Kreditkarten-Icon --> <div class="bg-[var(--color-icf-gray-lightest)] p-3 rounded-full"> <svg class="h-8 w-8">...Kreditkarten-Icon...</svg> </div> <div class="flex-1"> <h3>Bank Name</h3> <p class="text-xs font-mono">IBAN</p> </div> </div> <div class="space-y-2"> <!-- Kontoinhaber (Pflicht) --> <div class="flex items-center gap-2"> <svg class="h-4 w-4">...Personen-Icon...</svg> <span class="font-semibold">Vorname Name</span> </div> <!-- BLZ (optional) --> <div class="flex items-center gap-2"> <svg class="h-4 w-4">...Bank-Icon...</svg> <span class="text-xs">BLZ: 12345678</span> </div> <!-- BIC (optional) --> <div class="flex items-center gap-2"> <svg class="h-4 w-4">...Globus-Icon...</svg> <span class="text-xs font-mono">BICXXXXXX</span> </div> </div> </div>

Bankkonto-Card Felder:

  • Icon: Kreditkarten-Icon (SVG) in grauem Kreis
  • Bank Name: Name der Bank als Überschrift
  • IBAN: Internationale Bankkontonummer (monospaced font)
  • Kontoinhaber: Vorname & Name (Pflichtfeld)
  • BLZ: Bankleitzahl (optional, kleinere Schrift)
  • BIC: Bank Identifier Code (optional, monospaced font)

Styling-Hinweise:

  • IBAN und BIC verwenden font-mono für bessere Lesbarkeit
  • Icon in bg-[var(--color-icf-gray-lightest)] Kreis
  • BLZ und BIC als kleinere Schrift (text-xs)
  • Kontoinhaber als font-semibold hervorgehoben

🎨 ICF Card Design

card-icf: Standard Card mit subtilen Borders und Hover-Effekt

card-icf-highlight: Card mit oranger Border-Left für wichtige Inhalte

Icons: Statt Bildern verwenden wir SVG-Icons in Dunkelgrau oder Orange

Personen-Cards: Personen-Icon in grauem Kreis, flexible optionale Kontaktfelder

Gravatar-Avatar: Optional Gravatar-Profilbild statt Icon (basiert auf E-Mail-Adresse)

Bankkonto-Cards: Kreditkarten-Icon, Bank Name + IBAN, Kontoinhaber (Pflicht), optionale BLZ & BIC

Transaktions-Cards: Pfeil-Icons (rot/grün), Datum + Betrag, Empfänger + IBAN, Betreff, ICF Konto

Spender-Cards: Name + Typ-Badge (Mann/Frau/Paar/Familie/Unternehmen) mit Farbcodierung

Edit-Button: Optional Icon-Button (Stift) unten rechts, wird orange bei Hover

Prinzip: Minimalistisch, clean, viel Weißraum, Icons statt Fotos