Card Layout Blocks based on shadcn/ui
A content card featuring a header image, category tag, title, description, and author information with avatar and posting date. Perfect for blog posts, articles, and content listings.

Innovative Workspace Solutions
Experience the perfect blend of nature and productivity in our premium coworking spaces. Designed for teams who value both inspiration and collaboration.
Lori Bryson
Posted on 28 February
import Component from "../card-with-avatar"
export default function Page() {
return <Component />
}
Striking card with full-background image and gradient overlay. Features prominent heading, descriptive text, and author information with avatar. Ideal for featured content, testimonials, and hero sections.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROFlexible office space means growing your team.
Rather than worrying about switching offices every couple years, you can instead stay in the same location and grow-up from your shared coworking space to an office that takes up an entire floor.
Mathew Glock
Marketing Manager
import Component from "../card-with-background-image"
export default function Page() {
return <Component />
}
Clean, borderless card design with rounded image, title, description, and ghost-styled Read More button with arrow icon. Ideal for minimalist layouts, blog previews, and content grids.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PRO
MateLabs mixes machine learning with IFTTT
If you've ever wanted to train a machine learning model and integrate it with IFTTT, you now can with ...
import Component from "../card-without-border"
export default function Page() {
return <Component />
}
Straightforward card design without image, featuring category tag, headline, description, and CTA button. Perfect for announcements, news items, and text-focused content cards.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROEnterprise
Autodesk looks to future of 3D printing with Project Escher
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus.
import Component from "../simple-card-with-cta"
export default function Page() {
return <Component />
}