new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

shadcn/ui · Components · all subjects

card/usage

7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Card component imports

Import the Card component and its sub-components using: import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"

Card basic usage example

Example of using the Card component: ```tsx <Card> <CardHeader> <CardTitle>Card Title</CardTitle> <CardDescription>Card Description</CardDescription> <CardAction>Card Action</CardAction> </CardHeader> <CardContent> <p>Card Content</p> </CardContent> <CardFooter> <p>Card Footer</p> </CardFooter> </Card> ```

Card CSS variable for spacing

The --card-spacing CSS variable controls the spacing between sections and the inset of card parts. It can be customized using arbitrary property classes like [--card-spacing:--spacing(6)].

Card edge-to-edge content technique

To make content go edge to edge while keeping it aligned with the card inset, use negative margins with -mx-(--card-spacing). When edge-to-edge content sits above a footer, use -mb-(--card-spacing) on CardContent to remove the section gap.

Card with image

Add an image before the card header to create a card with an image.

Card spacing variable upgrade path

When upgrading from a previous version of the Card component, replace hard-coded gap and vertical padding with the --card-spacing variable. Set [--card-spacing:--spacing(4)] for default size and [--card-spacing:--spacing(3)] for small size on the root Card element. Update CardHeader to use px-(--card-spacing) instead of px-4 or px-3, and use pb-(--card-spacing) on elements with .border-b. Update CardContent to use px-(--card-spacing) instead of px-4 or px-3. Update CardFooter to use p-(--card-spacing) instead of p-4 or p-3.

Card customization via spacing variable example

Example of customizing card spacing: ```tsx function Example() { return <Card className="[--card-spacing:--spacing(6)]">...</Card> } ```

Give your agent this brain