14/Contenido

Pricing

Tarjetas de precio con plan destacado, lista de características y cambio entre pago mensual y anual.

Tres planes

Los botones data-cb-billing cambian los precios marcados con data-cb-price-monthly y data-cb-price-yearly.

Básico

$9/ mes

Para empezar sin complicaciones.

1 proyecto
Soporte por correo
Dominio propio

Elegir

ProPopular

$29/ mes

Para equipos que ya están creciendo.

10 proyectos
Soporte prioritario
Dominio propio

Elegir Pro ↗

Empresa

A medida

Contrato, SLA y facturación local.

Proyectos ilimitados
Soporte dedicado
SSO

Hablar con ventas

HTML

<div data-cb-pricing>
  <div class="cb-billing mt-0" role="group" aria-label="Periodo de pago">
    <button class="cb-billing__option" type="button" data-cb-billing="monthly" aria-pressed="true">Mensual</button>
    <button class="cb-billing__option" type="button" data-cb-billing="yearly">Anual −20%</button>
  </div>
  <div class="cb-pricing">
    <div class="cb-price">
      <div class="cb-price__top"><span class="cb-price__name">Básico</span></div>
      <div class="cb-price__amount"><span class="cb-price__value">$<span data-cb-price-monthly="9" data-cb-price-yearly="86">9</span></span><span class="cb-price__period"><span data-cb-billing-show="monthly">/ mes</span><span data-cb-billing-show="yearly" hidden>/ año</span></span></div>
      <p class="cb-price__desc">Para empezar sin complicaciones.</p>
      <ul class="cb-price__features"><li>1 proyecto</li><li>Soporte por correo</li><li class="is-off">Dominio propio</li></ul>
      <a href="#" class="cb-btn cb-btn--outline cb-price__cta">Elegir</a>
    </div>
    <div class="cb-price cb-price--featured">
      <div class="cb-price__top"><span class="cb-price__name">Pro</span><span class="cb-tag cb-tag--live">Popular</span></div>
      <div class="cb-price__amount"><span class="cb-price__value">$<span data-cb-price-monthly="29" data-cb-price-yearly="278">29</span></span><span class="cb-price__period"><span data-cb-billing-show="monthly">/ mes</span><span data-cb-billing-show="yearly" hidden>/ año</span></span></div>
      <p class="cb-price__desc">Para equipos que ya están creciendo.</p>
      <ul class="cb-price__features"><li>10 proyectos</li><li>Soporte prioritario</li><li>Dominio propio</li></ul>
      <a href="#" class="cb-btn cb-btn--primary cb-price__cta">Elegir Pro ↗</a>
    </div>
    <div class="cb-price">
      <div class="cb-price__top"><span class="cb-price__name">Empresa</span></div>
      <div class="cb-price__amount"><span class="cb-price__value">A medida</span></div>
      <p class="cb-price__desc">Contrato, SLA y facturación local.</p>
      <ul class="cb-price__features"><li>Proyectos ilimitados</li><li>Soporte dedicado</li><li>SSO</li></ul>
      <a href="#" class="cb-btn cb-btn--outline cb-price__cta">Hablar con ventas</a>
    </div>
  </div>
</div>

Clases y modificadores

Clase	Descripción
`.cb-pricing`	Grilla de 3 planes con bordes compartidos. `--2` y `--4` para otras cantidades.
`.cb-price`	Plan. `--featured` agrega fondo y línea superior de acento.
`.cb-price__name`, `.cb-price__value`, `.cb-price__period`	Nombre, precio y periodo.
`.cb-price__features`	Lista con ✓. `li.is-off` la tacha.
`.cb-price__cta`	Botón empujado al fondo.
`.cb-billing`, `.cb-billing__option`	Selector de periodo.

Atributos data-cb-*

Atributo	Descripción
`data-cb-pricing`	Contenedor que agrupa selector y precios.
`data-cb-billing="monthly\|yearly"`	Botón que cambia el periodo.
`data-cb-price-monthly` / `data-cb-price-yearly`	Valores del precio para cada periodo.
`data-cb-billing-show="periodo"`	Elemento visible solo en ese periodo.

JavaScript

Evento	Cuándo se dispara
`cb:change`	En el contenedor al cambiar de periodo (`detail.period`).

Accesibilidad

El selector es un grupo de botones con aria-pressed.
Las características desactivadas no deben comunicarse solo con el tachado; usa un texto claro.