Cards in One Column Template

0001-01-01

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.

When using the cards layout with article or container collections, only the "Huge" or "Original Size" image sizing options make any sense. You can select smaller image sizes, but that only governs the physical size of the image and the cards class will replace that with its own layout interpretation so you'll just end up with blurry images.

Standard Cards

cards paging before and after

Displaying results 4 - 6 of 13
Pages

Llamas 'R Us: The One-Stop Shop in a World Where Llamas Rule the Retail Roost

This News Story is Older Than Some of the Others. Praesent egestas sem nec neque. Nam rhoncus sapien dapibus orci. Praesent tortor eros, imperdiet id, blandit nec, fermentum eget, wisi. Morbi non urna.

Merry Christmas!

This is a summary of the news story. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Article for Testing

01/01/2020
By by Lilly Llama
Displaying results 4 - 6 of 13
Pages

Padded Cards

cards cards-padded

Llamas 'R Us: The One-Stop Shop in a World Where Llamas Rule the Retail Roost

This News Story is Older Than Some of the Others. Praesent egestas sem nec neque. Nam rhoncus sapien dapibus orci. Praesent tortor eros, imperdiet id, blandit nec, fermentum eget, wisi. Morbi non...

Merry Christmas!

This is a summary of the news story. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Article for Testing

01/01/2020
By by Lilly Llama

Fixed Size Image Cards (Huge Image)

Llamas 'R Us: The One-Stop Shop in a World Where Llamas Rule the Retail Roost

This News Story is Older Than Some of the Others. Praesent egestas sem nec neque. Nam rhoncus sapien dapibus orci. Praesent tortor eros, imperdiet id, blandit nec, fermentum eget, wisi. Morbi non...

Merry Christmas!

This is a summary of the news story. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Article for Testing

01/01/2020
By by Lilly Llama

Panorama Cards

Other image dimensions can be used:

  • image-ratio-square / image-ratio-1x1
  • image-ratio-portrait / image-ratio-3x4
  • image-landscape / image-ratio-4x3
  • image-ratio-wide / image-ratio-16x9
  • image-ratio-panorama / image-ratio-21x9
  • image-ratio-ultra-wide / image-ratio-21x7

Llamas 'R Us: The One-Stop Shop in a World Where Llamas Rule the Retail Roost

This News Story is Older Than Some of the Others. Praesent egestas sem nec neque. Nam rhoncus sapien dapibus orci. Praesent tortor eros, imperdiet id, blandit nec, fermentum eget, wisi. Morbi non...

Merry Christmas!

This is a summary of the news story. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Article for Testing

01/01/2020
By by Lilly Llama

Standard Cards with Date Overlay

Llamas 'R Us: The One-Stop Shop in a World Where Llamas Rule the Retail Roost

This News Story is Older Than Some of the Others. Praesent egestas sem nec neque. Nam rhoncus sapien dapibus orci. Praesent tortor eros, imperdiet id, blandit nec, fermentum eget, wisi. Morbi non...

Merry Christmas!

This is a summary of the news story. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Article for Testing

01/01/2020
By by Lilly Llama