{ "name": "features", "title": { "es": "Funciones", "en": "Features" }, "summary": { "es": "Título, frase y tres beneficios con su ilustración.", "en": "Headline, subtitle and three benefits with an illustration each." }, "category": "sections", "status": "stable", "nivel": "componentes", "updated": "2026-09-30", "license": "MIT", "page": "https://componentes-lovat.vercel.app/c/features/", "requires": [], "files": [ { "type": "html", "url": "https://componentes-lovat.vercel.app/raw/features/features.html", "content": "
\n
\n

Todo lo que necesitas para publicar

\n

Piezas que se combinan entre sí, con el mismo diseño y la misma accesibilidad. Copias, pegas y ajustas los tokens.

\n
\n
\n
\n

Sin dependencias

HTML, CSS y JavaScript puros. Nada que instalar ni compilar.

\n
\n
\n
\n

Accesibles

Teclado, lector de pantalla y agentes de IA los usan sin trucos.

\n
\n
\n
\n

Claro y oscuro

Un solo archivo de tokens cambia el tema de todo el sitio.

\n
\n
\n
\n
\n" }, { "type": "css", "url": "https://componentes-lovat.vercel.app/raw/features/features.css", "content": "/* features · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).\n Generado por tools/build_css.py desde features.tw.json. No editar a mano. Necesita tokens.css. */\n.s-features__inner{margin-inline:auto}\n.s-features__desc{margin-block:calc(var(--spacing)*4)}\n.s-features__lead{margin-top:calc(var(--spacing)*4)}\n.s-features__grid{margin-top:calc(var(--spacing)*8)}\n.s-features__lead{margin-bottom:calc(var(--spacing)*12)}\n.s-features__grid{display:grid}\n.s-features__media{aspect-ratio:var(--aspect-video)}\n.s-features__screen{height:100%}\n.s-features__inner{max-width:var(--container-5xl)}\n.s-features__screen--c{--tw-translate-x:calc(var(--spacing)*6);--tw-translate-y:calc(var(--spacing)*6);translate:var(--tw-translate-x)var(--tw-translate-y)}\n.s-features__screen--a{--tw-translate-y:calc(var(--spacing)*6);translate:var(--tw-translate-x)var(--tw-translate-y)}\n.s-features__grid{gap:calc(var(--spacing)*4)}\n:where(.s-features__item>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}\n.s-features__media{overflow:hidden;border-radius:var(--radius-xl)}\n.s-features__screen{border-radius:var(--radius-xl);border-style:var(--tw-border-style);border-width:1px;border-color:#0000;background-color:var(--color-card)}\n.s-features__media{background-color:var(--color-foreground)}\n@supports (color:color-mix(in lab, red, red)){\n.s-features__media{background-color:color-mix(in oklab,var(--color-foreground)5%,transparent)}\n}\n.s-features{background-color:var(--color-muted)}\n@supports (color:color-mix(in lab, red, red)){\n.s-features{background-color:color-mix(in oklab,var(--color-muted)50%,transparent)}\n}\n.s-features__media--b{padding:calc(var(--spacing)*6)}\n.s-features__inner{padding-inline:calc(var(--spacing)*6)}\n.s-features__media--a{padding-inline:calc(var(--spacing)*6)}\n.s-features{padding-block:calc(var(--spacing)*24)}\n.s-features__title{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}\n.s-features__lead{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}\n.s-features__desc{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}\n.s-features__name{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}\n.s-features__title{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}\n.s-features__name{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}\n.s-features__lead{text-wrap:balance}\n.s-features__media{color:var(--color-card-foreground)}\n.s-features__screen{color:var(--color-card-foreground)}\n.s-features__title{color:var(--color-foreground)}\n.s-features__name{color:var(--color-foreground)}\n.s-features__lead{color:var(--color-muted-foreground)}\n.s-features__desc{color:var(--color-muted-foreground)}\n.s-features__screen{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color:var(--color-foreground)}\n@supports (color:color-mix(in lab, red, red)){\n.s-features__screen{--tw-ring-color:color-mix(in oklab,var(--color-foreground)5%,transparent)}\n}\n@media (min-width:40rem){\n.s-features__text{max-width:var(--container-sm)}\n.s-features__grid{grid-template-columns:repeat(2,minmax(0,1fr))}\n}\n@media (min-width:48rem){\n.s-features__grid{margin-top:calc(var(--spacing)*16);grid-template-columns:repeat(3,minmax(0,1fr))}\n}\n/* propio */\n.s-features__screen{display:grid;align-content:start;gap:.5rem;padding:1rem}\n.s-features__screen i{display:block;height:.4rem;border-radius:99px;background:color-mix(in oklab,var(--foreground)9%,transparent)}\n.s-features__screen i:first-child{width:40%;background:color-mix(in oklab,var(--foreground)16%,transparent)}\n.s-features__screen i:nth-child(2){width:80%}.s-features__screen i:nth-child(3){width:65%}\n" }, { "type": "standalone", "url": "https://componentes-lovat.vercel.app/r/features.html" } ], "tokensFile": "https://componentes-lovat.vercel.app/tokens.css", "darkTheme": "add class 'dark' to ", "contexto": "landing", "densidad": "media", "tono": "editorial", "states": [ "rest" ], "use": { "es": [ "Para explicar los 3 a 6 beneficios principales." ], "en": [ "To explain the 3 to 6 main benefits." ] }, "avoid": { "es": [ "Para listas largas de funciones: usa una tabla." ], "en": [ "For long feature lists: use a table." ] }, "a11y": { "roles": [ "region" ], "keyboard": [], "notes": { "es": [ "Cada beneficio es un h3 dentro del h2 de la sección.", "Las ilustraciones son decorativas." ], "en": [ "Each benefit is an h3 under the section's h2.", "Illustrations are decorative." ] }, "test": { "es": [ "Navega por encabezados (VO+Cmd+H): h2 y luego tres h3." ], "en": [ "Navigate by headings: one h2, then three h3." ] } }, "issues": { "es": [], "en": [] }, "credits": [ { "source": "Tailark mist (MIT) · features/two", "url": "https://github.com/tailark/blocks" } ], "changes": [ { "date": "2026-09-30", "es": "Diseño de Tailark mist en HTML y CSS sin dependencias", "en": "Tailark mist design in dependency-free HTML and CSS" } ], "partes": [], "pieza": "https://componentes-lovat.vercel.app/r/features.html" }