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

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

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.