A comparison is a visualisation of the differences in a
user's policy compared to other existing variants (GO, PLUS, RACE
etc...)
The comparison component is entirely data driven and so does not include an actual component within skin-foundation. Instead, you should mark it up per use in your application.
| Your Policy | GO | PLUS | RACE | |
|---|---|---|---|---|
| Public Liability | £1m | £1m | £1m | |
| Race Fees | 400 | 400 | ||
| Medical Expenses | £20k | £20k | ||
| Show all features | ||||
| Theft | ||||
| Premium | 32.50 | 34.20 | 12.70 | 56.50 |
| SELECT | SELECT | SELECT | ||
A comparison has multiple sections including (but not limited to):
comparison__section--impacted-features)comparison__section--equal-features)comparison__section--premiums)
By default the "Equal Features" on a comparison are hidden. In order to show them we have a caption element containing an a tag that will toggle their visibility.
i.e.
<caption>
<a
href="#"
id="comparison-feature-toggle"
class="button button--flat"
>
Show/hide equal features
</a>
</caption>
A comparison has features which contains impacts. Impacts are measured against the policy and can either be:
comparison__value--impact-positive)
comparison__value--impact-neutral)
comparison__value--impact-negative)
| Medical Expenses | 700 | 900 | 450 | 700 |
The comparisonValueImpact macro can be used to generate the class name
for a given impact.
<td class="{{ comparisonValueImpact(-1) }}">700</td>