{
  "name": "newsletter",
  "title": {
    "es": "Newsletter",
    "en": "Newsletter"
  },
  "summary": {
    "es": "Campo de correo y botón para suscribirse, con validación.",
    "en": "Email field and subscribe button, with validation."
  },
  "category": "sections",
  "status": "stable",
  "nivel": "componentes",
  "updated": "2026-09-30",
  "license": "MIT",
  "page": "https://componentes-lovat.vercel.app/c/newsletter/",
  "requires": [
    "button",
    "text-field"
  ],
  "files": [
    {
      "type": "html",
      "url": "https://componentes-lovat.vercel.app/raw/newsletter/newsletter.html",
      "content": "<section class=\"s-newsletter\" aria-labelledby=\"news-title\">\n  <div class=\"s-newsletter__inner\">\n    <div class=\"s-newsletter__grid\">\n      <div class=\"s-newsletter__intro\">\n        <h2 class=\"s-newsletter__title\" id=\"news-title\">Recibe cada componente nuevo</h2>\n        <p class=\"s-newsletter__lead\">Un correo al mes con lo que publicamos. Sin spam, te das de baja con un clic.</p>\n      </div>\n      <form class=\"s-newsletter__form\" novalidate data-c-validate data-c-demo>\n        <label class=\"c-label\" for=\"news-email\">Correo</label>\n        <div class=\"s-newsletter__row\">\n          <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>\n          <button class=\"c-btn c-btn--primary\" type=\"submit\">Suscribirme</button>\n        </div>\n        <p class=\"c-field__error\" id=\"news-email-err\"></p>\n        <p class=\"s-newsletter__note\">Al suscribirte aceptas recibir un correo al mes.</p>\n        <p class=\"s-newsletter__done\" role=\"status\" data-c-form-status></p>\n      </form>\n    </div>\n  </div>\n</section>\n"
    },
    {
      "type": "css",
      "url": "https://componentes-lovat.vercel.app/raw/newsletter/newsletter.css",
      "content": "/* newsletter · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).\n   Generado por tools/build_css.py desde newsletter.tw.json. No editar a mano. Necesita tokens.css. */\n.s-newsletter__inner{margin-inline:auto}\n.s-newsletter__lead{margin-top:calc(var(--spacing)*4)}\n.s-newsletter__grid{display:grid}\n.s-newsletter__inner{max-width:var(--container-5xl)}\n.s-newsletter__grid{gap:calc(var(--spacing)*8)}\n.s-newsletter{background-color:var(--color-muted)}\n@supports (color:color-mix(in lab, red, red)){\n.s-newsletter{background-color:color-mix(in oklab,var(--color-muted)50%,transparent)}\n}\n.s-newsletter__inner{padding-inline:calc(var(--spacing)*6)}\n.s-newsletter{padding-block:calc(var(--spacing)*16)}\n.s-newsletter__title{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}\n.s-newsletter__lead{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}\n.s-newsletter__note{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}\n.s-newsletter__title{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);text-wrap:balance}\n.s-newsletter__lead{text-wrap:balance}\n.s-newsletter__title{color:var(--color-foreground)}\n.s-newsletter__lead{color:var(--color-muted-foreground)}\n.s-newsletter__note{color:var(--color-muted-foreground)}\n@media (min-width:48rem){\n.s-newsletter__form{grid-column:span 2/span 2}\n.s-newsletter__intro{grid-column:span 3/span 3}\n.s-newsletter__grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(var(--spacing)*12)}\n.s-newsletter{padding-block:calc(var(--spacing)*24)}\n}\n@media (min-width:64rem){\n.s-newsletter__title{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}\n}\n/* propio */\n.s-newsletter__form{display:grid;gap:.75rem;align-content:center}\n.s-newsletter__row{display:flex;gap:.5rem;flex-wrap:wrap}\n.s-newsletter__row .c-input{flex:1 1 12rem;width:auto}\n.s-newsletter__form .c-field__error{margin:0}\n.s-newsletter__done{font-size:.875rem;color:var(--success-foreground)}\n.s-newsletter__done:empty{display:none}\n"
    },
    {
      "type": "standalone",
      "url": "https://componentes-lovat.vercel.app/r/newsletter.html"
    }
  ],
  "tokensFile": "https://componentes-lovat.vercel.app/tokens.css",
  "darkTheme": "add class 'dark' to <html>",
  "contexto": "landing",
  "densidad": "baja",
  "tono": "editorial",
  "states": [
    "rest"
  ],
  "use": {
    "es": [
      "Para reunir una lista de correo."
    ],
    "en": [
      "To build a mailing list."
    ]
  },
  "avoid": {
    "es": [
      "Sin decir qué y cada cuánto vas a enviar."
    ],
    "en": [
      "Without saying what you'll send and how often."
    ]
  },
  "a11y": {
    "roles": [
      "form"
    ],
    "keyboard": [],
    "notes": {
      "es": [
        "Etiqueta visible, error en texto junto al campo y foco en el campo al fallar."
      ],
      "en": [
        "Visible label, inline text error and focus on the field when it fails."
      ]
    },
    "test": {
      "es": [
        "Envía vacío: el foco vuelve al campo y se lee el error."
      ],
      "en": [
        "Submit empty: focus returns to the field and the error is read."
      ]
    }
  },
  "issues": {
    "es": [],
    "en": []
  },
  "credits": [
    {
      "source": "Tailark mist (MIT) · composición propia con call-to-action y footer",
      "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/newsletter.html"
}