SETTING 1

First media card item

Select First Media Card Item on the first media card. Do not select this on any other media cards in the group.

•••

WHAT YOU WILL SEE IN TERMINALFOUR

SETTING 2

Default card display

Select Default Card Display. This setting makes a very light gray panel appear behind the content on each of the media cards.

•••

WHAT YOU WILL SEE IN TERMINALFOUR

SETTING 3

Container width

Set the Container Width to 80%. This sets the width of the container that wraps the group of cards. IMPORTANT: Specific direction for various media card groups can be found below.

•••

WHAT YOU WILL SEE IN TERMINALFOUR

SETTING 4

Column width

Depending on the number of media card in the group this setting will vary. There are several options. However, 150px, 200px, 250px, and 400px are the most commonly used. This sets the minimum width a media card will display before it fills 100% of the container width. IMPORTANT: Specific direction for various media card groups can be found below.

•••

WHAT YOU WILL SEE IN TERMINALFOUR

SETTING 5

Column margin

There are several options, Small, Medium, Large, and None and these are self descriptive. This sets the vertical space between media cards. Medium is most commonly used.

•••

WHAT YOU WILL SEE IN TERMINALFOUR

SETTING 6

Row Margin

There are several options, Small, Medium, Large, and None and these are self descriptive. This sets the horizontal space between media cards. Medium is most commonly used.

•••

WHAT YOU WILL SEE IN TERMINALFOUR

ONLY ONE SETTING

Last media card setting

Select Last Media Card Item on the last media card. Do not select this on any other media cards in the group.

•••

WHAT YOU WILL SEE IN TERMINALFOUR

Settings for a group of more than four media cards

Once all settings are selected and set as directed above, adjust these two settings.

Container Width - 80%

Column Width - 200px

Settings for a group of four media cards

Once all settings are selected and set as directed above, adjust these two settings.

Container Width - 50%

Column Width - 350px

Why do I need to set up four cards like this?

A group of four cards works best across various screen sizes when the cards are set up to display as a quadrant as illustrated above.

Why is the background of the cards maroon?

This example is from a homepage. Unless the card group is positioned on a homepage or some of the most important content on an elevated page (not a standard interior page), the background of the cards should remain the default light gray and not maroon.

Settings for a group of three media cards

Once all settings are selected and set as directed above, adjust these two settings.

Container Width - 80%

Column Width - 250px

Settings for a group of two media cards

Once all settings are selected and set as directed above, adjust these two settings.

Container Width - 50%

Column Width - 300px

Settings for single media cards

Once all settings are selected and set as directed above, adjust these settings for each card.

Select First Media Card

Select Last Media Card

Container Width - 50% - 100%

Container Width Setting

The Container Width setting is relevant to the page layout. A Container Width of 100% will work on an interior page. A Container Width of 50% will work best on a full width elevated page.

Spacing

A Panel Divider content type — set to extra-small, small, or medium — should be added between the cards to increase the space between each card.

Why should I use a card this way?

This approach elevates the content for the reader, making it easy to scan in segments and keeps it organized as a group.

Settings for a group of media cards without images

Simply don't use images and follow the respective settings for the number of cards in the group.