# Comparison cards

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

<figure><img src="https://1036686854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJPnL__mOdr_mLZ8nwf%2Fuploads%2Fn8tvWNrjEaiwqVVWIzFU%2Fcomp_card2.png?alt=media&#x26;token=b562b9dc-49d8-435d-95b9-aa8fa18896da" alt=""><figcaption></figcaption></figure>

**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.&#x20;

**Highlighted**: if an option has been designated as "highlighted" in the [question settings](https://docs.formsort.com/adding-questions-and-content/question-reference/comparison#adding-choices), the styling for the highlighted card can be set here.&#x20;

**Selected**: styling for when a card has been selected by the user.&#x20;

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

<figure><img src="https://1036686854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJPnL__mOdr_mLZ8nwf%2Fuploads%2FP8CtfFACPbpLE4THLT44%2Fcomp_card3.png?alt=media&#x26;token=bcb2b726-9924-4c78-8beb-e00413a81832" alt=""><figcaption></figcaption></figure>

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

* Wra&#x70;**:** if the container holding the cards exceeds the width allotted for the container of the step, the cards will begin to stack vertically.&#x20;
* Scroll: if the cards exceed the width allotted, the a horizontal scroll will become available.&#x20;

Related pages: [Content Types: Comparison](https://docs.formsort.com/adding-questions-and-content/question-reference/comparison)