Card Components for Every Type of Content

Cards are the Swiss Army knife of web design. They package content — an image, a title, a description, and an action — into a tidy, scannable unit that works in grids, carousels, and lists. Our 73 card templates cover every content type you will encounter when building a website, from simple text cards to richly interactive product showcases.

Card Variations

Vertical image cards are the classic layout for blog posts, news articles, and products: image on top, text below, action at the bottom. Horizontal cards place the image to the side, ideal for search results, compact listings, and sidebar widgets. Overlay cards layer text on top of an image with a gradient for a dramatic, editorial look popular on portfolio sites. Interactive cards feature hover effects — scale, shadow lift, or color shift — that invite clicks and signal interactivity to the user.

Using Cards Effectively

Display cards in responsive grids: 3 columns on desktop, 2 on tablet, 1 on mobile. Keep card titles under 60 characters and descriptions under 120 characters for consistent grid alignment. Use consistent image aspect ratios across a card grid to avoid ragged layouts — 16:9 for landscape content, 4:3 for products, and 1:1 for profile avatars. Add action buttons or links at the bottom of each card for clear navigation.

Cards in Context

Use product cards in your e-commerce module, blog post cards in a blog module, and profile cards in testimonial sections or team pages. Combine feature cards with a hero section to create a compelling landing page. Cards also work beautifully in dark mode designs with subtle border accents and elevated shadows. For minimal sites, use borderless cards with generous whitespace for an airy, refined look.