Templates Available

UI Card 1x1 + 1x3 rows

UI Branded Template - 3 card rows

UI-branded template with one row containing one column with a call to action button as well as up to three rows of single cards. This template features:

  • Optional banner image. Image should be 1600px X 550px for best results on high-dpi devices.
  • Top row has a large content block with a heading and optional button.
  • Up to three cards each containing a banner image, heading, content block and call to action button.
  • Optional social buttons in the footer.

Template last updated: November 18, 2021

Sample

bannerImageDescription

ALT tag for banner image

Type: TEXT

Required: Optional

bannerImageLinkURL

URL for link on banner image

Type: TEXT

Required: Optional

bannerImageUrl

The URL of the banner image to use. Minimum width is 800px. Example banner is at https://dispatch-cdn.its.uiowa.edu/images/ui/sample-campus-aerial-evening.jpg.

Type: TEXT

Required: Optional

brandBarColor

The color of the brand bar. Black or Gold.

Type: OPTIONS

Required: Optional

card1_button_text

Call to action text for first card

Type: TEXT

Required: Optional

card1_button_url

Call to action URL for first card

Type: TEXT

Required: Optional

card1_content

Content block for first card

Type: RICHTEXT

Required: Optional

card1_heading

Heading for first card

Type: TEXT

Required: Optional

card1_imagedescription

ALT text for image in the first card

Type: TEXT

Required: Optional

card1_imageurl

URL for image in the first card. Minimum width is 800px. Example banner is at https://dispatch-cdn.its.uiowa.edu/images/ui/sample-campus-aerial-evening.jpg.

Type: TEXT

Required: Optional

card2_button_text

Call to action text for second card

Type: TEXT

Required: Optional

card2_button_url

Call to action URL for second card

Type: TEXT

Required: Optional

card2_content

Content block for second card

Type: RICHTEXT

Required: Optional

card2_heading

Heading for second card

Type: TEXT

Required: Optional

card2_imagedescription

ALT text for image in the second card

Type: TEXT

Required: Optional

card2_imageurl

URL for image in the second card. Minimum width is 800px. Example banner is at https://dispatch-cdn.its.uiowa.edu/images/ui/sample-campus-aerial-evening.jpg.

Type: TEXT

Required: Optional

card3_button_text

Call to action text for third card

Type: TEXT

Required: Optional

card3_button_url

Call to action URL for third card

Type: TEXT

Required: Optional

card3_content

Content block for third card

Type: RICHTEXT

Required: Optional

card3_heading

Heading for third card

Type: TEXT

Required: Optional

card3_imagedescription

ALT text for image in the third card

Type: TEXT

Required: Optional

card3_imageurl

URL for image in the third card. Minimum width is 800px. Example banner is at https://dispatch-cdn.its.uiowa.edu/images/ui/sample-campus-aerial-evening.jpg.

Type: TEXT

Required: Optional

footer_statement

Optional statement in the below. Useful to convey statements about policies related to message.

Type: RICHTEXT

Required: Optional

row1_content

The top content block.

Type: RICHTEXT

Required: Optional

row1_content_alignment

null

Type: OPTIONS

Required: Optional

row1_heading

Row1 heading

Type: TEXT

Required: Optional

social_facebook

Link to Facebook page

Type: TEXT

Required: Optional

social_instagram

Link to Instagram page

Type: TEXT

Required: Optional

social_linkedin

Link to LinkedIn page

Type: TEXT

Required: Optional

social_snapchat

Link to Snapchat page

Type: TEXT

Required: Optional

social_twitter

Link to Twitter page

Type: TEXT

Required: Optional

social_youtube

Link to YouTube page

Type: TEXT

Required: Optional

title

The preheader text that shows under the subject on mobile devices.

Type: TEXT

Required: true

unitAddress

Street address of college, unit, or department

Type: TEXT

Required: Optional

unitName

Name of college, unit, or department

Type: TEXT

Required: Optional

unitNameAlignment

Where to display the unit name in the banner: Left or Right

Type: OPTIONS

Required: Optional

unitUrl

Website address of college, unit, or department. If empty will default to UIowa homepage in the footer.

Type: TEXT

Required: Optional

This template is generated using MJML which provides a framework for writing responsive HTML emails. An interpreter compiles the MJML into HTML with all the quirks necessary for the message to display properly in a wide variety of email clients.

Source files

Below are screenshots of test results from curated email clients. Test results should have been updated the last time the template was updated on November 18, 2021.

Outlook.com Firefox
Windows 10
Outlook 2016
Windows 10
Outlook 2016 (120 dpi)
Windows 10
Outlook 2019
Windows 10
Outlook 2019 (120 dpi)
Windows 10
Samsung Mail
Android 7
Yahoo! Chrome
Windows 10
Yahoo! Edge (Chromium)
Windows 10
Yahoo! Firefox
Windows 10
Nexus 5x
Android 6
Pixel Gmail
Android 7
Pixel Gmail
Android 8
Apple Mail 13
OX10.15
Apple Mail 13 Dark Mode
OX10.15
Gmail Chrome
Windows 10
Gmail Edge (Chromium)
Windows 10
Gmail Firefox
Windows 10
iPad Pro 11 inch
iOS 15
iPad Pro 12.9 inch
iOS 15
iPhone 11
iOS 15
iPhone 11 Dark Mode
iOS 15
iPhone 11 Pro Max
iOS 14
iPhone 12
iOS 15
iPhone 12 Darm Mode
iOS 15
iPhone SE 2nd Gen
iOS 15
Office 365 Mac Dark Mode
OSX 10.15
Office 365 Mac
OSX 10.15
Office 365 Windows 10 Dark Mode
Windows 10
Office 365 Windows 10
Windows 10
Outlook.com Chrome Dark Mode
Windows 10
Outlook.com Edge (Chromium) Dark Mode
Windows 10
Outlook.com Firefox Dark Mode
Windows 10
Outlook.com Chrome
Windows 10
Outlook.com Edge (Chromium)
Windows 10
Related topics: