Pricing Comparativo

Contrato del layout

Un layout transporta anatomia, no pintura: se rellena por slots y depende del CSS de los componentes que lista. Instalarlo sin ellos lo deja sin estilos.

Slots

{{headline}}{{plan1_name}}{{plan1_price}}{{plan2_name}}{{plan2_price}}{{plan3_name}}{{plan3_price}}{{row1_feature}}{{row1_value1}}{{row1_value2}}{{row1_value3}}{{row2_feature}}{{row2_value1}}{{row2_value2}}{{row2_value3}}{{plan1_ctaLabel}}{{plan2_ctaLabel}}{{plan3_ctaLabel}}

Componentes requeridos

tablebuttonbadgetypography

Anatomía CSS

<div class="layoutPricingComparison">

</div>

CSS mínimo funcional

Autocontenido: sin imports ni tokens. Para previews y prototipos — en producción se consume el CSS del DS.

/* Layout: pricing-comparison — structure only */
.l-pricing-comparison {
  padding: 48px 32px;
}
.l-pricing-comparison__header {
  text-align: center;
  margin-bottom: 24px;
}
.l-pricing-comparison__ctas {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}