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.

Table of Contents



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 with Overlay

Homepage Banner Short

Homepage Banner Tall

Hompage Banner Tall with Overlay
Banners Carousel


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

Anchored Content Lists

Anchored Content List


Anchored Content List with Short Headings


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
Solid blue
Solid salmon
Solid grey


Hyperlinking Text
Side Column Button
Side Column Button with Detail
Side Column Link List
Main Column Link List - Can link to a link to link components or documents


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




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

Beatrix Integrations


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 - 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
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)

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.



Using Beatrix’s locations data, a google map can be rendered on a page

Clinical Trials

Clinical Trials by Category
Clinical Trials Listing
Clinical Trials Search
Clinical Trials Highlight

International Activity

Activity maps are created by aggregating the activity of members of a team in Beatrix.

Keyword Listing

This listing uses MESH keywords and links to a list of faculty profiles using the keywords

Yale Medicine

Patient Care Portal
Yale Medicine CTA
Yale Medicine CTA - Side


Web Version of Newsletter Listings

The newsletter listing allows a web view of the newsletter as well as maintains an archive. Items are added automatically upon publishing the issue.