Skip to main content
Version: 3.0.0-beta

Card

Cards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information. Cards can be used for a wide variety of purposes including to display information, as clickable actions, or as interactive elements of the UI.

Usage

Import the Card from "firecms" and wrap the content you wish to display on the card. You can also make the card clickable by providing an onClick handler.

Basic Card

Represents the basic usage of a card for displaying content.

import React from "react";
import { Card } from "firecms";

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

Clickable Card

Shows a card that has an onClick event, making it behave similar to a button.

import React from "react";
import { Card } from "firecms";

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

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

Custom Styling

Demonstrates how additional classes or styles can be applied to the card for custom appearance.

import React from "react";
import { Card } from "firecms";

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>
);
}
Sign up to our newsletter to get the latest news and updates. No spam!