YSM Website Content Layout Showcase

The following images provide an overview of the many different ways to display content on your YSM website.

These elements have been organized in groups to make it easier to find examples of the many variations with which components may be displayed.

You may also find it helpful to see these schemas on our demonstration site. https://medicine.yale.edu/web/showcase/

1 Banners
2 Text Content
3 Specialized Content
- 3.1 FAQs
- 3.2 Text Fragment Call Out Boxes
- 3.3 Contact Boxes
- 3.4 Quotes & Testimonials
- 3.5 Call to Action Banners
- 3.6 Multicolumn Content Lists
- 3.7 Table Styles
4 Links & Summaries
- 4.1 Single links
- 4.2 Basic Link Lists
- 4.3 Complex Link Lists
- 4.4 Content Summaries and Lists
5 Multimedia
- 5.1 Video
- 5.2 Podcasts & Audio Players
- 5.3 Image Galleries
6 External Content Feeds
- 6.1 Box Integration
- 6.2 Google Sheets
- 6.3 Pubmed Publications Feed
- 6.4 Publications by Organization Feed
7 Beatrix Integrations
- 7.1 Calendars
- 7.2 News Listings
- 7.3 People Listings
- 7.4 Search - People or Keyword Listings
- 7.5 Publications by Organization
- 7.6 Maps
- 7.7 Clinical Trials
- 7.8 International Activity
- 7.9 Keyword Listing
- 7.10 Yale Medicine
8 Web Version of Newsletter Listings

Banners

Homepage Banner Carousel - Up to 6 items may be included, including links to content, people, events, news and multimedia

Impact Banner content layout: this is a new layout for use on homepages and other prominent landing pages for an impactful message at the top of a page that is different from the title of the page. This will enable more creative messaging for website visitors without sacrificing the SEO benefits of clear and succinct page titles.

Homepage Banner

Homepage Banner Short

Homepage Banner Tall

Homepage Banner with Overlay

Text Content

Text Only

Basic Text Content with full width image

Basic Text Content with thumbnail image-right

Size and Position Options for Images on a Content component

Fullsize
Medium - Right or Left
Small - Right or Left
Thumbnail - Right or Left
Headshot - Right or left

See Multimedia below for Image Galleries

Specialized Content

FAQs

Text Fragment Call Out Boxes

Text Fragments can be used with any paragraph in a content component

Contact Boxes

Main Column Content Box

Side Column Contact Box

Quotes & Testimonials

Quote Only

Testimonial - Small; background can be blue or grey

Testimonial - Large; background can be blue or grey

Testimonials can be used at the top of a page as a banner image.

Call to Action Banners

Call to Action Banner with image

Call to Action Banner - 2 column

Short banners in Blue and Light Blue

Call to Action Banner Orange - Short

Call to Action banners can be full size or short; with an image overlayed by a color or a solid color. Color options include:

Light Grey
Dark Grey
Blue
Light Blue
Dark Blue
Turquoise
Cyan
Coral
Orange
Yellow

Multicolumn Content Lists

Multicolumn Content List organizes full content into a grid.

Multicolumn Content List with color block; Content includes images and links.

Table Styles

All tables on our sites should be set up to follow ADA standards for screenreaders. They should be used to convey data, not to format text and require a header row. Empty cells should have - or “null” to indicate that there is no data. The following styles are included in our CMS. The alignment options: Centered, align left or right, may be combined with the color variations.

Plain table-align-right

Plain table-align-left

alt-blue table-align-right

alt-salmon

alt-grey

Solid blue

Solid salmon

Solid grey

Links & Summaries

Single links

Hyperlinking Text

Side Column Button

Side Column Button with Detail

Side Column Button with Detail - Neutral

Basic Link Lists

Side Column Link List

Main Column Link List - Can link to a link to link components or documents

Main Column Link List - with descriptions

Complex Link Lists

Gateway Page Link List (for multiple lists)

Anchored Link Lists (for multiple lists)

Content Summaries and Lists

These displays of summary content may be used individually or in lists.

Multicolumn Summary Grid can be used with content components and/or External Summary Links

The grid display automatically adjusts to the number of items in the list and the screen width.

Multicolumn Summary Grid

Small Image Content Summaries

Single Column Content Summaries

Multimedia

Video

Video Highlight

Video in Main Column

Media List with details

Mixed Media Gallery - Can incorporate both video and images

Podcasts & Audio Players

Audio Player for single item

Podcast Listing

Image Galleries

Mixed Media Gallery

External Content Feeds

Box Integration

Users can maintain their own public BOX folders with ADA compliant documents that are accessible to users.

Google Sheets

Users maintain their spreadsheets in Google Drive. The integration has sorting and filtering capabilities.

Pubmed Publications Feed

This display requires a PubMed query

Publications by Organization Feed

Publications by Organization with Search and Filters. This can be set to accept all or the publications can be reviewed.

Beatrix Integrations

Calendars

Events listing can be defined by using a keyword in addition to the organization

Calendar widget - 2 column

Event Highlight - This component uses the EVENT ID number and can be placed on any page. If an image is associated with the event, it can display that rather than the calendar icon.

News Listings

Full News Listing

News Widget - Large

News Widget - Carousel

News Widget - Medium - 3 column

News Widget - Small - 4 column

News Widget - First Item Highlight

News Widget - single column

News Widget - Single Column No Image

News Article Highlight - This component uses the News ID number and can be placed on any page. It uses the widget image associated with the article.

People Listings

People Listing - 2 column medium

People Listing - 2 column small

People LIsting - 3 column medium

People Listing - A to Z

People Listing by Specialty

Small People Listing - This has the option of displaying the first assistant in a person’s profile.

People Listing by Specialty with Details

People Listing - Large

People Listing - Leaderhip highlight (moves leadership to the top of the listing)

People Listing - Leadership Only

Faculty Profile Widget - Appears in Side Column (used mainly in lab sites)

Search - People or Keyword Listings

This component can be used with A-Z listings or MESH keyword listings.

Publications by Organization

This listing includes all publications accepted by the members of the organization into their profiles. At the org level, publications can also be reviewed or it is possible to bypass review and display all the publications.