# Call to action / Llamado a la acción

> Closing band with a headline and two buttons.

Page: https://componentes-lovat.vercel.app/c/cta/  
License: MIT · Design: Tailark mist (MIT) · call-to-action/one  
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/cta/cta.html
- CSS: https://componentes-lovat.vercel.app/raw/cta/cta.css
- Everything in one file: https://componentes-lovat.vercel.app/r/cta.html

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

## When to use

- At the end of the page, before the footer.

## When not to use

- Repeated several times on one page.

## Accessibility

Roles: region

- The buttons are links whose text says where they go.

## Editable parts

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

## Code

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

```css
/* cta · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).
   Generado por tools/build_css.py desde cta.tw.json. No editar a mano. Necesita tokens.css. */
.s-cta__inner{margin-inline:auto}
.s-cta__actions{display:flex}
.s-cta__inner{max-width:var(--container-5xl)}
.s-cta__actions{justify-content:center;gap:calc(var(--spacing)*3)}
:where(.s-cta__box>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}
.s-cta__inner{padding-inline:calc(var(--spacing)*6)}
.s-cta{padding-block:calc(var(--spacing)*12)}
.s-cta__box{text-align:center}
.s-cta__title{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);text-wrap:balance;color:var(--color-foreground)}
@media (min-width:64rem){
.s-cta__title{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}
}
/* propio */
.s-cta__actions{flex-wrap:wrap}
```

## Credits

- Tailark mist (MIT) · call-to-action/one: https://github.com/tailark/blocks