Image & Text Card

A versatile card component, bundled with a responsive grid container, for displaying items with an image and text.

Get Source Code Preview

About this Component

This is one of the most common card patterns on the web. This template provides both the style for an individual card and a container to arrange multiple cards into a responsive, wrapping grid. It's a perfect starting point for blog indexes, product listings, or portfolio galleries.

Features

• Responsive Grid Included: The cards are placed inside a CSS Grid container that automatically adjusts the number of columns and wraps items based on screen size.
• Individual Card Styling: Each card is a self-contained unit with a clean layout for an image, title, description, and an action button.
• Scoped CSS: All styles are prefixed and scoped to container classes (.cards-grid-container and .it-card-container) to prevent conflicts with your existing website's styles.
• Semantic HTML: The component uses a semantic article element for each card, which is appropriate for a self-contained piece of content.
• Accessible Design: Each card is a single, focusable link with an aria-label, making navigation clear for all users.

Code Breakdown

This component consists of two main parts: the outer grid container and the individual card elements.

The Grid Container

To arrange multiple cards, wrap them in a div with the class .cards-grid-container. This container uses CSS Grid to create the layout.

• display: grid activates Grid layout.
• grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) provides the responsiveness. It tells the browser to create as many columns as can fit, with each column being a minimum of 320px wide and allowed to grow to fill any extra space.
• gap: 1.5rem creates consistent spacing between the cards, both horizontally and vertically.

The Individual Card

The card itself begins with an article element. Inside, an anchor (a) tag makes the entire card a clickable unit. CSS variables (e.g. --it-card-padding) are defined at the top of the card's style rule for easy customization of its internal appearance. A subtle transform on hover provides a "lift" effect to signal interactivity.

Code

Here's the complete, self-contained code. The example includes three cards to demonstrate the grid layout. You can add or remove cards as needed.