# Newsletter / Newsletter

> Email field and subscribe button, with validation.

Page: https://componentes-lovat.vercel.app/c/newsletter/  
License: MIT · Design: Tailark mist (MIT) · composición propia con call-to-action y footer  
Requires: tokens.css, button, text-field  
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
- Dependency `text-field`: https://componentes-lovat.vercel.app/r/text-field.json
- HTML: https://componentes-lovat.vercel.app/raw/newsletter/newsletter.html
- CSS: https://componentes-lovat.vercel.app/raw/newsletter/newsletter.css
- Everything in one file: https://componentes-lovat.vercel.app/r/newsletter.html

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

## When to use

- To build a mailing list.

## When not to use

- Without saying what you'll send and how often.

## Accessibility

Roles: form

- Visible label, inline text error and focus on the field when it fails.

## Code

```html
<section class="s-newsletter" aria-labelledby="news-title">
  <div class="s-newsletter__inner">
    <div class="s-newsletter__grid">
      <div class="s-newsletter__intro">
        <h2 class="s-newsletter__title" id="news-title">Recibe cada componente nuevo</h2>
        <p class="s-newsletter__lead">Un correo al mes con lo que publicamos. Sin spam, te das de baja con un clic.</p>
      </div>
      <form class="s-newsletter__form" novalidate data-c-validate data-c-demo>
        <label class="c-label" for="news-email">Correo</label>
        <div class="s-newsletter__row">
          <span class="c-input"><input class="c-input__field" id="news-email" name="email" type="email" autocomplete="email" placeholder="tu@correo.com" required aria-describedby="news-email-err" data-c-msg="Escribe un correo con el formato nombre@dominio.com."></span>
          <button class="c-btn c-btn--primary" type="submit">Suscribirme</button>
        </div>
        <p class="c-field__error" id="news-email-err"></p>
        <p class="s-newsletter__note">Al suscribirte aceptas recibir un correo al mes.</p>
        <p class="s-newsletter__done" role="status" data-c-form-status></p>
      </form>
    </div>
  </div>
</section>
```

```css
/* newsletter · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).
   Generado por tools/build_css.py desde newsletter.tw.json. No editar a mano. Necesita tokens.css. */
.s-newsletter__inner{margin-inline:auto}
.s-newsletter__lead{margin-top:calc(var(--spacing)*4)}
.s-newsletter__grid{display:grid}
.s-newsletter__inner{max-width:var(--container-5xl)}
.s-newsletter__grid{gap:calc(var(--spacing)*8)}
.s-newsletter{background-color:var(--color-muted)}
@supports (color:color-mix(in lab, red, red)){
.s-newsletter{background-color:color-mix(in oklab,var(--color-muted)50%,transparent)}
}
.s-newsletter__inner{padding-inline:calc(var(--spacing)*6)}
.s-newsletter{padding-block:calc(var(--spacing)*16)}
.s-newsletter__title{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}
.s-newsletter__lead{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}
.s-newsletter__note{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
.s-newsletter__title{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);text-wrap:balance}
.s-newsletter__lead{text-wrap:balance}
.s-newsletter__title{color:var(--color-foreground)}
.s-newsletter__lead{color:var(--color-muted-foreground)}
.s-newsletter__note{color:var(--color-muted-foreground)}
@media (min-width:48rem){
.s-newsletter__form{grid-column:span 2/span 2}
.s-newsletter__intro{grid-column:span 3/span 3}
.s-newsletter__grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(var(--spacing)*12)}
.s-newsletter{padding-block:calc(var(--spacing)*24)}
}
@media (min-width:64rem){
.s-newsletter__title{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}
}
/* propio */
.s-newsletter__form{display:grid;gap:.75rem;align-content:center}
.s-newsletter__row{display:flex;gap:.5rem;flex-wrap:wrap}
.s-newsletter__row .c-input{flex:1 1 12rem;width:auto}
.s-newsletter__form .c-field__error{margin:0}
.s-newsletter__done{font-size:.875rem;color:var(--success-foreground)}
.s-newsletter__done:empty{display:none}
```

## Credits

- Tailark mist (MIT) · composición propia con call-to-action y footer: https://github.com/tailark/blocks