Little WP
Recursos para arrancar tu proyecto
Business WP
Velocidad y capacidad enterprise
Patrones
La presentación comercial de una oferta: un selector de periodo encima y una fila de tarjetas, cada una con su precio, su botón y la lista de lo que incluye.
Una tarjeta con el atributo raised, que la apoya sobre una sombra desplazada y la despega hacia ella al pasar el ratón. Dentro, y en este orden: la cinta (una etiqueta de oferta con la clase ribbon de la tarjeta, que la pone a caballo de su borde superior), la descripción, el precio, el ahorro, el botón de contratar, un hr como separador y la lista de comprobaciones.
Destacar un plan es ponerle la clase de una superficie de marca: además del fondo, esa superficie le da otro color a la sombra a través de --card--color--shadow.
El precio y las marcas de la lista se agrandan dentro de una tarjeta de plan redefiniendo --price--font-size--amount y --checklist--size--marker.
Recursos para arrancar tu proyecto
Velocidad y capacidad enterprise
<vadavo-segmented-control variant="period">
<button data-pressed>Mensual</button>
<button>Anual <span class="badge offer callout">2 meses gratis</span></button>
</vadavo-segmented-control>
<vadavo-card raised>
<h3>Little WP</h3>
<p>Recursos para arrancar tu proyecto</p>
<vadavo-price amount="46,90" suffix="€ / mes"></vadavo-price>
<a class="button secondary" href="javascript:void(0)">Contratar</a>
<hr>
<vadavo-checklist disc>
<li>Capacidad para 2 dominios</li>
<li>10 GB SSD NVMe</li>
<li>Certificado SSL incluido</li>
<li>Panel VADAVO DESK incluido</li>
</vadavo-checklist>
</vadavo-card>
<vadavo-card raised class="spotlight">
<span class="badge offer callout ribbon">Mejor relación calidad-precio</span>
<h3>Business WP</h3>
<p>Velocidad y capacidad enterprise</p>
<vadavo-price amount="11,40" suffix="€ / mes"></vadavo-price>
<span class="badge offer callout">Ahorras 22 €</span>
<a class="button primary" href="javascript:void(0)">Contratar</a>
<hr>
<vadavo-checklist disc>
<li>Capacidad para 10 dominios</li>
<li>40 GB SSD NVMe</li>
<li>Copias diarias de 30 días</li>
<li>Git para desarrolladores</li>
</vadavo-checklist>
</vadavo-card>El botón de contratar lleva las clases button primary. Dentro de una tarjeta con la clase spotlight, su color de fondo y el que toma al apuntarlo salen de los valores que fija esa superficie (ver Arquitectura).