AI Card Generator.

Describe what the card holds and MeDo generates the full container — media, header, body, and footer slots, hover elevation, aspect-ratio-locked images, equal heights in a grid, and a matching skeleton state.

A Card Is a Layout Contract, Not a Box With a Border

Rounded corners and a shadow take a minute to write, so cards get treated as trivial. What breaks is everything around them. One card has a two-line title and its neighbor has four, so the footers no longer line up. An image arrives at an unexpected ratio and the grid reflows after paint. Someone makes the whole card clickable and traps a "Save" button inside the anchor, which produces invalid HTML and an unreachable control. These are properties of the card in a set, not of the card alone, which is why generating the container, the media constraint, the footer alignment, and the loading state as one unit is more useful than styling a single div well.

6 templates

Card Templates You Can Generate

Every template is a real prompt, not a screenshot. Copy it into any AI editor, or run it in MeDo and get React + Tailwind code back.

BasicSlots + Skeleton

Four-Slot Card With a Matching Skeleton

The container everything else extends. Generating the skeleton in the same pass is what keeps the two the same size six months later.

Create a card component with four optional slots: media at the top, a header with title and subtitle, a body for description text, and a footer for actions or metadata. White surface, 12px radius, 1px light grey border, 20px internal padding. Make the card a flex column with the body allowed to grow so the footer sits at the bottom and cards in a row stay equal height regardless of title wrapping. Lock the media to a 16:9 ratio with object-fit cover and explicit dimensions. Include a skeleton variant whose grey blocks match the real layout exactly — same media ratio, same line count, same footer height — so nothing shifts when data arrives.

Try in MeDo

CommerceProduct Card

Image, Price and Add to Cart

The hardest card to get right because it needs a whole-card link and a nested button. Wrap the card in an anchor and the button becomes invalid markup and unreachable.

Create a product card: a 1:1 image with object-fit cover and a reserved box, an optional discount badge in the top-left, the product name over two lines with a line clamp, a price row with the current price and a struck-through original, a star rating with a review count, and an Add to cart button in the footer. Make the whole card navigate to the product page by putting the anchor on the product name and stretching it over the card with an absolutely positioned pseudo-element, then raise the cart button above it with a higher z-index so both targets work. Add an out-of-stock state that dims the image and swaps the button for a Notify me control.

Try in MeDo

EditorialArticle Card

Cover Image, Headline and Byline

One headline wraps to two lines and its neighbor to four. Without a growing body the bylines end up on different baselines and the whole index looks unfinished.

Create an article card: a 16:9 cover image with a reserved aspect box, a category badge, a headline clamped to two lines, an excerpt clamped to three, and a footer row with an author avatar, author name, publish date and read time. Make it a flex column with the excerpt allowed to grow so bylines align across a row of cards with different headline lengths. Put the anchor on the headline and stretch it across the card so the accessible name is the headline rather than "read more". Add a featured variant that spans two grid columns with the media on the left and the text on the right.

Try in MeDo

DashboardMetric Card

Stat Card With Delta and Sparkline

No media, all typography. The number is the component, so lock its width with tabular figures or the whole row twitches on every poll.

Create a metric card for a dashboard: a small uppercase label, a large numeric value using tabular figures so the width does not jitter as the number updates, a change indicator showing the delta with an arrow and a green or red tint, and an optional sparkline across the bottom. Never rely on color alone for direction — pair the tint with an arrow glyph and a visually hidden "up" or "down". Reserve the sparkline height even before data arrives. Include a loading variant that shows a shimmering block at the exact value height, and an empty state reading "No data yet" rather than a zero that looks like a real measurement.

Try in MeDo

ConversionPricing Card

Plan Card With a Highlighted Tier

Three cards that must end on one line. If the highlighted tier gets a thicker border, compensate with padding or it will sit one pixel taller than its neighbors.

Create a pricing card: plan name, price with a billing period suffix, a one-line positioning sentence, a feature list with check icons, and a call-to-action button pinned to the bottom. Add a highlighted variant with a thicker border, a "Most popular" badge overlapping the top edge, and reduced internal padding so the extra border width does not make it taller than the adjacent cards. Make the card a flex column with the feature list growing, so buttons across three plans of different feature counts land on the same line. Keep the price in tabular figures and mark the currency and period as separate spans for annual and monthly toggling.

Try in MeDo

InteractiveClickable Card

Whole-Card Link With Nested Controls

The pattern that fixes the most common card bug. One stretched anchor, real controls layered above it, no interactive element nested inside another.

Create a fully clickable card that stays valid HTML: put a single anchor on the card title and expand it over the whole card with an absolutely positioned ::after pseudo-element covering the container, rather than wrapping the card in an anchor. Give the container position relative and any nested control — a bookmark toggle, an overflow menu, a secondary link — a higher z-index plus position relative so it remains clickable. Drive the hover elevation from the container so hovering anywhere raises the card, and mirror it on focus-within so keyboard users see the same state. Skip the translate transform when prefers-reduced-motion is set and keep the shadow change.

Try in MeDo

How to Customize Your Card

Lock the media aspect ratio

Ask for an explicit aspect ratio on the image area with object-fit cover. Without a reserved box, images of varying dimensions resize the card after they load, which is a direct hit to Cumulative Layout Shift and the most visible flaw in a card grid.

Pin the footer to the bottom

Say the card is a flex column with the body allowed to grow, so footers align across a row even when titles wrap to different line counts. Ragged action rows are the fastest way to make an otherwise clean grid look unfinished.

Choose one clickable strategy

Either the whole card is a link or the elements inside it are, never both. For a fully clickable card, ask for a single anchor on the title stretched over the card with an absolute pseudo-element, which keeps the accessible name meaningful and leaves room for nested controls above it.

Ask for the skeleton alongside the card

Request a loading variant whose grey blocks match the real dimensions, including the media ratio and line count. A skeleton built to a different size defeats the point, since the layout still jumps the moment data arrives.

Who Uses the Card Component

E-commerce product grid

A square product image, name, price, and a rating row, with an "Add to cart" button in the footer sitting above a whole-card link to the product page so both targets work without nesting.

Blog or resource index

A 16:9 cover image, a category badge, a headline that wraps to two lines, an excerpt, and an author and read-time footer that aligns across the row no matter how long each headline runs.

SaaS dashboard

Metric cards with no media at all: a label, a large value, a change indicator, and a sparkline, rendered as skeletons on first paint while the query resolves.

Pricing or plan comparison

Three cards of equal height with one highlighted by a thicker border and a badge, each ending in a call-to-action button anchored to the bottom so the buttons sit on a single line.

Card Patterns for Different Websites

The same card component, tuned to the kind of site it ships on.

01 / 06

SaaS Dashboard Cards

Metric cards with no media at all, so the number carries the whole layout. Use tabular figures and reserve the value height, because a card grid fed by a polling query will otherwise reflow every few seconds. Borders beat shadows here — twelve elevated cards on one screen read as noise rather than hierarchy.

Card Styles and Variants

Pick the variant that matches the rest of the page, then generate it.

01 / 06

Bordered Card

A 1px border, no shadow. The right default for dense interfaces — tables, dashboards, settings panels — where every card needs an edge but none of them should appear to float. Keep the border one step darker than the divider color or the card dissolves into the page.

Card in React, Next.js, Vue and Svelte

React, Next.js, Vue 3, SvelteKit, Astro or plain HTML — the same card, six ways to drop it in.

01 / 06

React Card

Expose the slots as subcomponents — Card.Header, Card.Body, Card.Footer — rather than as props, so a metric card can omit the media without passing null. No state means no hooks, which is what lets you render sixty of them in a grid.

src/components/Card.tsx

export function Card({ className, ...props }) {
  return (
    <div
      className={cn(
        'flex flex-col rounded-xl border bg-white p-5',
        'transition-shadow hover:shadow-lg',
        className
      )}
      {...props}
    />
  )
}
Card.Footer = ({ children }) => <div className="mt-auto pt-4">{children}</div>

How to Add Your Card to a Project

Four steps, from picking a card template to shipping it in production.

01~30s

Pick a Card Template

Scan the six templates and start from the content you are displaying — product with a cart button, article with a byline, metric with a delta, or pricing tier.

02~10s

Copy the Prompt

Take the prompt into MeDo, Lovable, Bolt, v0 or Cursor. Say what grid the card lives in before you run it, because the column count is what determines the media ratio and the equal-height rules.

03~1min

Generate and Refine

You get React + Tailwind back with a live preview. Follow up in plain English — "clamp the title to two lines", "swap the shadow for a border", "add the skeleton" — instead of editing the flex utilities by hand.

04~2min

Drop It Into the Grid

Render it inside a CSS grid so rows stretch to match, then check a row where one title wraps and another does not. That is the case that reveals whether the footer is actually pinned.

Common Questions About Card

How do I generate a card component with AI?

Describe what the card contains and how it will be used, for example "product card with a square image, title, price, and an add-to-cart footer, in a three-column grid." MeDo generates the slot structure, the media constraint, and the hover state together. Mentioning the grid matters, because that is what determines the equal-height and aspect-ratio rules.

What are the parts of a card component?

Four regions cover almost every case: an optional media area, a header with the title and any supporting label, a body for descriptive content, and a footer for actions or metadata. Treating them as optional slots rather than required markup lets one component serve a product card, an article card, and a metric card without variants for each.

Can the whole card be clickable?

Yes, but do not wrap the card in an anchor if it contains buttons or other links, since nesting interactive elements is invalid HTML and browsers handle it unpredictably. Put the anchor on the title and stretch it across the card with an absolutely positioned pseudo-element, then raise any nested control above it with a higher z-index.

How do I make cards the same height in a grid?

Use a CSS grid, which already stretches items in a row to match, and make the card itself a flex column so its footer is pushed down by a growing body. Fixed heights are the wrong fix, because they clip content as soon as one title wraps to an extra line.

Should cards use a shadow or a border?

A border reads better in dense interfaces like dashboards and tables, where many shadows create visual noise. A shadow suits sparse marketing layouts where cards need to lift off the background. Pick one as the default and reserve the other for a raised or emphasized variant rather than mixing them at the same level.

Does a card need a loading skeleton?

Any card fed by a network request benefits from one, because a skeleton sized to the real content keeps the page from reflowing when data lands. Ask MeDo for the skeleton in the same prompt as the card and the two share dimensions by construction, which is difficult to maintain when they are written separately.

Generate your card now.

Try any prompt — free, no signup needed.

Start building free View pricing

Button

Describe your brand and MeDo generates the entire button system — primary, secondary, ghost, and destructive variants, three sizes, plus hover, focus, loading, and disabled states. One prompt, one consistent set.

Related components

Badge

Describe your states and MeDo generates the whole badge set — semantic status pills, removable tag chips, numeric counts with 99+ overflow, and dot indicators that sit on an avatar without clipping.

Related components

Avatar

Generate production-ready avatars from a single prompt. 6 open-source patterns — photo, Notion-style illustrated, initials fallback, presence badge, stacked group, uploader — all Tailwind + shadcn, accessible, themeable and MIT-licensed. Copy the code, or regenerate any of them straight into your Lovable, Bolt, v0 or Cursor project.

Related components