Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
magna web studio
Contact us! Contact us!
WB-Developers' Corner
WB-Developers' Corner
       [rz] Card

This pure CSS extension builds simple yet versatile and extremely lightweight cards-style information blocks.

Some features:

- 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.

...and more!

HTML 4.01 Transitional
W3C compliant


* Just a brief about some of the changes that were made lately...

* New in version 1.1

- Optional image zoom when the mouse is over the card.

How to use?

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.

w3c compliant
© 2012-20 by MAGNA web studio • all rights reserved

new shop with