ComponentesComponents

Llamado a la acciónCall to action

Banda final con título y dos botones.Closing band with a headline and two buttons.

DiseñoDesign: Tailark mist (MIT) · call-to-action/oneMITlanding · densidaddensity baja · editorialMarkdownJSON

CódigoCode

<section class="s-cta" aria-labelledby="cta-title">
  <div class="s-cta__inner">
    <div class="s-cta__box">
      <h2 class="s-cta__title" id="cta-title" data-parte="titulo">Empieza a construir hoy</h2>
      <div class="s-cta__actions">
        <a class="c-btn c-btn--primary c-btn--lg" href="#empezar" data-parte="accion">Empezar gratis</a>
        <a class="c-btn c-btn--outline c-btn--lg" href="#demo" data-parte="accion-2">Pedir una demo</a>
      </div>
    </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.
  3. Copia los archivos:Copy the files: cta.html, cta.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

  • Al final de la página, antes del footer.
  • At the end of the page, before the footer.

Mejor noAvoid

  • Repetida varias veces en la misma página.
  • Repeated several times on one page.

AccesibilidadAccessibility

region
  • Los botones son enlaces con texto que dice adónde llevan.
  • The buttons are links whose text says where they go.

Cómo probarloHow to test it

  • Tab pasa por los dos enlaces.
  • Tab moves through both links.

CréditosCredits