# Hero / Hero

> The first screen: announcement, headline, subtitle, two buttons and a product view.

Page: https://componentes-lovat.vercel.app/c/hero/  
License: MIT · Design: Tailark mist (MIT) · hero-section/two  
Requires: tokens.css, button  
Context: landing · Density: baja · Tone: editorial

## Files

- Tokens (once): https://componentes-lovat.vercel.app/tokens.css
- Dependency `button`: https://componentes-lovat.vercel.app/r/button.json
- HTML: https://componentes-lovat.vercel.app/raw/hero/hero.html
- CSS: https://componentes-lovat.vercel.app/raw/hero/hero.css
- Everything in one file: https://componentes-lovat.vercel.app/r/hero.html

Dark theme: add class `dark` to `<html>`.

## When to use

- At the top of a landing page, below the navigation bar.

## When not to use

- With more than two buttons: it dilutes the main action.

## Accessibility

Roles: region

- One h1 per page: the hero headline.
- The app window is decorative (aria-hidden), drawn in HTML.

## Editable parts

Marked with `data-parte` in the HTML.
- `anuncio` (texto) · can be hidden: Announcement
- `titulo` (texto): Headline
- `frase` (texto) · can be hidden: Subtitle
- `accion` (accion): Primary button
- `accion-2` (accion) · can be hidden: Secondary button
- `imagen` (imagen) · can be hidden: Image

## Code

```html
<section class="s-hero" aria-labelledby="hero-title">
  <div class="s-hero__inner">
    <div class="s-hero__copy">
      <a class="s-hero__badge" href="#novedades" data-parte="anuncio">
        <span class="s-hero__badge-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 2l2.4 7.6L22 12l-7.6 2.4L12 22l-2.4-7.6L2 12l7.6-2.4z"/></svg></span>
        <span class="s-hero__badge-text">Nuevo: tema oscuro automático</span>
      </a>
      <h1 class="s-hero__title" id="hero-title" data-parte="titulo">Construye tu web en una tarde</h1>
      <p class="s-hero__lead" data-parte="frase">Componentes listos para copiar, accesibles y sin dependencias.</p>
      <div class="s-hero__actions">
        <a class="c-btn c-btn--primary c-btn--lg" href="#empezar" data-parte="accion">Empezar</a>
        <a class="c-btn c-btn--outline c-btn--lg" href="#demo" data-parte="accion-2">Ver demo</a>
      </div>
    </div>
    <div class="s-hero__media" aria-hidden="true" data-parte="imagen">
      <div class="s-hero__frame">
        <div class="s-hero__bar"><i></i><i></i><i></i></div>
        <div class="s-hero__app">
          <div class="s-hero__side"><span class="s-hero__line" style="width:70%"></span><span class="s-hero__line"></span><span class="s-hero__line" style="width:85%"></span><span class="s-hero__line" style="width:60%"></span><span class="s-hero__line" style="width:75%"></span></div>
          <div class="s-hero__main">
            <div class="s-hero__cards">
              <div class="s-hero__card"><span class="s-hero__line" style="width:50%"></span><span class="s-hero__line" style="width:80%;height:.9rem"></span></div>
              <div class="s-hero__card"><span class="s-hero__line" style="width:40%"></span><span class="s-hero__line" style="width:70%;height:.9rem"></span></div>
              <div class="s-hero__card"><span class="s-hero__line" style="width:55%"></span><span class="s-hero__line" style="width:60%;height:.9rem"></span></div>
            </div>
            <div class="s-hero__chart"><svg viewBox="0 0 400 100" preserveAspectRatio="none" fill="none" stroke="currentColor" stroke-width="2"><path d="M0 80 C40 70 60 40 100 50 S160 85 200 60 S280 20 320 30 S380 10 400 15"/></svg></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
```

```css
/* hero · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).
   Generado por tools/build_css.py desde hero.tw.json. No editar a mano. Necesita tokens.css. */
.s-hero{position:relative}
.s-hero__copy{position:relative}
.s-hero__badge-icon{position:relative}
.s-hero__media{position:relative}
.s-hero__frame{position:relative}
.s-hero__copy{z-index:10}
.s-hero__media{z-index:10}
.s-hero__copy{margin-inline:auto}
.s-hero__badge{margin-inline:auto}
.s-hero__title{margin-inline:auto}
.s-hero__lead{margin-inline:auto}
.s-hero__media{margin-inline:auto}
.s-hero__frame{margin-inline:auto}
.s-hero__lead{margin-block:calc(var(--spacing)*6)}
.s-hero__title{margin-top:calc(var(--spacing)*8)}
.s-hero__media{margin-top:calc(var(--spacing)*12)}
.s-hero__badge{display:flex}
.s-hero__badge-icon{display:flex}
.s-hero__actions{display:flex}
.s-hero__badge-icon{width:calc(var(--spacing)*5);height:calc(var(--spacing)*5)}
.s-hero__badge{width:fit-content}
.s-hero__title{max-width:var(--container-3xl)}
.s-hero__copy{max-width:var(--container-5xl)}
.s-hero__media{max-width:var(--container-5xl)}
.s-hero__lead{max-width:var(--container-xl)}
.s-hero__badge{align-items:center}
.s-hero__badge-icon{align-items:center}
.s-hero__actions{align-items:center}
.s-hero__badge{justify-content:center}
.s-hero__badge-icon{justify-content:center}
.s-hero__actions{justify-content:center}
.s-hero__badge{gap:calc(var(--spacing)*2)}
.s-hero__actions{gap:calc(var(--spacing)*3)}
.s-hero{overflow:hidden}
.s-hero__frame{overflow:hidden}
.s-hero__badge-icon{border-radius:.25rem}
.s-hero__badge{border-radius:var(--radius-md)}
.s-hero__badge-icon{border-style:var(--tw-border-style);border-width:1px}
.s-hero__frame{border-style:var(--tw-border-style);border-width:1px}
.s-hero__badge-icon{border-color:var(--color-background)}
.s-hero__frame{border-color:#0000;background-color:var(--color-background)}
.s-hero__copy{padding-inline:calc(var(--spacing)*6)}
.s-hero__media{padding-inline:calc(var(--spacing)*6)}
.s-hero__badge{padding-block:calc(var(--spacing)*.5)}
.s-hero__inner{padding-block:calc(var(--spacing)*20)}
.s-hero__badge{padding-right:calc(var(--spacing)*3);padding-left:var(--spacing)}
.s-hero__copy{text-align:center}
.s-hero__title{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}
.s-hero__lead{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}
.s-hero__title{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}
.s-hero__badge-text{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}
.s-hero__title{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight);text-wrap:balance}
.s-hero__lead{text-wrap:balance;color:var(--color-muted-foreground)}
.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)}
.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)}
.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}
@supports (color:color-mix(in lab, red, red)){
.s-hero__frame{--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-black)10%,transparent)var(--tw-shadow-alpha),transparent)}
}
.s-hero__badge-icon{--tw-shadow-color:#0003}
@supports (color:color-mix(in lab, red, red)){
.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)}
}
.s-hero__badge-icon{--tw-ring-color:#0000001a}
.s-hero__frame{--tw-ring-color:#0000001a}
@supports (color:color-mix(in lab, red, red)){
.s-hero__badge-icon{--tw-ring-color:color-mix(in oklab,var(--color-black)10%,transparent)}
.s-hero__frame{--tw-ring-color:color-mix(in oklab,var(--color-black)10%,transparent)}
}
.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}
.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)}
@media (hover:hover){
.s-hero__badge:hover{background-color:var(--color-foreground)}
}
@media (hover:hover){
@supports (color:color-mix(in lab, red, red)){
.s-hero__badge:hover{background-color:color-mix(in oklab,var(--color-foreground)5%,transparent)}
}}
@media (min-width:40rem){
.s-hero__title{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}
.s-hero:before{content:var(--tw-content);inset:calc(var(--spacing)*2)}
}
@media (min-width:48rem){
.s-hero__media{margin-top:calc(var(--spacing)*16)}
.s-hero__inner{padding-block:calc(var(--spacing)*36)}
.s-hero:before{content:var(--tw-content);border-radius:2rem}
}
@media (min-width:64rem){
.s-hero:before{content:var(--tw-content);height:calc(100% - 14rem)}
}
/* propio */
.s-hero__badge{color:inherit;text-decoration:none}
.s-hero__badge-icon svg{width:.75rem;height:.75rem;fill:#fff;stroke:#fff}
.s-hero__frame{border-radius:var(--radius);aspect-ratio:16/9;display:grid;grid-template-rows:2.25rem 1fr}
.s-hero__bar{display:flex;align-items:center;gap:.375rem;padding:0 .875rem;border-bottom:1px solid var(--border)}
.s-hero__bar i{width:.5rem;height:.5rem;border-radius:50%;background:var(--input)}
.s-hero__app{display:grid;grid-template-columns:22% 1fr;min-height:0}
.s-hero__side{border-right:1px solid var(--border);padding:1rem;display:grid;align-content:start;gap:.625rem}
.s-hero__main{padding:1.25rem;display:grid;grid-template-rows:auto 1fr;gap:1rem;min-height:0}
.s-hero__line{height:.5rem;border-radius:99px;background:color-mix(in oklab,var(--foreground)8%,transparent)}
.s-hero__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.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}
.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}
.s-hero__chart svg{position:absolute;inset:auto 0 0 0;width:100%;height:70%;color:var(--foreground);opacity:.35}
.s-hero__badge-icon{background:var(--primary)}
.s-hero__badge-icon svg{fill:var(--primary-foreground);stroke:var(--primary-foreground)}
```

## Credits

- Tailark mist (MIT) · hero-section/two: https://github.com/tailark/blocks