{ "name": "hero", "title": { "es": "Hero", "en": "Hero" }, "summary": { "es": "La primera pantalla: anuncio, título, frase, dos botones y una vista del producto.", "en": "The first screen: announcement, headline, subtitle, two buttons and a product view." }, "category": "sections", "status": "stable", "nivel": "componentes", "updated": "2026-10-08", "license": "MIT", "page": "https://componentes-lovat.vercel.app/c/hero/", "requires": [ "button" ], "files": [ { "type": "html", "url": "https://componentes-lovat.vercel.app/raw/hero/hero.html", "content": "
\n
\n
\n \n \n Nuevo: tema oscuro automático\n \n

Construye tu web en una tarde

\n

Componentes listos para copiar, accesibles y sin dependencias.

\n
\n Empezar\n Ver demo\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n" }, { "type": "css", "url": "https://componentes-lovat.vercel.app/raw/hero/hero.css", "content": "/* hero · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).\n Generado por tools/build_css.py desde hero.tw.json. No editar a mano. Necesita tokens.css. */\n.s-hero{position:relative}\n.s-hero__copy{position:relative}\n.s-hero__badge-icon{position:relative}\n.s-hero__media{position:relative}\n.s-hero__frame{position:relative}\n.s-hero__copy{z-index:10}\n.s-hero__media{z-index:10}\n.s-hero__copy{margin-inline:auto}\n.s-hero__badge{margin-inline:auto}\n.s-hero__title{margin-inline:auto}\n.s-hero__lead{margin-inline:auto}\n.s-hero__media{margin-inline:auto}\n.s-hero__frame{margin-inline:auto}\n.s-hero__lead{margin-block:calc(var(--spacing)*6)}\n.s-hero__title{margin-top:calc(var(--spacing)*8)}\n.s-hero__media{margin-top:calc(var(--spacing)*12)}\n.s-hero__badge{display:flex}\n.s-hero__badge-icon{display:flex}\n.s-hero__actions{display:flex}\n.s-hero__badge-icon{width:calc(var(--spacing)*5);height:calc(var(--spacing)*5)}\n.s-hero__badge{width:fit-content}\n.s-hero__title{max-width:var(--container-3xl)}\n.s-hero__copy{max-width:var(--container-5xl)}\n.s-hero__media{max-width:var(--container-5xl)}\n.s-hero__lead{max-width:var(--container-xl)}\n.s-hero__badge{align-items:center}\n.s-hero__badge-icon{align-items:center}\n.s-hero__actions{align-items:center}\n.s-hero__badge{justify-content:center}\n.s-hero__badge-icon{justify-content:center}\n.s-hero__actions{justify-content:center}\n.s-hero__badge{gap:calc(var(--spacing)*2)}\n.s-hero__actions{gap:calc(var(--spacing)*3)}\n.s-hero{overflow:hidden}\n.s-hero__frame{overflow:hidden}\n.s-hero__badge-icon{border-radius:.25rem}\n.s-hero__badge{border-radius:var(--radius-md)}\n.s-hero__badge-icon{border-style:var(--tw-border-style);border-width:1px}\n.s-hero__frame{border-style:var(--tw-border-style);border-width:1px}\n.s-hero__badge-icon{border-color:var(--color-background)}\n.s-hero__frame{border-color:#0000;background-color:var(--color-background)}\n.s-hero__copy{padding-inline:calc(var(--spacing)*6)}\n.s-hero__media{padding-inline:calc(var(--spacing)*6)}\n.s-hero__badge{padding-block:calc(var(--spacing)*.5)}\n.s-hero__inner{padding-block:calc(var(--spacing)*20)}\n.s-hero__badge{padding-right:calc(var(--spacing)*3);padding-left:var(--spacing)}\n.s-hero__copy{text-align:center}\n.s-hero__title{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}\n.s-hero__lead{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}\n.s-hero__title{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}\n.s-hero__badge-text{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}\n.s-hero__title{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight);text-wrap:balance}\n.s-hero__lead{text-wrap:balance;color:var(--color-muted-foreground)}\n.s-hero__frame{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px 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)}\n.s-hero__badge-icon{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px 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)}\n.s-hero__frame{--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-shadow-color:#0000001a}\n@supports (color:color-mix(in lab, red, red)){\n.s-hero__frame{--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-black)10%,transparent)var(--tw-shadow-alpha),transparent)}\n}\n.s-hero__badge-icon{--tw-shadow-color:#0003}\n@supports (color:color-mix(in lab, red, red)){\n.s-hero__badge-icon{--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-black)20%,transparent)var(--tw-shadow-alpha),transparent)}\n}\n.s-hero__badge-icon{--tw-ring-color:#0000001a}\n.s-hero__frame{--tw-ring-color:#0000001a}\n@supports (color:color-mix(in lab, red, red)){\n.s-hero__badge-icon{--tw-ring-color:color-mix(in oklab,var(--color-black)10%,transparent)}\n.s-hero__frame{--tw-ring-color:color-mix(in oklab,var(--color-black)10%,transparent)}\n}\n.s-hero__badge{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;transition-duration:.15s;animation-duration:.15s}\n.s-hero:before{content:var(--tw-content);position:absolute;content:var(--tw-content);inset:var(--spacing);content:var(--tw-content);height:calc(100% - 8rem);content:var(--tw-content);border-radius:var(--radius-2xl);content:var(--tw-content);background-color:var(--color-muted)}\n@media (hover:hover){\n.s-hero__badge:hover{background-color:var(--color-foreground)}\n}\n@media (hover:hover){\n@supports (color:color-mix(in lab, red, red)){\n.s-hero__badge:hover{background-color:color-mix(in oklab,var(--color-foreground)5%,transparent)}\n}}\n@media (min-width:40rem){\n.s-hero__title{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}\n.s-hero:before{content:var(--tw-content);inset:calc(var(--spacing)*2)}\n}\n@media (min-width:48rem){\n.s-hero__media{margin-top:calc(var(--spacing)*16)}\n.s-hero__inner{padding-block:calc(var(--spacing)*36)}\n.s-hero:before{content:var(--tw-content);border-radius:2rem}\n}\n@media (min-width:64rem){\n.s-hero:before{content:var(--tw-content);height:calc(100% - 14rem)}\n}\n/* propio */\n.s-hero__badge{color:inherit;text-decoration:none}\n.s-hero__badge-icon svg{width:.75rem;height:.75rem;fill:#fff;stroke:#fff}\n.s-hero__frame{border-radius:var(--radius);aspect-ratio:16/9;display:grid;grid-template-rows:2.25rem 1fr}\n.s-hero__bar{display:flex;align-items:center;gap:.375rem;padding:0 .875rem;border-bottom:1px solid var(--border)}\n.s-hero__bar i{width:.5rem;height:.5rem;border-radius:50%;background:var(--input)}\n.s-hero__app{display:grid;grid-template-columns:22% 1fr;min-height:0}\n.s-hero__side{border-right:1px solid var(--border);padding:1rem;display:grid;align-content:start;gap:.625rem}\n.s-hero__main{padding:1.25rem;display:grid;grid-template-rows:auto 1fr;gap:1rem;min-height:0}\n.s-hero__line{height:.5rem;border-radius:99px;background:color-mix(in oklab,var(--foreground)8%,transparent)}\n.s-hero__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}\n.s-hero__card{border-radius:calc(var(--radius) - 2px);background:color-mix(in oklab,var(--foreground)4%,transparent);padding:.75rem;display:grid;gap:.5rem;align-content:start}\n.s-hero__chart{border-radius:calc(var(--radius) - 2px);border:1px solid var(--border);background:repeating-linear-gradient(0deg,transparent 0 23px,var(--border) 23px 24px);position:relative;overflow:hidden}\n.s-hero__chart svg{position:absolute;inset:auto 0 0 0;width:100%;height:70%;color:var(--foreground);opacity:.35}\n.s-hero__badge-icon{background:var(--primary)}\n.s-hero__badge-icon svg{fill:var(--primary-foreground);stroke:var(--primary-foreground)}\n" }, { "type": "standalone", "url": "https://componentes-lovat.vercel.app/r/hero.html" } ], "tokensFile": "https://componentes-lovat.vercel.app/tokens.css", "darkTheme": "add class 'dark' to ", "contexto": "landing", "densidad": "baja", "tono": "editorial", "states": [ "rest" ], "use": { "es": [ "Arriba de una landing, después de la barra de navegación." ], "en": [ "At the top of a landing page, below the navigation bar." ] }, "avoid": { "es": [ "Con más de dos botones: diluye la acción principal." ], "en": [ "With more than two buttons: it dilutes the main action." ] }, "a11y": { "roles": [ "region" ], "keyboard": [], "notes": { "es": [ "Un solo h1 por página: el título del hero.", "La ventana de la app es decorativa (aria-hidden), dibujada en HTML." ], "en": [ "One h1 per page: the hero headline.", "The app window is decorative (aria-hidden), drawn in HTML." ] }, "test": { "es": [ "El lector lee el anuncio, el título y los dos enlaces, y salta la ilustración." ], "en": [ "Screen readers read the badge, headline and both links, and skip the illustration." ] } }, "issues": { "es": [], "en": [] }, "credits": [ { "source": "Tailark mist (MIT) · hero-section/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" }, { "date": "2026-10-08", "es": "Partes editables declaradas (data-parte) para el Banco de Infinite Canvas.", "en": "Editable parts declared (data-parte) for the Infinite Canvas workbench." } ], "partes": [ { "id": "anuncio", "tipo": "texto", "nombre": { "es": "Anuncio", "en": "Announcement" }, "ocultable": true }, { "id": "titulo", "tipo": "texto", "nombre": { "es": "Título", "en": "Headline" } }, { "id": "frase", "tipo": "texto", "nombre": { "es": "Frase", "en": "Subtitle" }, "ocultable": true }, { "id": "accion", "tipo": "accion", "nombre": { "es": "Botón principal", "en": "Primary button" } }, { "id": "accion-2", "tipo": "accion", "nombre": { "es": "Botón secundario", "en": "Secondary button" }, "ocultable": true }, { "id": "imagen", "tipo": "imagen", "nombre": { "es": "Imagen", "en": "Image" }, "ocultable": true } ], "pieza": "https://componentes-lovat.vercel.app/r/hero.html" }