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

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 moreMedia 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 moreMedia 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
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

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 moreDisplay 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
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

Event
Event title here
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Learn more about...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

Event
Event title here
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Read moreChange 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
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