Universal Media Card Item
Label Here
Title Here
Explainer Goes Here
Readout here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Learn MoreLabel Here
Title Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam gravida leo massa, at elementum orci consequat non.
Learn More
Label Here
Title Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit etiam gravida leo massa, at elementum orci consequat non.
Learn MoreLabel Here
Title Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam gravida leo massa, at elementum orci consequat non.
Learn MoreHow to use
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
LINK TO VIDEO
LINK TO VIDEO
When to use
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
When to consider something else
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Accessibility tips
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Component Specifications
| Field | Description | Required / Optional |
|---|---|---|
| Name | The Name element | Required |
| First Media Card Item | Mark as First media card item? | |
| Last Media Card Item | Mark as Last media card item? | |
| Column Display Count | If first media card item, select the number of column display | |
| Default Card Display | If first media card item, check this box to display cards in default card style | |
| Display Card Items Horizontally | If first media card item, check this box to display card items horizontally | |
| Display Circle Image | Check this box if you want a circle image display | |
| Image | ||
| Image Alt Text | Enter alternate text for the image | |
| Image Portrait Display | Set only for first media card item | |
| Set Image Overlay | Check to set an image overlay | |
| Label | ||
| Title | ||
| Explainer | ||
| Readout | ||
| Link Text | Optional CTA | |
| Internal Page Link | Link text to another section in T4 | |
| Media Link | Link text to a file in the media library | |
| External Page Link | Link text to an external URL | |
| Center Align Card Content? | Check this box if you want to center align the card item contents | |
| Button 1 Color | ||
| Button 1 Text | ||
| Button 1 SubText | Fill in a sub text for button 1 | |
| Button 1 Link | Fill in only if Button 1 Section Link or Button 1 Media Link is not set | |
| Button 1 Media Link | Fill in only if Button 1 Section Link or Button 1 Link is not set | |
| Button 1 Section Link | Fill in only if Button 1 Link or Button 1 Media Link is not set | |
| Button 2 Color | ||
| Button 2 Text | ||
| Button 2 SubText | Fill in a sub text for button 2 | |
| Button 2 Link | Fill in only if Button 2 Section Link or Button 2 Media Link is not set | |
| Button 2 Media Link | Fill in only if Button 2 Section Link or Button 2 Link is not set | |
| Button 2 Section Link | Fill in only if Button 2 Link or Button 2 Media Link is not set | |
| Button 3 Color | ||
| Button 3 Text | ||
| Button 3 SubText | Fill in a sub text for button 3 | |
| Button 3 Link | Fill in only if Button 3 Section Link or Button 33 Media Link is not set | |
| Button 3 Media Link | Fill in only if Button 3 Section Link or Button 3 Link is not set | |
| Button 3 Section Link | Fill in only if Button 3 Link or Button 3 Media Link is not set | |
| Container Width | Default container width is 80%; Set only for first media card item content | |
| Image Background Color | ||
| Cards Background Color | If first media card item, this sets the background color for all the cards in this group; Default is Gray; Set only for first media card item content | |
| Content Panel Background Color | If first media card item, this sets the background color for this content panel; Default is White; Set only for first media card item content | |
| Add Accent Bar | Check only if you want to add an accent bar to your media card; Do not check this box if the Image field is filled in. | |
| Column Width | For Designer use; If first media card item, this sets the width of each column | |
| Column Margin | For Designer use; If first media card item, this sets the margin for each column | |
| Row Margin | For Designer use; If first media card item, this sets the margin for each row | |
| Custom Class | For admin use only; Fill in only for the first media card item. |
Description
Media Cards are used for groups of similar content. They are extremely customizable to allow for images, links, buttons, or a combination of the latter.
On-page example
When to use
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
When to consider something else
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Accessibility tips
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Component Specifications
| Field | Description | Required / Optional |
|---|---|---|
| Name | The Name element | Required |
| First Media Card Item | Mark as First media card item? | |
| Last Media Card Item | Mark as Last media card item? | |
| Column Display Count | If first media card item, select the number of column display | |
| Default Card Display | If first media card item, check this box to display cards in default card style | |
| Display Card Items Horizontally | If first media card item, check this box to display card items horizontally | |
| Display Circle Image | Check this box if you want a circle image display | |
| Image | ||
| Image Alt Text | Enter alternate text for the image | |
| Image Portrait Display | Set only for first media card item | |
| Set Image Overlay | Check to set an image overlay | |
| Label | ||
| Title | ||
| Explainer | ||
| Readout | ||
| Link Text | Optional CTA | |
| Internal Page Link | Link text to another section in T4 | |
| Media Link | Link text to a file in the media library | |
| External Page Link | Link text to an external URL | |
| Center Align Card Content? | Check this box if you want to center align the card item contents | |
| Button 1 Color | ||
| Button 1 Text | ||
| Button 1 SubText | Fill in a sub text for button 1 | |
| Button 1 Link | Fill in only if Button 1 Section Link or Button 1 Media Link is not set | |
| Button 1 Media Link | Fill in only if Button 1 Section Link or Button 1 Link is not set | |
| Button 1 Section Link | Fill in only if Button 1 Link or Button 1 Media Link is not set | |
| Button 2 Color | ||
| Button 2 Text | ||
| Button 2 SubText | Fill in a sub text for button 2 | |
| Button 2 Link | Fill in only if Button 2 Section Link or Button 2 Media Link is not set | |
| Button 2 Media Link | Fill in only if Button 2 Section Link or Button 2 Link is not set | |
| Button 2 Section Link | Fill in only if Button 2 Link or Button 2 Media Link is not set | |
| Button 3 Color | ||
| Button 3 Text | ||
| Button 3 SubText | Fill in a sub text for button 3 | |
| Button 3 Link | Fill in only if Button 3 Section Link or Button 33 Media Link is not set | |
| Button 3 Media Link | Fill in only if Button 3 Section Link or Button 3 Link is not set | |
| Button 3 Section Link | Fill in only if Button 3 Link or Button 3 Media Link is not set | |
| Container Width | Default container width is 80%; Set only for first media card item content | |
| Image Background Color | ||
| Cards Background Color | If first media card item, this sets the background color for all the cards in this group; Default is Gray; Set only for first media card item content | |
| Content Panel Background Color | If first media card item, this sets the background color for this content panel; Default is White; Set only for first media card item content | |
| Add Accent Bar | Check only if you want to add an accent bar to your media card; Do not check this box if the Image field is filled in. | |
| Column Width | For Designer use; If first media card item, this sets the width of each column | |
| Column Margin | For Designer use; If first media card item, this sets the margin for each column | |
| Row Margin | For Designer use; If first media card item, this sets the margin for each row | |
| Custom Class | For admin use only; Fill in only for the first media card item. |