In order to create views that use the Card Grid display format:

1. You need to have a Content Type (ex. News)
2. Create a view mode which re-uses one of the card pattern from CERN Components, either Preview Card or Related Card. You can read how to do it in the CERN Components documentation.
3. Create a page or block view and choose Card Grid as Display Format
4. In "Show" option choose Display Suite: Content and as view mode choose the view mode that you created on step 2 that re-uses the card pattern.
5. Set the pager to "Display a specified number of items" and then display a number that is exactly divided by 3 (6,9,12 etc)
6. Feel free to re-use any filter criteria, sort criteria, contextual filters and/or any view setting. It won't affect the behavior of the view.

Colors

The colors applied for each one of the cards displayed are:

• Title: Inherits the color CARDS/BOXES: title from the theme color settings.
• Subtitle: Inherits the color CARDS/BOXES: text from the theme color settings.
• Background Color: Inherits the color CARDS/BOXES: Card background from the theme color settings. The color is displayed only if the image field of the node does not have an image applied. The image always covers the color.