Card-Based Design

Card-Based Design

"Bite-sized consumption. Encapsulating discrete pieces of information into distinct visual containers."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Encapsulation: Every card is self-contained. It has an image, a title, a short description, and usually an action (like a button or a 'like' icon).
2. Responsive Flow: Cards easily reflow on different screen sizes (from a 4-column grid on desktop to a single column on mobile).
3. Clear Boundaries: Cards must visually pop off the background.

Visual DNA

• Colors: Very flexible. The background should be slightly darker or distinct from the card color. Sophisticated Neutral works well for a premium feel.
• Typography: Clear hierarchy within the card (Header, Subheader, Body).
• Styling: Standard border-radius: 8px and a medium drop shadow.

Web Implementation

• CSS Grid with auto-fit or a Masonry layout.
• CSS Example:

body {
  background-color: #f0f2f5; /* Standard app background */
  padding: 40px;
}

.card-grid {
  display: grid;
  /* Auto-responsive magic */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden; /* Keep images inside the rounded corners */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.2s, box-shadow 0.2s;