IfThen x UChicago Product Guide | Capabilities

Capabilities

A library of 30+ templates and 50+ components
custom  built for the University of Chicago.

Featured templates

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Residence Hall

Undergraduate residence hall landing page with map view component.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Faculty Index

Featured faculty members with full list by topic or alphabet.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Faculty Profile

Faculty bio with research interests, educational and academic backgrounds, publications, fellowships and certifications, contact info, and more.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Story Page

Story page in UChicago News styling with video, photo gallery, and various other components.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Landing Page

Section landing page with stackable feature areas and call-outs.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Residence Hall

Undergraduate residence hall landing page with map view component.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Faculty Index

Featured faculty members with full list by topic or alphabet.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Faculty Profile

Faculty bio with research interests, educational and academic backgrounds, publications, fellowships and certifications, contact info, and more.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Story Page

Story page in UChicago News styling with video, photo gallery, and various other components.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Landing Page

Section landing page with stackable feature areas and call-outs.

Templates

Our library includes 30+ page templates covering a broad range of uses. Templates can be customized to add or remove components, change the order of elements, or apply new fonts, colors, or styling.

Contact Us

Grid display of key contacts and location info

Course Page

Detail page of course description

Courses Page

Page collecting course offerings by quarter

Directory

Two column page of people with contact info

Dynamic Sidebar

Responsive template with right side bar

Event

Landing page for a specific topic with featured stories

Event Index

Featured topics of expertise with full list of all topics

Faculty Bio

Bio article page for faculty members

Faculty Index

Featured faculty members with full list by topic or alphabet

Faculty Index with Featured Items

Adds featured experts to faculty page

Feedback

Form embedded into template with top stories

Generic Content Page

Open format page that accepts components in single column layout

Hero Default

Story with embedded image, video and social posts

Hero Default with Video

Story with video featured at top of page

Hero with Portrait Photo

Story that leads with a portrait photo

Hero with Single Photo

Short article with full-width photo at top of page

Hero with Small Photo

Story that leads with a small horizontal photo

Hero without Media

Text-only hero story

Homepage

Various featured story and social media grids

Lab Group

Faculty research lab info page

Landing Page

Section landing page with stackable feature areas and call-outs

Livestream Alert

Page that features live stream notification in banner

Media Resources

Index for media orgs with news, contact and resources

Person Bio

Staff or person bio page with photo

Photo Gallery as Hero

Story that features a photo gallery as lead image

Photo Gallery within Article

Story with photo gallery embedded

Podcast Episode

Landing page for single episode of a podcast

Podcast Episode List

Index of all episodes for an individual podcast show

Podcast Index

Featured podcast and list of all podcasts

Search Results

List of results with pagination

Story Index

List of stories with side bar content

Video Page

Landing page for a single embedded video

Component Library

Our customizable component library provides a broad range of functionality, from events to courses to faculty profiles. Components are designed in a modular fashion to allow users to assemble pages tailored to their needs.

Accordion

Drawers that can be expanded/collapsed

Alpha List

List of text items in alphabetical order

Big Hero

Large image with text above it

Bulleted List

A styled list of text items

Callout Insert

Colored horizontal ribbon with 3 or more circular images and headlines

Contact Sidebar

Contact info to be displayed in side bar

Contacts

Standard contact info display

Content Filter

A form used to filter by content type

Embedded Giphy Animation

iFramed animation from Giphy

Fact Card

Displays a list of facts with optional icons

Feature Insert

Large image on left or right with quick links and sub components

Featured Events

Feature tile of 3 or 4 events, photos optional

Featured Hero

Large featured story on internal pages

Featured Stories

Flexible grid to display stories

Featured Tile 4

Grid of 4 equal images with headlines

Feedback Form

Form used on Feedback page

Footer

Footer with contact info, site map and social media icons

Headline

Headline with optional topic tag, breadcrumb or dropdown

Infographic

Image component to accept infographic images

Inset Photo

Small photo with text wrapped around it

Large Photo

Single full-bleed image with caption

List

Vertical list of items with image aligned left of text block

Livestream Video Embed

Embedded live streaming video

Location

Name, description and address

Map Embed

Google map embed view to specific location

Masthead

Global masthead used for all pages

Media Citations

Up to two featured stories from the media

Media Contact

Small card that displays contacts for media orgs

Media Resources

Topic with list of links

Mosaic Grid, 4 tiles

3X2 mosaic grid that features 4 stories

Mosaic Grid, 6 tiles

3X2 mosaic grid that features 6 stories

Nav Menu

Global hamburger navigation menu

Newsletter Signup

Sign up promotion and form for use in side bar

Photo Gallery

Full-bleed photo gallery with captions

Podcast Hero

Hero spot for individual podcast episode

Publications

Card for featuring books in side bar

Pull Quote

Pull quote within an article with social sharing

Quote List

List of quotes with attribution, photo, and name

Ranged Stats

List of stat ranges

Recommended

Card to feature up to 2 stories in side bar

Related Topics

A list of linked topic tags

Search Form

Search forms for menu and search results page

Search Result

Result for a single item with image, headline, description

Search Result Pagination

Pagination for search results pages

Search Sidebar

Highlights a story related to a search term

Search Typeahead

Predictive search from JSON data

Sidebar Card

Small card with headline and description for use in side bar

Social Card Embed

Formats a post from Twitter or Instagram for embedding

Stats

Colored ibbon with three or more highlighted stats

Story Hero

Variations of the top story on internal pages

Tint Social Embed

Four column grid of social media posts

Top Stories

Card displaying a list of 3 top stories or videos

Video Alert

Masthead notification of live webcast

Video Embed

Embedded YouTube video with custom play button

Visual Nav

Four image layout for bottom of page to highlight featured sections or content