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#

ElementPurposeContainerBorder, background, shadow; consistent paddingImage / ThumbnailVisual anchor; consistent aspect ratio (1:1, 4:3 common)TitleClear; keyword-rich where relevantDescription / MetadataSupporting text; date, author, categoryCTAAction button or link; "View," "Use," "Connect," etc.

Principle: One card = one topic. Keep each card focused for scannability.

Card Types by Use Case#

TypeTypical ElementsPage SkillProduct cardImage, name, price, CTA (Add to cart, View)products-page-generator****Template cardThumbnail, name, short description, "Use" or "Preview" CTAtemplate-page-generator****Tool cardName, one-line benefit, CTA to tool pagetools-page-generator****Feature cardName, benefit, optional screenshotfeatures-page-generator****Gallery / Showcase itemThumbnail, title, creator, linkshowcase-page-generator****Integration cardLogo, name, short description, "Connect" or "Install"integrations-page-generator****Blog / Article cardCover image, title, excerpt, date, authorblog-page-generator, article-page-generator****Resource cardThumbnail, title, format (guide, webinar), CTAresources-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
• Hover: Subtle elevation (shadow, translate-y); avoid scale that causes layout shift (CLS)

Design Principles#

PrinciplePracticeVisual hierarchyTitle > description > CTA; clear flowScannabilityMinimal text; benefit-led copyConsistencySame structure across all cards in a gridAction clarityOne primary CTA per card; avoid choice overload

SEO & Schema#

• Cards themselves: No specific schema; layout is UI
• Content in cards: Use appropriate schema for the page (Product, Article, ItemList, etc.); see schema-markup
• Images: Alt text on thumbnails; see image-optimization
• Links: Descriptive anchor text; internal linking; see internal-links

Grid vs List vs Masonry vs Carousel#

LayoutBest forSkillGridVisual content (products, templates, gallery); equal emphasisgrid****ListText-heavy (blog index, docs); compact; scan by titlelist****MasonryVarying heights; image gallery, portfoliomasonry****CarouselLimited space; testimonials, logos, featured rotationcarousel

Related Skills#

• products-page-generator: Product cards, grid layout, category pages
• template-page-generator: Template cards, gallery structure
• tools-page-generator: Tool cards, toolkit hub
• features-page-generator: Feature grid/list
• showcase-page-generator: Gallery grid, per-item format
• integrations-page-generator: Catalog grid, integration cards
• category-page-generator: Product grid, consistent layout
• grid: Grid layout for card display; when to use grid
• list: List layout; cards in list format
• masonry: Masonry for varying-height cards (gallery)
• carousel: Carousel for card slides (testimonials, featured)
• hero-generator: Hero vs card—hero is single above-fold; cards are repeated units
• brand-visual-generator: Typography, spacing, visual consistency
• image-optimization: Card thumbnail optimization, alt text, LCP