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.
|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.|
An optional title on the front of the card.
An optional graphic on the front of the card.
The alternative text for the front image, if an image was provided.
Required. The contents of the front of the card.
Required. The text of the button used to flip to the back of the card.
An optional title on the back of the card.
An optional graphic on the back of the card.
The alternative text for the back image, if an image was provided.
Required. The contents of the back of the card.
Required. The text of the button used to flip to the front of the card.
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.