Card

Cards are 2-sided blocks containing an image at the top and text beneath that will switch between each side using your selected animation. Cards are most effective when they are half-screen, but can be used full-width if the situation requires.

• Cards work well when posing a scenario question on the front and providing additional guidance on the back.
• Cards can be used to force the user to pause, then “flip” to get more information.

• Cards are visually striking elements and lose most of their appeal if there’s not an image.
• Cards should be small. If there is considerable text to be included in either side, it may be difficult for users of mobile devices to use if they have to click the button to flip the card, then scroll back up to see everything.

The Card inherits all the settings common to the Presentation Components.

Determines the animation style when switching between front and back.

Setting	Description
Fade (default)	The cards fade between each side.
Flip	The card “flips” like a real card between front and back.
Slide	The cards slide from between the front and back.

Card Front

Card Graphic

The graphics for the card are fairly strict. The header’s are height-constrained to allow for the 3D flipping effect. Larger images can be used, however, they will be scaled to just slightly larger than the display area, then cropped. Because of this, it’s important to use images that conform to the sizes specified. Images smaller than the recommended size will be pixelated and should be avoided.

In a card that is half-width (the preferred size), the graphics should be 448px x 242px.

In a card that is full-width, the graphics should be 984px x 242px.