{ "name": "card", "title": { "es": "Tarjeta", "en": "Card" }, "summary": { "es": "Contenedor con cabecera, contenido y acciones.", "en": "Container with header, content and actions." }, "category": "data", "status": "stable", "nivel": "componentes", "updated": "2026-09-29", "license": "MIT", "page": "https://componentes-lovat.vercel.app/c/card/", "requires": [ "button", "badge" ], "files": [ { "type": "html", "url": "https://componentes-lovat.vercel.app/raw/card/card.html", "content": "
\n
\n

Plan Pro

\n

Para equipos que publican cada semana.

\n
Popular
\n
\n
\n

S/ 49 al mes

\n
\n \n
\n" }, { "type": "css", "url": "https://componentes-lovat.vercel.app/raw/card/card.css", "content": "/* card · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).\n Generado por tools/build_css.py desde card.tw.json. No editar a mano. Necesita tokens.css. */\n.c-card{position:relative}\n.c-card__action{grid-column-start:2;grid-row:span 2/span 2;grid-row-start:1}\n.c-card{display:flex}\n.c-card__footer{display:flex}\n.c-card__header{display:grid}\n.c-card__action{display:inline-flex}\n.c-card__panel{flex:1}\n.c-card__header{grid-auto-rows:min-content;grid-template-rows:auto auto}\n.c-card{flex-direction:column}\n.c-card__footer{align-items:center}\n.c-card__header{align-items:flex-start;gap:calc(var(--spacing)*1.5)}\n.c-card__action{align-self:flex-start;justify-self:flex-end}\n.c-card{border-radius:var(--radius-2xl);border-style:var(--tw-border-style);border-width:1px;background-color:var(--card)}\n.c-card__header{padding:calc(var(--spacing)*6)}\n.c-card__panel{padding:calc(var(--spacing)*6)}\n.c-card__footer{padding:calc(var(--spacing)*6)}\n.c-card__title{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}\n.c-card__description{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}\n.c-card__title{--tw-leading:1;line-height:1;--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}\n.c-card{color:var(--card-foreground)}\n.c-card__description{color:var(--muted-foreground)}\n.c-card{--tw-shadow-alpha:5%;--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}\n@supports (color:lab(0% 0 0)){\n.c-card{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,lab(0% 0 0/.05))}\n}\n.c-card:not(:is(.dark *)){background-clip:padding-box}\n.c-card:before{content:var(--tw-content);pointer-events:none;content:var(--tw-content);position:absolute;content:var(--tw-content);inset:calc(var(--spacing)*0);content:var(--tw-content);border-radius:calc(var(--radius-2xl) - 1px);content:var(--tw-content);--tw-shadow:0 1px var(--tw-shadow-color,#0000000a)}\n@supports (color:color-mix(in lab, red, red)){\n.c-card:before{--tw-shadow:0 1px var(--tw-shadow-color,color-mix(in oklab,var(--color-black)4%,transparent))}\n}\n.c-card:before{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}\n.c-card:is(.dark *):before{content:var(--tw-content);--tw-shadow:0 -1px var(--tw-shadow-color,#ffffff0f)}\n@supports (color:color-mix(in lab, red, red)){\n.c-card:is(.dark *):before{--tw-shadow:0 -1px var(--tw-shadow-color,color-mix(in oklab,var(--color-white)6%,transparent))}\n}\n.c-card:is(.dark *):before{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}\n/* propio */\n.c-card{width:100%;max-width:24rem}\n.c-card__header:has(>.c-card__action){grid-template-columns:1fr auto}\n.c-card:has(>.c-card__panel)>.c-card__header{padding-bottom:1rem}\n.c-card:has(>.c-card__header)>.c-card__panel{padding-top:0}\n.c-card:has(>.c-card__footer)>.c-card__panel{padding-bottom:0}\n.c-card:has(>.c-card__panel)>.c-card__footer{padding-top:1rem}\n.c-card__footer{gap:.5rem;justify-content:flex-end}\n.c-card__title a{color:inherit;text-decoration:none}\n.c-card__title a::after{content:\"\";position:absolute;inset:0;border-radius:inherit}\n.c-card__title a:focus-visible{outline:none}\n.c-card:has(.c-card__title a:focus-visible){box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--ring)}\n" }, { "type": "standalone", "url": "https://componentes-lovat.vercel.app/r/card.html" } ], "tokensFile": "https://componentes-lovat.vercel.app/tokens.css", "darkTheme": "add class 'dark' to ", "contexto": "ambos", "densidad": "media", "tono": "sobria", "states": [ "rest" ], "use": { "es": [ "Para agrupar un resumen con sus acciones." ], "en": [ "To group a summary with its actions." ] }, "avoid": { "es": [ "Envolviendo todo en un enlace: enlaza desde el título." ], "en": [ "Wrapping everything in a link: link from the title." ] }, "a11y": { "roles": [ "article" ], "keyboard": [ { "keys": "Tab", "es": "Recorre las acciones", "en": "Moves through the actions" } ], "notes": { "es": [ "
con título h3.", "Si toda la tarjeta debe ser clicable, el enlace va en el título y se extiende con ::after." ], "en": [ "
with an h3 title.", "If the whole card must be clickable, the link sits on the title and stretches with ::after." ] }, "test": { "es": [ "Recorre con Tab: solo se detiene en los dos botones." ], "en": [ "Tab through: it stops only on the two buttons." ] } }, "issues": { "es": [], "en": [] }, "credits": [ { "source": "coss ui (MIT) · card.tsx", "url": "https://coss.com/ui" } ], "changes": [ { "date": "2026-09-29", "es": "Diseño de coss ui en HTML, CSS y JS sin dependencias", "en": "coss ui design in dependency-free HTML, CSS and JS" } ], "partes": [], "pieza": "https://componentes-lovat.vercel.app/r/card.html" }