Guides card layout design for scannable, responsive content display. Cards are self-contained containers that group related content; used in grids for blog posts, products, templates, tools, features,
name: card
description: When the user wants to design, optimize, or audit card layouts for content display. Also use when the user mentions "card layout," "card component," "card grid," "product cards," "template cards," "tool cards," "feature cards," "gallery cards," "integration cards," or "card design." For grids, use grid.
metadata:
version: 1.1.1
Components: Card Layout
Guides card layout design for scannable, responsive content display. Cards are self-contained containers that group related content; used in grids for blog posts, products, templates, tools, features, galleries, and integrations.
When invoking: On first use, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.
Card Anatomy
Element
Purpose
Container
Border, background, shadow; consistent padding
Image / Thumbnail
Visual anchor; consistent aspect ratio (1:1, 4:3 common)
Title
Clear; keyword-rich where relevant
Description / Metadata
Supporting text; date, author, category
CTA
Action button or link; "View," "Use," "Connect," etc.
Principle: One card = one topic. Keep each card focused for scannability.
Card Types by Use Case
Type
Typical Elements
Page Skill
Product card
Image, name, price, CTA (Add to cart, View)
products-page-generator
Template card
Thumbnail, name, short description, "Use" or "Preview" CTA
template-page-generator
Tool card
Name, one-line benefit, CTA to tool page
tools-page-generator
Feature card
Name, benefit, optional screenshot
features-page-generator
Gallery / Showcase item
Thumbnail, title, creator, link
showcase-page-generator
Integration card
Logo, name, short description, "Connect" or "Install"
integrations-page-generator
Blog / Article card
Cover image, title, excerpt, date, author
blog-page-generator, article-page-generator
Resource card
Thumbnail, title, format (guide, webinar), CTA
resources-page-generator
Layout & Responsiveness
Grid: CSS Grid repeat(auto-fill, minmax()) or Flexbox; columns adapt to viewport
Mobile: Single column on small screens; 2–4 columns on desktop
Consistency: Same padding, spacing, and aspect ratios across cards