Skip to main content

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/ui 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/ui";

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/ui";

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