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
10
-
12
of
13
Pages
Test Article
01/01/2020
This article has a long summary. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna id volutpat lacus laoreet. Dolor sit amet consectetur adipiscing elit. Cursus vitae congue mauris rhoncus aenean vel. Interdum posuere lorem ipsum dolor sit amet consectetur. Id nibh tortor id aliquet. At imperdiet dui accumsan sit. Vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Purus sit amet luctus venenatis lectus magna fringilla. Arcu bibendum at varius vel pharetra vel turpis. Nibh tellus molestie nunc non blandit massa enim. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Lacinia quis vel eros donec. Ridiculus mus mauris vitae ultricies leo integer malesuada nunc vel.
Displaying results
10
-
12
of
13
Pages
Padded Cards
cards cards-padded
Test Article
01/01/2020
This article has a long summary. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna id volutpat lacus laoreet. Dolor sit...
Displaying results
10
-
12
of
13
Pages
Test Article
01/01/2020
This article has a long summary. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna id volutpat lacus laoreet. Dolor sit amet consectetur adipiscing elit. Cursus vitae congue mauris rhoncus aenean vel. Interdum posuere lorem ipsum dolor sit amet consectetur. Id nibh tortor id aliquet. At imperdiet dui accumsan sit. Vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Purus sit amet luctus venenatis lectus magna fringilla. Arcu bibendum at varius vel pharetra vel turpis. Nibh tellus molestie nunc non blandit massa enim. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Lacinia quis vel eros donec. Ridiculus mus mauris vitae ultricies leo integer malesuada nunc vel.
Displaying results
10
-
12
of
13
Pages
Fixed Size Image Cards (Huge Image)
Test Article
01/01/2020
This article has a long summary. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna id volutpat lacus laoreet. Dolor sit...
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
Test Article
01/01/2020
This article has a long summary. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna id volutpat lacus laoreet. Dolor sit...
Standard Cards with Date Overlay
Test Article
01/01/2020
This article has a long summary. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna id volutpat lacus laoreet. Dolor sit...