card

# 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...