This pure CSS extension builds simple yet versatile and extremely lightweight cards-style information blocks.
- Fixed, RWD and fluid support. - Panels configuration. - Optional image with standard or proportional sizing. - Optional links with highly configurable buttons. - Versatile buttons sizing with optional braklines. - Selectable standard (shorter) or more compatible (larger) CSS. - Zoom effect with smart z-order handling. - Zoom with optional "heartbeat" mode. - Mobiles support. - No libraries, no jQuery, no extra dependencies.
1. Drag and drop an extension instance. 2. Optionally, select the image and its style and appearance. 3. Enter the (optional) caption, the (optional) text areas and the (optional) buttons area and their styles. 4. Optionally, select the zoom effect and its behavior. 5. Preview or publish.
How to pair the height with other instances?
In case you have a group of cards with different information and you want them to have the same height in a fluid scenario, then you can do the following:
1. Once you have the fluid scheme, usually a layout grid, drag and drop the [rz] Card instances within that layout grid. 2. Drag and drop the [rz] Card (height) module in the workspace. 3. Open the properties dialog box and enter the [rz] Card instance names separated by commas and the breakpoint size (it is highly recommendad that this value will be the same as the breakpoint size in the layout grid. 4. Preview or publish.