Cards

All the available cards styles in the current CSS layout framework are listed below. It may be possible to mix and match some of them - e.g. cards panorama cards-padded - so feel free to experiment, but don't expect that all combinations will work as expected on all screen sizes.

Default Cards

Simple Cards

cards cards-simple image-landscape + 200 character summary

Plain Cards + Justify Center + Paging

cards cards-plain cards-smaller justify-center image-ratio-1x1 image-ellipse link-cover + 200 character summary + Link thumbnails independently

Padded Cards

cards cards-padded

Cards with Contained Images

cards image-bg-color-white image-padding image-contain + Link cover

Fixed Shape/Size Image Cards (Landscape)

Note: The image physical size function (Original size, micro, tiny, small, etc...) doesn't make sense for cards, since the image fills the available card space no matter what. Additionally, the automatic responsive image sizing system creates properly sized images for different screen sizes. The only effect you can achieve with the image size option for cards is to make your images blurry by making the physical files too small. So you should always use the "Original size" image sizing option for cards.

The following image shapes can be applied. It's recommended to become familiar with the numbering syntax because this has more future potential flexibility:

• image-ratio-1x1 / image-ratio-square
• image-ratio-3x21 to image-ratio-7x21 (not currently available)
• image-ratio-9x21 / image-ratio-ultra-tall
• image-ratio-9x16 / image-ratio-tall
• image-ratio-2x3 / image-ratio-portrait-thin
• image-ratio-3x4 / image-ratio-portrait
• image-ratio-4x3 / image-ratio-4x3
• image-ratio-3x2 / image-ratio-4x3-thin
• image-ratio-16x9 / image-ratio-wide
• image-ratio-21x9 / image-ratio-panorama
• image-ratio-21x7 / image-ratio-ultra-wide
• image-ratio-21x5 / image-ratio-banner
• image-ratio-21x4 / image-ratio-strip-thick
• image-ratio-21x3 / image-ratio-strip

Below - cards image-ratio-4x3

Below - cards image-ratio-ultra-wide

Below - cards image-ratio-16x9

Below - cards image-ratio-1x1

Standard Cards with Date Overlay

cards date-overlay + Link cover

Cards in a Two Columns Block

Smaller Cards

cards cards-smaller

Cards Content Classes