×

Media Card Display Settings

Media Card Display Settings

Follow these TerminalFour settings to create a media card group. Please note, depending on the number of media cards in the group, there are specific settings to follow. Please see the examples and read the guidelines provided in the Media Card Group Settings section.

Setting the first and last media cards

  • When setting up a group of cards select First Media Card Item for the first card.
  • Select Last Media Card Item on the last card of the group. This is the only setting needed for the last card.

NOTE: If this essential step is not followed correctly, the media card group and the page will "break" and not display correctly.

•••

WHAT YOU WILL SEE IN TERMINALFOUR

TerminalFour setting for first and last media card

Campus Life

Loyola's campus plan begins to take shape

Loyola continues to develop its campus plan to address the University's evolving needs.

Read more

Media cards without any display options selected

  • All media cards within a group will display as below with no display options selected.
Campus Life

Loyola's campus plan begins to take shape

Loyola continues to develop its campus plan to address the University's evolving needs.

Read more

Media cards default display

  • To display all of the media cards in a group with a light gray content panel, select Default Card Display.
  • When a card is the only card in a group, select both First Media Card Item and Last Media Card Item.

•••

WHAT YOU WILL SEE IN TERMINALFOUR

TerminalFour setting for first card and the default display of the content panel of the card

Column Display Count

This does not a set the format of how columns display.

Selecting any of the options displays the number of columns selected in the dropdown. For example, if you select "two-column" in the Column Display Count — even if you added four media cards — only the first two cards will display.

So when do I use it?

Although this setting is occasionally used to control the display of cards, it's usually best not to use it to set the display of cards. Simply follow the guidelines for setting the Container Width, Column Width, Column Margin, and Row Margin provided in the "Specific Media Card Group Settings" section.

•••

WHAT YOU WILL SEE IN TERMINAL FOUR

The column count input field selections of one-column, two-column, three-column, and four-column

Campus Life

Loyola's campus plan begins to take shape

Loyola continues to develop its campus plan to address the University's evolving needs.

Read more

Display media cards as horizontal cards

Selecting Display Card Items Horizontally will display all media cards in a group horizontally. The image positions to the left of the content rather than above. However, when displayed on a smaller device, for instance a phone, the image positions on top of the content.

NOTE: By default horizontal media cards center the image and crop any overage of the image left and right. When displayed on smaller devices, the media card displays as a standard media card and the image is positioned on top of the content.

•••

WHAT YOU WILL SEE IN TERMINALFOUR

A TerminalFour setting to display cards in a horizontal format

A media card displayed in a phone

Display media cards with portrait images

This setting should be used when all or most of the images in the media card group are portraits. Selecting Image Portrait Display will display the set of media cards more narrowly on smaller devices. This scales the media card with portrait images more appropriately so the subject is as large. This provides more space around the media card allowing them to breathe more.

•••

WHAT YOU WILL SEE IN TERMINAL FOUR

TerminalFour setting for first card when the card group is all or mostly portraits

Event

Event title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Learn more about...
Deadline is…
Located at ...

Add buttons to media cards

What’s with the buttons. If you’re wondering why use a button rather than a link, here’s an answer. Links are intended to move the reader to more content — for example, READ JOSIAH’S STORY. Buttons are intended to move a reader to an action associated with the content — for example, REGISTER NOW.

BUTTON USE: As many as three buttons per card can be used. Judicious use is encouraged. Don't send the reader in too many directions.

BUTTON COLOR: Use these settings. Generally, use one button color. If using two button colors together to create a hierarchy of importance, use the colors discerningly in alignment with the importance of the action. Do not use button colors other than those listed. Maroon is always first. None always follows.

BUTTON TEXT: Write a succinct "Call to Action" - For example, REQUEST MORE INFORMATION.

BUTTON SUBTEXT:  Write a 3-5 word readout to help the reader understand as much about the call to action as possible. For example, the date of an event or deadline.

•••

WHAT YOU WILL SEE IN TERMINAL FOUR

TerminalFour settings for media card buttons

Event

Event title here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Read more

Change the background color of a media card

As explained in the Default Card Display setting above, the default background color of a media card is light gray when Default Card Display is selected. However, the background color of a media card can be changed independently of the default setting using the Cards Background Color setting.

SET THE DEFAULT CARD DISPLAY SETTING FIRST: Selecting Default Card Display does more than affect the background color of a media card, it changes the display of the content area of a media card.

ACCEPTABLE MEDIA CARD BACKGROUND COLORS: White, Gray Extra Light, and Maroon. That's it.

  • Gray-Extra-Light: Use the default gray-extra-light as a media card background when the background of the panel the media card group is placed in is white.
  • White: Use white as a media card background when the background of the panel the card group is placed in is gray-extra-light.
  • Maroon: Only use maroon as a media card background if the media card group is on a homepage or elevated interior page. Use a maroon background on the media cards if the background of the panel the media card group is placed in is white or gray-extra-light.

NOTE: Selecting maroon as a media card background using the Cards Background Color setting will change many of the attributes of media card content. Review the outcome and adjust if needed. For example, if a button with a button color setting of none has been used, the button color must be changed to gold.

•••

WHAT YOU WILL SEE IN TERMINALFOUR

TerminalFour setting for media card background color

Change the background color of a content panel

There are three acceptable options - white, gray-extra-light, and maroon. To change the background of a Content Panel Background Color from the default white, choose gray-extra-light. A maroon background is used only on very select content panels. NOTE: When choosing a different Content Panel Background Color the media card background may also need to be changed.

•••

WHAT YOU WILL SEE IN TERMINALFOUR

TerminalFour setting for content panel background color

An example of a group of media cards with white backgrounds in a gray extra light panel.To set the background color of the panel that cards sit within, select "gray-extra-light" in the Content Panel Background Color menu.

Each of the three media cards have Cards Background Color set to "white".

TerminalFour setting for first and last media card

TerminalFour setting for first card and the default display of the content panel of the card

The column count input field selections of one-column, two-column, three-column, and four-column

A TerminalFour setting to display cards in a horizontal format

A media card displayed in a phone

TerminalFour setting for first card when the card group is all or mostly portraits

TerminalFour settings for media card buttons

TerminalFour setting for media card background color

TerminalFour setting for content panel background color

An example of a group of media cards with white backgrounds in a gray extra light panel.To set the background color of the panel that cards sit within, select "gray-extra-light" in the Content Panel Background Color menu.

Each of the three media cards have Cards Background Color set to "white".