Tier benefits compare

Use this component to render a comparison of the benefits available to each tier. These will (by default) be color coded based on the tier’s color, but can be overridden using css.

Each td will have a css class indicating the tier it is a part of (numbered based on position, from 0), for example to select the benefit status circles in tier-0:

.lion-tier-benefits-compare__row-cell--tier-0 .lion-tier-benefits-compare__benefit-status-circle

If a benefit is enabled for a tier, it will contain a --enabled modifier:


If customer is logged in it will attach a --current modifier to the tier that customer is currently in:


Live preview


<div data-lion-tier-benefits-compare></div>