# Card

The **Card** component provides a versatile container for presenting content with a two-sided interactive format. Users can flip between "Side A" and "Side B" to view different content, creating an engaging and space-efficient presentation method.

## Style settings

<table><thead><tr><th width="229">Property</th><th>Description</th></tr></thead><tbody><tr><td><strong>Card</strong></td><td></td></tr><tr><td>Height</td><td>Set the overall card height in pixels</td></tr><tr><td>Width<br></td><td>Define the card width in pixels</td></tr><tr><td>Rounding<br></td><td>Adjust the corner radius of the card</td></tr><tr><td>Display border</td><td>Toggle border visibility around the card (Yes/No</td></tr><tr><td>Border color</td><td>Select the border color</td></tr><tr><td>Thickness<br></td><td>Set the border thickness in pixels</td></tr><tr><td><strong>Flip button</strong></td><td></td></tr><tr><td>Height</td><td>Specify the flip button height in pixels</td></tr><tr><td>Width<br></td><td>Define the flip button width in pixels</td></tr><tr><td>Rounding</td><td>Adjust the corner radius of the flip button</td></tr><tr><td>Hover color<br></td><td>Set the color that appears when users hover over the flip button</td></tr><tr><td><strong>Side A</strong></td><td></td></tr><tr><td>Background color</td><td>Select the background color for Side A</td></tr><tr><td>Alignment<br></td><td>Choose content alignment (left, center, or right)</td></tr><tr><td>Flip icon upload</td><td>Upload a custom icon for Side A flip button</td></tr><tr><td>Button background</td><td>Set the background color for Side A flip button</td></tr><tr><td>Icon color<br></td><td>Define the color for the icon within Side A flip button</td></tr><tr><td>Button position</td><td><p>Choose from multiple position options for the flip button placement on Side A:</p><ul><li>Upper-left corner</li><li>Upper-right corner</li><li>Lower-left corner</li><li>Lower-right corner</li></ul></td></tr><tr><td><strong>Side B</strong></td><td></td></tr><tr><td>Background color</td><td>Select the background color for Side B</td></tr><tr><td>Alignment</td><td>Choose content alignment (left, center, or right)</td></tr><tr><td>Flip icon upload</td><td>Upload a custom icon for Side B flip button</td></tr><tr><td>Button background<br></td><td>Set the background color for Side B flip button</td></tr><tr><td>Icon color<br></td><td>Define the color for the icon within Side B flip button</td></tr><tr><td>Button position</td><td><p>Choose from multiple position options for the flip button placement on Side B:</p><ul><li>Upper-left corner</li><li>Upper-right corner</li><li>Lower-left corner</li><li>Lower-right corner</li></ul></td></tr><tr><td>Card shadow</td><td>Click the "+" icon to add shadow effects. Select from shadow styles: None, Soft, Regular, or Retro. </td></tr><tr><td><strong>Animation</strong></td><td></td></tr><tr><td>Type</td><td><p>Select the animation trigger type:</p><ul><li>Click</li><li>Hover</li></ul></td></tr><tr><td>Card flip<br></td><td><p>Choose the flip animation style:</p><ul><li>Horizontal flip</li><li>Vertical flip</li><li>Diagonal flip</li><li>Book</li><li>Fade effect</li></ul></td></tr></tbody></table>

## Typography settings

Use **Rich-text options** on the **Typography** tab to apply specific formatting to selected text within cards. Changes made here affect only the text in the Card element:

* Basic
* Headings
* Caption
* List
* Quote
* Link

For details on how to configure parameters in rich-text options, see [Typography and fonts](https://help.parta.io/branding/create-branding/typography-and-fonts).<br>