The new template offered by the Academic Health Center Office of Communications has several layouts to meet a variety of content types and situations. Below the layouts are categorized by page type.
The general and landing pages have two and three column layouts which are listed as such on this page.
Descriptions of each layout are categorized by page type below.
Bio A - View demo
Bio Grid A - View demo
Bio List A - NOTE: This layout is currently in development and is not available for use in UM Content
Calendar A - View demo | View Center for Health Equity example
Note: This layout requires a public Google calendar embed code
Contact A - View demo
- Contact information WYSIWYG
- Google maps link (optional)
- Contact form:
- Contact Form Text (appears above the form)
- Contact Form Response Text (shown when someone successfully fills out the contact form and submits it)
- Contact Form - Email Address - From (required, comma separated)
- Contact Form - Email Address - Deliver To (required, comma separated)
- Contact Form - Subject (set to allow recipients to filter contact emails by subject)
- Contact information WYSIWYG
- Google maps link (optional)
General A - View demo | View Center for Health Equity example
- Main content area includes a banner image (700x190 px), heading and sub-heading followed by WYSIWYG copy area
- Video (optional) includes header and caption
- Right column with three widget options:
- Header, Content, Read more URL
- Header, Links
- Image (220x140 px), Header, Content, Read more URL
General B - View demo | Biomedical Genomics Center example
- Main content area includes a heading followed by WYSIWYG copy area
- Video (optional) includes header and caption. * Requires YouTube embed code
- Right column with three widget options:
- Header, Content, Read more URL
- Header, Links
- Image (220x140 px), Header, Content, Read more URL
General C - View demo | Research for Indigenous Community Health example
- Main content area includes a banner image (700x190 px), heading and sub-heading followed by WYSIWYG copy area
General D - View demo
- Main content area includes a heading and sub-heading followed by WYSIWYG copy area
General E - View demo
- Main content area includes a heading and sub-heading followed by WYSIWYG copy area
- Row 1 content area includes a row header with two columns:
- Left header with video underneath
- Right header with features (headlines and tease text)
General F - View demo
- Main content area includes a heading and sub-heading followed by WYSIWYG copy area
- Row 2 is three columns:
- Image (220x140 px) with copy beneath it
- Headline with copy
- Headline with list of links
General G - View demo
- Main content area includes a small banner image (460x250 px), heading followed by WYSIWYG copy area
- Video (optional) includes header and caption
- Right column with three widget options:
- Header, Content, Read more URL
- Header, Links
- Image (220x140 px), Header, Content, Read more URL
General H - View demo
- Main content area includes a heading followed by WYSIWYG copy area
- Video (optional) includes header and caption
- Right column with three widget options:
- Header, Content, Read more URL
- Header, Links
- Image (220x140 px), Header, Content, Read more URL
General I - View demo
- Main content area includes a heading, subheading followed by WYSIWYG copy area
- Row 1 is two columns each featuring an image (220x140 px) with copy beneath it
- Main content area includes a heading, subheading followed by WYSIWYG copy area.
- Row 1 is one column with an image (340x190 px) with copy (short paragraph) beside it and optional read more link
All three homepage layouts feature an image slider (690x300 px) and each image has a text overlay with a header and copy that can link to more information.
Homepage A - View demo
- Row 1 is one column that allows for a row head (optional), headline and subhead followed by WYSIWYG copy area
- Row 2 is three columns:
- Image (220x140 px) with copy beneath it
- Headline with copy
- Headline with list of links
Homepage B - View demo
- Row 1 is two columns that allows for a row head (optional), headlines and subheads followed by WYSIWYG copy area and a read more URL (optional)
- Row 2 is three columns:
- Image (220x140 px) with header copy beneath it
- Headline with copy
- Headline with list of links
Homepage C - View demo
- Row 1 is two columns that allows for a row head (optional), headline and subhead followed by WYSIWYG copy area
- Row 2 is two columns each featuring an image (220x140 px) with copy beneath it
Landing A - View demo | Center for Health Equity example
- Main content area includes a header image (700x x190 px), heading and sub-heading followed by WYSIWYG copy area
- Row 1 is two columns each featuring an image (220x140 px) with copy beneath it and optional read more link
- Row 2 is three columns:
- Image (220x140 px) with header and copy beneath it
- Headline with copy
- Headline with list of links
Landing B - View demo
- Main content area includes a header image (700x190 px), heading and sub-heading followed by WYSIWYG copy area
- Row 1 is one column with an image (340x190 px) with copy (short paragraph) beneath it and optional read more link
- Row 2 is three columns:
- Image (220 x 140 px) with header copy beneath it
- Headline with copy
- Headline with list of links
Landing C - View demo
- Main content area includes a heading and sub-heading followed by WYSIWYG copy area.
- Row 1 is two columns each featuring an image (340x190 px) with copy beneath it and optional read more link. Note: it looks best when both columns have similar amount of text
- Row 2 is three columns:
- Image (220x140 px) with header and copy beneath it
- Headline with copy
- Headline with list of links
Landing D - View demo
- Main content area includes a heading and sub-heading followed by WYSIWYG copy area.
- Row 1 is one column with an image (340x190 px) with copy (short paragraph) beneath it and optional read more link
- Row 2 is three columns:
- Image (220x140 px) with header and copy beneath it
- Headline with copy
- Headline with list of links
Landing E - View demo
- Main content area includes a heading and sub-heading followed by WYSIWYG copy area.
- Row 1 is two columns:
- Left column has a header and an embedded YouTube video
- Right column has a list of headlines and story teases
Landing F - View demo
- Main content area includes a heading and sub-heading followed by WYSIWYG copy area.
- Row 1 is three columns:
- Image (220x140 px) with header and copy beneath it
- Headline with copy
- Headline with list of links
Landing G - View demo
The main content area includes:
- Small banner image (460x250 px), heading, and a WYSIWYG area
- Video (optional) includes header and caption
Right column with three options:
- Header, Content, Read more URL
- Header, Links
- Image (220x140 px), Header, Content, Read more URL
Landing H - View demo
The main content area includes:
- Heading, and a WYSIWYG copy area
- Video (optional) includes header and caption
Right column with three options:
- Header, Content, Read more URL
- Header, Links
- Image (220x140 px), Header, Content, Read more URL
Landing I - View demo | Center for Health Equity example
- Main content area includes a header image (700x190 px), heading and sub-heading followed by WYSIWYG copy area
- Row 1 is two columns each featuring an image (340x190 px) with copy beneath it and optional read more link. Note: it looks best when both columns have similar amount of text
Landing J - View demo
- Main content area includes a header image (700x190 px), heading and sub-heading followed by WYSIWYG copy area
- Row 1 is one column with an image (340x190 px) with copy (short paragraph) to the right of the copy and optional read more link
List A - View demo | Biomedical Genomics Center example
- List content area includes list header and list description
- List includes list title, list description, item title and item description
List B - View demo
- List content area includes list header and list description
- List includes list title, item title and list item link
- List content area includes list header and list description
- List includes list title, list description, category title, link item title and link item link
- List content area includes list header and list description
- List includes category header, entry image (70x80 px), entry title, entry text (no more than 3 lines), entry text right justified (optional, no more than 3 lines), entry link
News A - View demo | Center for Health Equity example
- Feature content area includes section header, featured image (460x300 px), news header, news tease and link url
- Optional social share buttons
- Articles content area includes section header and article list includes image (340x190 px), title, content and link url
Story A - View demo
- Content area includes story title, image (460x250) and story content (full WYSIWYG)
- Optional social share icons
- Related content area includes related links header followed by two columns with titles, content and urls which link the titles
Story B - View demo
- Content area includes story title, image (460x250) and story content (full WYSIWYG)
- Optional social share icons
Story C - View demo
- Content area includes story title (image - unrestricted size) and story content
- Tabs section of the main content area includes tab title, tab content header, and tab content with optional tab side content
- Related content area includes related links header followed by two columns with titles, content and urls which link the titles
Story D - View demo | Center for Health Equity example
- Content area includes story title (image (unrestricted size) and story content
- Tabs section of the main content area includes tab title, tab content header, and tab content with optional tab side content
