Card

Les Cards sont des surfaces qui affichent du contenu et des actions sur un même sujet. Elles doivent être faciles à parcourir pour des informations pertinentes et exploitables.

Utilisation

Importez le Card depuis @firecms/ui et enveloppez le contenu que vous souhaitez afficher sur la carte. Vous pouvez également rendre la carte cliquable en fournissant un handler onClick.

Card de base

Représente l’utilisation de base d’une card pour afficher du contenu.

import React from "react";
import { Card } from "@firecms/ui";

export default function CardBasicDemo() {
    return (
        <Card className={"p-4"}>
            Content within a basic card.
        </Card>
    );
}

Card cliquable

Montre une card avec un événement onClick, la faisant se comporter comme un bouton.

import React from "react";
import { Card } from "@firecms/ui";

export default function CardClickableDemo() {
    const handleClick = () => {
        console.log("Card clicked!");
    };

    return (
        <Card className={"p-4"} onClick={handleClick}>
            Clickable card content.
        </Card>
    );
}

Style personnalisé

Démontre comment des classes ou styles supplémentaires peuvent être appliqués à la card pour une apparence personnalisée.

import React from "react";
import { Card } from "@firecms/ui";

export default function CardCustomStyleDemo() {
    const styles = {
        padding: '20px',
        color: "red",
        backgroundColor: '#f9f9f9',
        borderRadius: '8px',
        boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
    };

    return (
        <Card style={styles}>
            Card with custom styling.
        </Card>
    );
}