Tier rules compare

Use this component to render a comparison of rules available and their point values for each tier. If a rule is not available for a certain tier, it will render an empty cell.

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 rule values in tier-0:

.lion-tier-rules-compare__row-cell--tier-0 .lion-tier-rules-compare__rule-value

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

.lion-tier-rules-compare__row-cell--current

Live preview

Code

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