'/%3e%3cpath%20d='M178.8%2051C182.335%2051%20185.2%2053.8654%20185.2%2057.4V83C185.2%2086.5346%20182.335%2089.4%20178.8%2089.4H114.8C111.6%2089.4%20108.4%2092.6%20108.4%2095.8V121.4C108.4%20124.935%20105.535%20127.8%20102%20127.8H76.4002C72.8656%20127.8%2070.0002%20124.935%2070.0002%20121.4V95.8C70.0002%2092.2654%2072.8656%2089.4%2076.4002%2089.4H102C105.2%2089.4%20108.4%2086.2%20108.4%2083V57.4C108.4%2053.8654%20111.266%2051%20114.8%2051H178.8Z'%20fill='oklch(0.643%200.19%20270.83)'/%3e%3c/svg%3e)
layoutdisplay
card
Content container with header/body.
pnpm dlx shadcn@latest add cardLive preview
Interactive example with the installed component.
Project
Card description
Use cards to group related content.
Use it when
Start with the component when this interaction is the smallest useful building block. Compose a Fenod block when the user needs a full workflow instead.
Illustration brief
Minimal UI illustration, a calm content frame with grouped regions, warm off-white background, olive charcoal accents, thin borders, no gradients, no text, no logos, no device mockup.
Related components
Shares an interaction or layout role with Card.