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 + Read more text + Link cover
This Item Has Summary Classes
Thursday 20 March 2025
by
Luke Llama
In the summary view, this item will behave differently to others in the collection because it has its own summary classes.
Not Linked to Anything
Saturday 3 February 2024
by
Lillian Llama
This is a summary here.
Sample Company Launches Outstanding New Website
Sunday 12 November 2023
by
Luke Llama
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec purus. Integer eget ipsum a lacus convallis consequat. Nullam nec neque nec wisi consectetuer mollis. Sed commodo aliquam mi.
This Story Does Not Appear on the Latest Updates Collections
Wednesday 1 November 2023
by
Squirrel Fisher
Squirrel fishing is a humorous and unconventional activity that involves luring squirrels with food attached to a string or fishing line. It's not a traditional form of fishing and doesn't involve water or fish. It's a light-hearted, outdoor activity that can be seen as a way to interact with wildlife, particularly squirrels, in urban and suburban settings. Squirrel fishing is the sporting practice of "catching" squirrels and attempting to lift them into the air using a nut (preferably a peanut) tied to a string or fishing line, and optionally some kind of fishing pole.
This is a Page Fragment Without a Redirection URL
The summary of a page fragment has a slightly different effect to other web page content types if the page fragment is ever displayed on a page on its own. In that case, the summary is treated like the main page content and is always shown.
A News Story in the Headlines Area
Introduction
Features
Options
Introduction Goes Here
Hi there! This is a full standalone page created using the visual editor, it can have any layout you like. This is a full standalone page created using the visual editor, it can have any layout you like. This is a full standalone page created using the visual editor, it can have any layout you like.
Place more content here.
Lorem ipsum. Cras mauris.
Lorem ipsum. Cras mauris.
Nullam et mi. Pellentesque quam leo,...
Simple Cards + Thin Gutters
cards cards-simple image-ratio-4x3 gutters-thinnest read-more-link-button-secondary + 200 character summary + Read more text as secondary button + Link cover
This Item Has Summary Classes
Thursday 20 March 2025
by
Luke Llama
In the summary view, this item will behave differently to others in the collection because it has its own summary classes.
Not Linked to Anything
Saturday 3 February 2024
by
Lillian Llama
This is a summary here.
Sample Company Launches Outstanding New Website
Sunday 12 November 2023
by
Luke Llama
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec purus. Integer eget ipsum a lacus convallis consequat. Nullam nec neque nec wisi consectetuer mollis. Sed...
This Story Does Not Appear on the Latest Updates Collections
Wednesday 1 November 2023
by
Squirrel Fisher
Squirrel fishing is a humorous and unconventional activity that involves luring squirrels with food attached to a string or fishing line. It's not a traditional form of fishing and doesn't involve...
This is a Page Fragment Without a Redirection URL
The summary of a page fragment has a slightly different effect to other web page content types if the page fragment is ever displayed on a page on its own. In that case, the summary is treated like...
A News Story in the Headlines Area
Introduction
Features
Options
Introduction Goes Here
Hi there! This is a full standalone page created using the visual editor, it can have any layout you like. This is a full standalone page...
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
Thursday 20 March 2025
by
Luke Llama
In the summary view, this item will behave differently to others in the collection because it has its own summary classes.
Saturday 3 February 2024
by
Lillian Llama
This is a summary here.
Sunday 12 November 2023
by
Luke Llama
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec purus. Integer eget ipsum a lacus convallis consequat. Nullam nec neque nec wisi consectetuer mollis. Sed...
Wednesday 1 November 2023
by
Squirrel Fisher
Squirrel fishing is a humorous and unconventional activity that involves luring squirrels with food attached to a string or fishing line. It's not a traditional form of fishing and doesn't involve...
The summary of a page fragment has a slightly different effect to other web page content types if the page fragment is ever displayed on a page on its own. In that case, the summary is treated like...
Introduction
Features
Options
Introduction Goes Here
Hi there! This is a full standalone page created using the visual editor, it can have any layout you like. This is a full standalone page...
Dark Cards
cards cards-dark cards-simple cards-smaller image-ratio-4x3
This Item Has Summary Classes
Thursday 20 March 2025
by
Luke Llama
In the summary view, this item will behave differently to others in the collection because it has its own summary classes.
Not Linked to Anything
Saturday 3 February 2024
by
Lillian Llama
This is a summary here.
Sample Company Launches Outstanding New Website
Sunday 12 November 2023
by
Luke Llama
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec purus. Integer eget ipsum a lacus convallis consequat. Nullam nec neque nec wisi consectetuer mollis. Sed...
This Story Does Not Appear on the Latest Updates Collections
Wednesday 1 November 2023
by
Squirrel Fisher
Squirrel fishing is a humorous and unconventional activity that involves luring squirrels with food attached to a string or fishing line. It's not a traditional form of fishing and doesn't involve...
Bright Cards
cards cards-bright cards-simple cards-smaller image-ratio-4x3
This Item Has Summary Classes
Thursday 20 March 2025
by
Luke Llama
In the summary view, this item will behave differently to others in the collection because it has its own summary classes.
Not Linked to Anything
Saturday 3 February 2024
by
Lillian Llama
This is a summary here.
Sample Company Launches Outstanding New Website
Sunday 12 November 2023
by
Luke Llama
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec purus. Integer eget ipsum a lacus convallis consequat. Nullam nec neque nec wisi consectetuer mollis. Sed...
This Story Does Not Appear on the Latest Updates Collections
Wednesday 1 November 2023
by
Squirrel Fisher
Squirrel fishing is a humorous and unconventional activity that involves luring squirrels with food attached to a string or fishing line. It's not a traditional form of fishing and doesn't involve...
Padded Cards
cards cards-padded
This Item Has Summary Classes
Thursday 20 March 2025
by
Luke Llama
In the summary view, this item will behave differently to others in the collection because it has...
Not Linked to Anything
Saturday 3 February 2024
by
Lillian Llama
This is a summary here.
Sample Company Launches Outstanding New Website
Sunday 12 November 2023
by
Luke Llama
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec purus....
This Story Does Not Appear on the Latest Updates Collections
Wednesday 1 November 2023
by
Squirrel Fisher
Squirrel fishing is a humorous and unconventional activity that involves luring squirrels with food...
This is a Page Fragment Without a Redirection URL
The summary of a page fragment has a slightly different effect to other web page content types if...
A News Story in the Headlines Area
Introduction
Features
Options
Introduction Goes Here
Hi there! This is a full standalone page...
Cards with Contained Images
cards image-bg-color-white image-padding image-contain + Link cover
Thursday 20 March 2025
by
Luke Llama
In the summary view, this item will behave differently to others in the collection because it has its own summary classes.
Saturday 3 February 2024
by
Lillian Llama
This is a summary here.
Sunday 12 November 2023
by
Luke Llama
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec purus. Integer eget ipsum a lacus convallis consequat. Nullam nec neque nec wisi consectetuer mollis. Sed...
Wednesday 1 November 2023
by
Squirrel Fisher
Squirrel fishing is a humorous and unconventional activity that involves luring squirrels with food attached to a string or fishing line. It's not a traditional form of fishing and doesn't involve...
The summary of a page fragment has a slightly different effect to other web page content types if the page fragment is ever displayed on a page on its own. In that case, the summary is treated like...
Introduction
Features
Options
Introduction Goes Here
Hi there! This is a full standalone page created using the visual editor, it can have any layout you like. This is a full standalone page...
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
Thursday 20 March 2025
by
Luke Llama
In the summary view, this item will behave differently to others in the collection because it has its own summary classes.
Saturday 3 February 2024
by
Lillian Llama
This is a summary here.
Sunday 12 November 2023
by
Luke Llama
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec purus. Integer eget ipsum a lacus convallis consequat. Nullam nec neque nec wisi consectetuer mollis. Sed commodo aliquam mi.
Wednesday 1 November 2023
by
Squirrel Fisher
Squirrel fishing is a humorous and unconventional activity that involves luring squirrels with food attached to a string or fishing line. It's not a traditional form of fishing and doesn't involve water or fish. It's a light-hearted, outdoor activity that can be seen as a way to interact with wildlife, particularly squirrels, in urban and suburban settings. Squirrel fishing is the sporting practice of "catching" squirrels and attempting to lift them into the air using a nut (preferably a peanut) tied to a string or fishing line, and optionally some kind of fishing pole.
The summary of a page fragment has a slightly different effect to other web page content types if the page fragment is ever displayed on a page on its own. In that case, the summary is treated like the main page content and is always shown.
Introduction
Features
Options
Introduction Goes Here
Hi there! This is a full standalone page created using the visual editor, it can have any layout you like. This is a full standalone page created using the visual editor, it can have any layout you like. This is a full standalone page created using the visual editor, it can have any layout you like.
Place more content here.
Lorem ipsum. Cras mauris.
Lorem ipsum. Cras mauris.
Nullam et mi. Pellentesque quam leo,...
Below - cards image-ratio-ultra-wide
Thursday 20 March 2025
by
Luke Llama
In the summary view, this item will behave differently to others in the collection because it has its own summary classes.
Saturday 3 February 2024
by
Lillian Llama
This is a summary here.
Sunday 12 November 2023
by
Luke Llama
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec purus. Integer eget ipsum a lacus convallis consequat. Nullam nec neque nec wisi consectetuer mollis. Sed commodo aliquam mi.
Wednesday 1 November 2023
by
Squirrel Fisher
Squirrel fishing is a humorous and unconventional activity that involves luring squirrels with food attached to a string or fishing line. It's not a traditional form of fishing and doesn't involve water or fish. It's a light-hearted, outdoor activity that can be seen as a way to interact with wildlife, particularly squirrels, in urban and suburban settings. Squirrel fishing is the sporting practice of "catching" squirrels and attempting to lift them into the air using a nut (preferably a peanut) tied to a string or fishing line, and optionally some kind of fishing pole.
The summary of a page fragment has a slightly different effect to other web page content types if the page fragment is ever displayed on a page on its own. In that case, the summary is treated like the main page content and is always shown.
Introduction
Features
Options
Introduction Goes Here
Hi there! This is a full standalone page created using the visual editor, it can have any layout you like. This is a full standalone page created using the visual editor, it can have any layout you like. This is a full standalone page created using the visual editor, it can have any layout you like.
Place more content here.
Lorem ipsum. Cras mauris.
Lorem ipsum. Cras mauris.
Nullam et mi. Pellentesque quam leo,...
Below - cards image-ratio-16x9
Thursday 20 March 2025
by
Luke Llama
In the summary view, this item will behave differently to others in the collection because it has its own summary classes.
Saturday 3 February 2024
by
Lillian Llama
This is a summary here.
Sunday 12 November 2023
by
Luke Llama
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec purus. Integer eget ipsum a lacus convallis consequat. Nullam nec neque nec wisi consectetuer mollis. Sed commodo aliquam mi.
Wednesday 1 November 2023
by
Squirrel Fisher
Squirrel fishing is a humorous and unconventional activity that involves luring squirrels with food attached to a string or fishing line. It's not a traditional form of fishing and doesn't involve water or fish. It's a light-hearted, outdoor activity that can be seen as a way to interact with wildlife, particularly squirrels, in urban and suburban settings. Squirrel fishing is the sporting practice of "catching" squirrels and attempting to lift them into the air using a nut (preferably a peanut) tied to a string or fishing line, and optionally some kind of fishing pole.
The summary of a page fragment has a slightly different effect to other web page content types if the page fragment is ever displayed on a page on its own. In that case, the summary is treated like the main page content and is always shown.
Introduction
Features
Options
Introduction Goes Here
Hi there! This is a full standalone page created using the visual editor, it can have any layout you like. This is a full standalone page created using the visual editor, it can have any layout you like. This is a full standalone page created using the visual editor, it can have any layout you like.
Place more content here.
Lorem ipsum. Cras mauris.
Lorem ipsum. Cras mauris.
Nullam et mi. Pellentesque quam leo,...
Below - cards image-ratio-1x1
Thursday 20 March 2025
by
Luke Llama
In the summary view, this item will behave differently to others in the collection because it has its own summary classes.
Saturday 3 February 2024
by
Lillian Llama
This is a summary here.
Sunday 12 November 2023
by
Luke Llama
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec purus. Integer eget ipsum a lacus convallis consequat. Nullam nec neque nec wisi consectetuer mollis. Sed commodo aliquam mi.
Wednesday 1 November 2023
by
Squirrel Fisher
Squirrel fishing is a humorous and unconventional activity that involves luring squirrels with food attached to a string or fishing line. It's not a traditional form of fishing and doesn't involve water or fish. It's a light-hearted, outdoor activity that can be seen as a way to interact with wildlife, particularly squirrels, in urban and suburban settings. Squirrel fishing is the sporting practice of "catching" squirrels and attempting to lift them into the air using a nut (preferably a peanut) tied to a string or fishing line, and optionally some kind of fishing pole.
The summary of a page fragment has a slightly different effect to other web page content types if the page fragment is ever displayed on a page on its own. In that case, the summary is treated like the main page content and is always shown.
Introduction
Features
Options
Introduction Goes Here
Hi there! This is a full standalone page created using the visual editor, it can have any layout you like. This is a full standalone page created using the visual editor, it can have any layout you like. This is a full standalone page created using the visual editor, it can have any layout you like.
Place more content here.
Lorem ipsum. Cras mauris.
Lorem ipsum. Cras mauris.
Nullam et mi. Pellentesque quam leo,...
Standard Cards with Date Overlay
cards date-overlay + Link cover
Thursday 20 March 2025
by
Luke Llama
In the summary view, this item will behave differently to others in the collection because it has...
Saturday 3 February 2024
by
Lillian Llama
This is a summary here.
Sunday 12 November 2023
by
Luke Llama
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec purus....
Wednesday 1 November 2023
by
Squirrel Fisher
Squirrel fishing is a humorous and unconventional activity that involves luring squirrels with food...
The summary of a page fragment has a slightly different effect to other web page content types if...
Introduction
Features
Options
Introduction Goes Here
Hi there! This is a full standalone page...
Cards in a Two Columns Block
This Block is on the Left
This is just example content. Lorem ipsum dolor salat, and that's all the latin text I can remember. We limited the number of articles so the test doesn't take up too much space.
Thursday 20 March 2025
by
Luke Llama
In the summary view, this item will behave differently to others in the collection because it has its own summary classes.
Saturday 3 February 2024
by
Lillian Llama
This is a summary here.
Sunday 12 November 2023
by
Luke Llama
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec purus. Integer eget ipsum a lacus convallis consequat. Nullam nec neque nec wisi consectetuer mollis. Sed commodo aliquam mi.
Wednesday 1 November 2023
by
Squirrel Fisher
Squirrel fishing is a humorous and unconventional activity that involves luring squirrels with food attached to a string or fishing line. It's not a traditional form of fishing and doesn't involve water or fish. It's a light-hearted, outdoor activity...
Cards in a Three Columns Block
This Block is on the Left
This is just example content. Lorem ipsum dolor salat, and that's all the latin text I can remember. We limited the number of articles so the test doesn't take up too much space.
Thursday 20 March 2025
by
Luke Llama
In the summary view, this item will behave differently to others in the collection because it has its own summary classes.
Saturday 3 February 2024
by
Lillian Llama
This is a summary here.
Sunday 12 November 2023
by
Luke Llama
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec purus. Integer eget ipsum a lacus convallis consequat. Nullam nec neque nec wisi consectetuer mollis. Sed commodo aliquam mi.
Wednesday 1 November 2023
by
Squirrel Fisher
Squirrel fishing is a humorous and unconventional activity that involves luring squirrels with food attached to a string or fishing line. It's not a traditional form of fishing and doesn't involve water or fish. It's a light-hearted, outdoor activity...
Thursday 20 March 2025
by
Luke Llama
In the summary view, this item will behave differently to others in the collection because it has its own summary classes.
Saturday 3 February 2024
by
Lillian Llama
This is a summary here.
Sunday 12 November 2023
by
Luke Llama
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec purus. Integer eget ipsum a lacus convallis consequat. Nullam nec neque nec wisi consectetuer mollis. Sed commodo aliquam mi.
Wednesday 1 November 2023
by
Squirrel Fisher
Squirrel fishing is a humorous and unconventional activity that involves luring squirrels with food attached to a string or fishing line. It's not a traditional form of fishing and doesn't involve water or fish. It's a light-hearted, outdoor activity...
Smaller Cards
cards cards-smaller
Thursday 20 March 2025
by
Luke Llama
In the summary view, this item will behave differently to others in the collection because it has...
Saturday 3 February 2024
by
Lillian Llama
This is a summary here.
Sunday 12 November 2023
by
Luke Llama
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec purus....
Wednesday 1 November 2023
by
Squirrel Fisher
Squirrel fishing is a humorous and unconventional activity that involves luring squirrels with food...
The summary of a page fragment has a slightly different effect to other web page content types if...
Introduction
Features
Options
Introduction Goes Here
Hi there! This is a full standalone page...
Cards Content Classes
Some of this stuff is problematic in 10.6.2. We're working on it...
cards text-padding-thinner text-bg-color-1 text-rounded image-padding-thinner image-bg-color-white image-rounded
Thursday 20 March 2025
by
Luke Llama
In the summary view, this item will behave differently to others in the collection because it has...
cards text-padding-top-none text-padding-bottom-thickest text-padding-right-thickest image-ratio-1x1 image-padding-thickest image-padding-left-none image-rounded text-right
cards item-rounded item-border bg-color-white image-padding image-border image-bg-color-white image-gradient-up-color-2 gradient-light hover-image-zoom
Thursday 20 March 2025
by
Luke Llama
In the summary view, this item will behave differently to others in the collection because it has...
Cards in Grid Layouts
Warning: Grid layouts for cards are experimental in 10.6.2. They will likely change in upcoming releases! If you want future compatibility without effort, consider using the supplied code as a base for custom code instead.
cards image-ratio-16x9 layout-grid-1
Thursday 20 March 2025
by
Luke Llama
In the summary view, this item will behave differently to others in the collection because it has...
Saturday 3 February 2024
by
Lillian Llama
This is a summary here.
Sunday 12 November 2023
by
Luke Llama
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec purus....
Wednesday 1 November 2023
by
Squirrel Fisher
Squirrel fishing is a humorous and unconventional activity that involves luring squirrels with food...
The summary of a page fragment has a slightly different effect to other web page content types if...
cards image-ratio-16x9 layout-grid-2
Thursday 20 March 2025
by
Luke Llama
In the summary view, this item will behave differently to others in the collection because it has...
Saturday 3 February 2024
by
Lillian Llama
This is a summary here.
Sunday 12 November 2023
by
Luke Llama
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec purus....
Wednesday 1 November 2023
by
Squirrel Fisher
Squirrel fishing is a humorous and unconventional activity that involves luring squirrels with food...
The summary of a page fragment has a slightly different effect to other web page content types if...