KI-Card-Generator.

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.

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.

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.

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.

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.

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.