Content Grid Block Layouts

The Content Grid block has many layout options. See examples below, or visit the demo site.

Related: Content Grid Block

Demo: Content Grid Block

1

Columns

The classic content grid style. Cells are arranged in orderly, evenly-sized columns. Choose from 2-6 columns, with image size of wide or square. Title and text appear below the image.

Content grid columns layout

2

Overlay

Titles appear over the images. This style works well when you have short titles.

Content grid overlay layout

3

Large Teaser

Larger thumbnail with title and body text display in a two column list view. This is a great option for a list of items or programs that need more summary text.

Content grid large teaser layout

4

Large Teaser Alternate

Same as Large Teaser but gives a nice visual break by alternating the list. Best for shorter lists.

Content grid large teaser alternate layout

5

Feature (3 cells only)

The feature display is a very good alternative to sliders. Research shows that users don’t go beyond slide 1 on sliders, so we implemented the Feature display. When choosing this style, know that you must use exactly 3 cells.

Content grid feature layout

6

Offset (Group of 3 cells)

This is another choice for creating a feature layout with the option to have the larger section on the left or right side. Best with very short and concise summary text. When choosing this style, it will need to be grouped by 3 cells for each section. 

Content grid offset layout

7

Cards

Similar to Columns, but each cell has a drop-shadow that darkens when the cursor hovers over each cell. Choose from 2-6 columns, with image size of wide or square. Title and text appear below the image. 

Content grid cards layout

8

Teaser

Cells are displayed vertically in the classic one column teaser display: a small square thumbnail on the left with title and text on the right. 

Content grid teaser layout

9

Tiles

The amount of title and text determines the size of each cell. The height of each image is adjusted to fit next to the title and text. 

Content grid tiles alternate layout