ComponentesComponents

Newsletter

Campo de correo y botón para suscribirse, con validación.Email field and subscribe button, with validation.

DiseñoDesign: Tailark mist (MIT) · composición propia con call-to-action y footerMITlanding · densidaddensity baja · editorialMarkdownJSON

CódigoCode

<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>

«Todo» trae tokens, dependencias y componente en un solo archivo, listo para abrir o dárselo a un agente.“All” bundles tokens, dependencies and the component in one file, ready to open or hand to an agent.

InstalaciónInstallation

  1. Agrega una vezAdd once tokens.css (colores, radios, tema oscuro).(colors, radii, dark theme).
  2. Agrega también:Also add: BotónButton, Campo de textoText field.
  3. Copia los archivos:Copy the files: newsletter.html, newsletter.css.
  4. Para el tema oscuro, pon la claseFor the dark theme, add the class dark ento <html>.

Cuándo usarloWhen to use it

ÚsaloUse it

  • Para reunir una lista de correo.
  • To build a mailing list.

Mejor noAvoid

  • Sin decir qué y cada cuánto vas a enviar.
  • Without saying what you'll send and how often.

AccesibilidadAccessibility

form
  • Etiqueta visible, error en texto junto al campo y foco en el campo al fallar.
  • Visible label, inline text error and focus on the field when it fails.

Cómo probarloHow to test it

  • Envía vacío: el foco vuelve al campo y se lee el error.
  • Submit empty: focus returns to the field and the error is read.

CréditosCredits