Comercio

Estado: Estable

Tarjeta de precio

La tarjeta de una página de precios con el lenguaje del sistema: capas, borde de 1px y luz al pasar el cursor. Recibe nombre, precio, periodo y beneficios sueltos; la destacada lleva el acento y su brillo. La compra real entra por un slot.

Más popular

Paquete

10 clases

Para venir dos o tres veces por semana.

$1,350 MXN

10 clases · $135 por clase

Vigencia de 60 días

  • Todas las clases del horario
  • Reserva con 7 días de anticipación
  • Lista de espera
Comprar paquete

app/views/… (la demo de arriba)

<%# Datos sueltos: nombre, precio, periodo y beneficios. La compra real va en el
    slot with_action (un button_to al checkout, con card.cta_classes). %>
<div class="@container w-full max-w-3xl">
  <div class="grid gap-6 pt-3 @xl:grid-cols-2">
    <%= render Ui::PricingCardComponent.new(label: "Paquete", name: "10 clases", price: 1350, featured: true, href: "#",
                                            description: "Para venir dos o tres veces por semana.",
                                            summary: "10 clases · $135 por clase", note: "Vigencia de 60 días",
                                            features: [ "Todas las clases del horario", "Reserva con 7 días de anticipación", "Lista de espera" ],
                                            cta_label: "Comprar paquete") %>
    <%= render Ui::PricingCardComponent.new(label: "Suscripción", name: "Ilimitado mensual", price: 1800, period: "mes", href: "#",
                                            description: "Todas las clases que quieras.", summary: "Se renueva cada mes",
                                            features: [ "Clases ilimitadas", "Reserva prioritaria", "Cancela cuando quieras" ],
                                            cta_label: "Suscribirme", class: "hidden @xl:flex") %>
  </div>
</div>

Qué hace

  • Una sola destacada por página, con el acento y su brillo.
  • Altura pareja en la cuadrícula y la acción siempre al pie.
  • Ui::ButtonComponent.classes para que un button_to propio luzca igual.

Props

Nombre Tipo Default Descripción
name / price String / Numeric — Lo que se vende y su precio (con separador de miles; centavos si los hay).
currency / period String "MXN" / nil La unidad junto al precio: «MXN» o «MXN / mes».
label / description String nil La etiqueta sobre el nombre («Plan», «Paquete») y una línea que lo explica.
summary / note String nil Lo que distingue a la opción bajo el precio, y una nota (vigencia, condiciones).
featured Boolean false Destaca la opción con borde del acento y brillo.
badge String "Más popular" Etiqueta superior; la destacada la lleva sola.
features / extra_features Array<String> [] Los beneficios, o algunos más sobre los de siempre.
href / cta_label String nil Botón de enlace cuando no hay slot (visitante sin sesión).
current Boolean false Marca "Tu plan actual" y quita la compra.
with_action slot — El button_to real al checkout; usa card.cta_classes para el estilo.

Accesibilidad