Comparison cards

Configuring your comparison cards

In the Theme menu, there are three options for styling comparison cards: Default, Highlighted, and Selected.

Default: this is the default state of the card, and inherits styling from the default theme. No additional configuration is required except adding a comparison card to the step, but additional/differentiating styling can be added if desired.

Highlighted: if an option has been designated as "highlighted" in the question settings, the styling for the highlighted card can be set here.

Selected: styling for when a card has been selected by the user.

Each of the above three configurations can be further styled on a per-UI state basis: default and hover.

The horizontal overflow behavior selector controls how the cards fill the space on the step, and has two settings, wrap and scroll.

• Wrap: if the container holding the cards exceeds the width allotted for the container of the step, the cards will begin to stack vertically.

• Scroll: if the cards exceed the width allotted, the a horizontal scroll will become available.

Related pages: Content Types: Comparison