Card with icon, title and link
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: A solid primary icon tile above a linked title, a muted summary and a small View link with a chevron
When to use
- Titled sections with body copy and footer actions, such as a help notice or a sign in form
- Image tiles with a photo above the copy or filling the tile under a dark text overlay
- Dashboard widgets such as a KPI with a trend, a usage meter or a deployment or integration status
When not to use
- A pointer whose small icon and label sit in a ruled top strip: use the Card Label & Link example
- A finished grid of KPI tiles, feature links or profile records ready to drop in: use the Card blocks
- A KPI panel with a range filter, a segmented meter or an activity feed beneath it: use the Stats blocks
- A preview that pops up over a link while the pointer rests on it: use the Hover Card component
Agent notes
- Replace the
itemconstant with your own copy and icon, and point bothhrefplaceholders at real routes - Each example caps
Cardwithmax-w-xs,max-w-smormax-w-md; drop the cap when the card should fill a grid cell or column sizesm onCardtightens padding and gaps in every style; none of these examples sets it, so try it before padding overrides
https://reui.io/components/card/c-card-17.mdget_example("c-card-17")npx shadcn@latest add @reui/c-card-17Shadcn Components in Card Icon & Link
About Shadcn Card Icon & Link
Card with icon, title and link. Built with the Card component. A free, open source shadcn card example you can install with npx shadcn@latest add @reui/c-card-17 and edit as your own code.
What You Can Build With Shadcn Card Icon & Link
- Composes Card, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-card-17
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Card Examples
- Basic Basic card
- Bordered Header Card header with border
- Border Separation Card with border separation
- Header & Footer Card with header and footer
- Link Action Card with link
- Dropdown Menu Card with dropdown menu
- Inset Image Card with image
- Image Hover Zoom Card with image scale hover effect
- Full Image Card with full image
- Image Shadow Fade Full card with image and shadow fade effect
- Stacked Depth Card with stacked depth effect
- Login Form Advanced clean login form card
Related Shadcn Component Categories
Open-source shadcn carousel components for image galleries, feature showcases, and testimonials.
Nested multi-level selection with drill-down navigation, breadcrumbs, search and custom rows.
Open-source shadcn chart components for analytics dashboards, KPI tracking, and reports.
Open-source shadcn checkbox components for multi-select forms, settings preferences, and table selection.
Open-source shadcn code block components with Shiki syntax highlighting for AI chat, streaming agent output, diff review, and documentation.
Open-source shadcn collapsible components for expandable sections, detail rows, and progressive disclosure.
Frequently Asked Questions
When should I use Shadcn Card Icon & Link?
Use it for a solid primary icon tile above a linked title, a muted summary and a small View link with a chevron.
Shadcn Card as a whole fits:
- Titled sections with body copy and footer actions, such as a help notice or a sign in form
- Image tiles with a photo above the copy or filling the tile under a dark text overlay
- Dashboard widgets such as a KPI with a trend, a usage meter or a deployment or integration status
For a pointer whose small icon and label sit in a ruled top strip, use the Card Label & Link example. For a finished grid of KPI tiles, feature links or profile records ready to drop in, use the Card blocks. For a KPI panel with a range filter, a segmented meter or an activity feed beneath it, use the Stats blocks. For a preview that pops up over a link while the pointer rests on it, use the Hover Card component.
How do I install Shadcn Card Icon & Link?
Is Shadcn Card Icon & Link free to use?
Which components does Shadcn Card Icon & Link use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.