General Component Library

ACCORDION

What it is: 

A vertically stacked list of headers that can be clicked to expand and reveal content.

UX purpose:

• Informational
• Supplemental
• Reference

Usage guidelines: 

• In addition to encouraging site interaction, the accordion is great for displaying information that is part of a group or series, such as steps in a process or a series of questions about the topic. Accordions can also be useful for conveying info on the same topic to different audiences. 
• Don’t hide essential information inside though, such as deadlines. If you do, you risk visitors browsing the headings without expanding the accordion item.
• Note that accordions operate with simple WYSIWYG styling, which means that they will let you use subheadings, ordered and unordered lists and bold, italics, and hyperlinked text.
• Don’t stuff tables in accordions. They will be very hard to read on smaller screens and difficult to maintain.
• The heading introducing the accordion list is required, but the description is optional.
• Descriptions can provide key information, storytelling warmth, or context, if necessary. But make it brief. 

Accordion example: 

BLOCK QUOTE

What it is: 

• A standalone, distinctive pull quote component, with wayfinding option.

UX purpose:

• Exploration and Storytelling
• Promotion
• Informational

Usage guidelines: 

• Think of Block Quotes as testimonials used to support important points either before or after the Block Quote.
• Another use: put a human face on a bureaucratic procedure, or curriculum info. For example, a quote from an Admissions counselor to reassure applicants that they can get help with their questions. Or, a faculty member quote on capstone projects, or student success.
• Block Quote is a nice, low-key visual separator.
• Keep Block Quote text short. Long Block Quotes are inappropriate. 
• Use Block Quote as a standalone component, in contrast with the block quote feature in WYSIWYG. 
   

Block Quote example: 

CARD GROUP

What it is: 

A flexible component to introduce related information visually and with text and invite visitors to learn more by linking to other pages.

UX purpose:

• Promotion
• Wayfinding

Usage guidelines: 

• Flexibility: tailor Card Groups to match your needs and availability of content.
• Card groups are great for sectional landing pages, where they can be used to nicely summarize the pages / resources contained within that area and link more deeply into those pages. 
• They are also great for grouping related information, as in the examples. 
• You will use the component title and description - this defines the group and gives it context.
• Use optional Subtitle for a punchy statement or summary. 
• Images are optional, to enable you to create more compact cards without images. (Example 4)
  • Don't mix cards with and without images. The display will suffer. Instead, create separate Card Groups.
• Carousel tool is optional. You can stack cards or Enable Carousel to display them in carousel.
  • Warning: Users are less likely to use the carousel unless they are highly motivated. So, don't put vital card info in later positions in a carousel.
  • Note: Don't enbable the carousel if your cards don't have images. The carousel is only for cards with images.

Card Group examples: 

1. Three Cards with images
2. Four Cards with images, stacked
3. Four cards with images, carousel
4. Four cards without images, stacked

CONTACT INFO

What it is: 

A simple, manually created contact card.

UX purpose:

• Reference

Usage guidelines: 

• Data is static, where users enter all the fields manually.
• Person details are all required. 
• Use the Component Link to link out to a pertinent department or program.
   

Contact Info example: 

EVENTS ANNOUNCEMENTS CAROUSEL

What it is: 

• A featured event component fed by one or more Event categories, with the option to include unlimited additional event items, accessible from the carousel control.
• Event Announcement Carousel and Event Feature components are functionally the same. The only differences are that Event Announcement Carousel has color choices, while  Event Feature displays date and time, location, and audiences.

UX purpose:

• Promotion
• Wayfinding
• Informational

Usage guidelines: 

• Select one or more Event Categories.
• Select whether to activate the carousel, or limit the component to the first upcoming event in the chosen category.
• Past events will disappear from the component, so it is imperative that future events in the same category exist. Otherwise the component itself will disappear.

Events Announcements Carousel example: 

EVENT CARDS

What it is: 

• A low-key, elegant related events component that displays two events and can lead to a listing of others.

UX purpose:

• Promotion
• Wayfinding
• Informational

Usage guidelines: 

• Use the Title field to enhance the information scent for users. For example, "Upcoming Information Sessions" instead of "Upcoming Events".
• The link field is optional. It can lead anywhere, but is designed to lead to the filtered, or unfiltered Events listing. If you wish to steer users toward just the two events displayed, then don't use the link. 
• Select one or more Event Categories for an automatic population of the two nearest upcoming events in the category or categories, OR
• Select Events manually, for total control, and manual maintenance.
• NOTE: Event Category items will overwrite any events you have manually selected.
• The component requires two events. If you wish to display only one event, or up to six events, use the Events Announcement component. 
• Event item fields are fed by the events system.

Event Cards example: 

EVENT FEATURE

What it is: 

• A full-width component to feature one or more events. Event Feature is functionally the same as Event Announcement Carousel. The only differences are that  Event Feature displays date and time, location, and audiences, while Event Announcement Carousel has color choices.

UX purpose:

• Promotion
• Wayfinding
• Informational

Usage guidelines: 

• Select one or more Event Categories.
• All fields are fed by the events system.
• This component is full-width design. It can be used as a banner near the top of the page, as well as the culmination of a section. It can be a compelling CTA when you want readers to strongly consider clicking through.

Event Feature example: 

FEATURED BOOKS

What it is: 

• A curated faculty bookshelf that includes a required book cover, and external link to the publisher's book page, or, potentially, another bookseller landing page.

UX purpose:

• Promotion
• Informational

Usage guidelines: 

• Display as many books as needed to convey your UX goal. Examples: 
  • Convey broad or deep subject matter expertise and scholarship
  • Display classic titles in the field
  • Showcase a single author
• Use the component Title and Description to put the collection of books in context with the page subject. 
• The editor selects books by title.  
• The editor also keeps the default view, or toggles to "Use Horizontal Book Layout," to display book info next to each book, in a stacked arrangement. See examples below.
• Since the link field is required, visitors who click the link will leave your site. So, if the page you place this component on also has important internal calls to action, such as Apply or Request Information, consider placing the component below them, so as to not lose visitors before they've been given opportunities to continue their journeys on the Penn GSE domain.  

Featured Books example -Default: 

(Default display is compact, with a carousel)

Featured Books example - Use Horizontal Book Layout toggle activated:

(Books data is next to the book image, and the book items stack. No carousel.)

FEATURED NEWS ITEM

What it is: 

• A full-width component to feature a single news item.

UX purpose:

• Promotion
• Wayfinding
• Informational

Usage guidelines: 

• Select a single, pertinent media story from the news system by typing in its title. 
• All fields are fed by the news system.
• Because of its full-width design, Featured News Item can be used as a banner near the top of the page, as well as the culmination of a section. It can be a compelling CTA when you want readers to strongly consider clicking through.

Featured News Item example: 

MANUAL NEWS FEATURE

What it is: 

• The related news component that gives the editor total control over what news items display.

UX purpose:

• Promotion
• Wayfinding
• Informational

• Usage guidelines: 

• Use as supplemental content within the body of a page, and at the end of a page as a natural next destination if someone has already scrolled through or read the rest of the page.
• Make the most of the component title, instead of using "Related News." Unless it is used in conjunction with a strong heading that precedes it. 
• Select an unlimited number of news items by name.
• The featured News item is the first one. Rearrange as necessary.  

Manual News Feature example: 

FEATURED PEOPLE

What it is: 

• A curated people component created for professional development offerings, where Penn GSE faculty and affiliated faculty can exist side-by-side.

UX purpose:

• Promotion
• Informational
• Wayfinding

Usage guidelines: 

• This is a relational component and draws from People content type pages. Select faculty and affiliated faculty by name to populate the component. 
• The component includes an image, so be sure that the People you select have images in their People content types. 
• To include people not in the CMS, use the Manual People List component instead. 

Featured People example: 

MANUAL PEOPLE LIST

What it is: 

• A curated people component originally created for professional development offerings, but can be used anywhere. 
• Featured People and Manual People are closely related:
  • Featured People only allows you to select People who have their own record in the CMS, such as faculty and affiliated faculty.
  • On the other hand, Manual People allows for manual entry of people fields, so use it for special guests, or Penn GSE staff who don't have a People record, or when you want Penn GSE faculty, affiliated faculty, and/or special guests or staff to display in the same component.
    • In the example below, Abhijit Bhaduri has a People page and his data is pulled from this page, while the other guest lecturers are manual entry. 

UX purpose:

• Promotion
• Informational
• Wayfinding

Usage guidelines: 

• To include faculty (People) from the CMS, just select them by name.
• To include people not in the CMS, create an item for them and add their image and name (required), contact information (optional), and link (optional). 
• For the link, include a link that correlates with the person's web presence. It could be their company's person page, or personal website. 
• Use this component to quickly add someone who does not have a People content type, or for "one-offs" that will never need a People content type.

Manual People List example: 

LINK GROUP

What it is: 

A compact and attractive way to group links to other pages, to aid wayfinding.

UX purpose:

• Wayfinding
• Reference

Usage guidelines: 

• Use a Link Group in place of more visually-heavy callouts when you need to quickly share access to two or more destinations. 
• Every link on the list should logically fit with the list title, and every list item title should be concise, meaningful, and descriptive—there’s no room to include additional detail and summary to the links in this component.
• The Link Group title is required.
   

Link Group example: 

MEDIA GRID

What it is: 

• A way to showcase a group of photos and/or video and tell a story with them.

UX purpose:

• Exploration and Storytelling
• Promotional
• Supplemental

Usage guidelines: 

• Think of a Media Grid as being made up of ‘rows’ and for each row you have the choice of three layouts:
• 70 / 30 - large photo or video on the left, small photo the right. 
• 30 / 70 - small photo on the left, large photo or video on the right.
• 100 - largest photo or video takes up the full width of the page.
• When creating a Media Grid, first consider the types and grouping of media that will be added.
  • If all items are from a single event or range in time, they should be in chronological order.
  • If they’re grouped by concept, order them by importance, as media closer to the beginning of the set is more likely to be seen.
• Use captions to help visitors see what ties all these items together and what makes them notable. Captions are optional (though alt text is not).
• Think of this component as an opportunity to tell a story in pictures, or display pictures in a larger format than available with other components.
• Use only your best photos. Less is more.

Accessibility Note

Be sure to follow best practices when naming files, using alt text, and creating transcripts. WCAG 2.1 guidelines require the inclusion of descriptive alt text for images and transcripts for videos. When captioning videos, write descriptions that summarize the most compelling and important points contained within the video to encourage users to view the item. 

Media Grid example: 

PERSON GRID

What it is: 

• A relational, related people component created for degree program detail pages, but useful for any page where you want to showcase related faculty and provide an engaging path to their detail page. 

UX purpose:

• Promotion
• Wayfinding

Usage guidelines: 

• Simply select faculty members who have people records in the CMS, in any order you choose. 
• Allows for unlimited number of faculty.
• Since this is a relational component, if the faculty member's detail page is removed from the CMS, then they will disappear from this component. 
• Make the most of the Title and Description fields. Title and Description text are good for differentiating groups of faculty, and reiterating brand value, in context of the page content.

Person Grid example:

PERSON HIGHLIGHT

What it is: 

A person-centered, full-width, interactive component that highlights a success story in the context of Penn GSE's values and brand.

UX purpose:

• Informational
• Promotional
• Supplemental

Usage guidelines: 

• This is the place to show off short, first person videos that you may have produced for campaigns. It is also a good way to display career path stories. 
• This component adds visual interest to the page.  Choose your best images for the Tall Image.
• Video is required.

Person Highlight example: 

RELATED NEWS

What it is: 

• An relational component that automatically displays related news items in the News Topic you choose. 

UX purpose:

• Promotion
• Wayfinding
• Informational

Usage guidelines: 

• Use as supplemental content within the body of a page, and at the end of a page as a natural next destination if someone has already scrolled through or read the rest of the page.
• You choose a News Topic, and the Related News row is automatically filled with news items in that topic.
• Choose a News Topic that directly relates to the page content, or is a natural progression from it.
• Make the most of the component title, instead of using "Related News." Unless it is used in conjunction with a strong heading that precedes it. 
   

Related News example: 

SIMPLE CTA

What it is: 

• A prominent, concise call to action.

UX purpose:

• Promotion
• Task Completion and Conversion

Usage guidelines: 

• Place at the end of a section or page, as the single culminating, desired action that you want users to take after getting through the content.
• It should seem like a natural thing to do at that point in the page. 
• You-focused description text, and imperative button text work best in a simple CTA. 
• The button is required, and the secondary link is optional.
  • The secondary link can be a simple hyperlink. 
  • Alternatively, keep the secondary link fields blank, and check the Enable Send Details Link option. This option will open the visitor's email client with a message containing a link to the current page.
     

Simple CTA example: 

STATS AND FACTS

What it is: 

• A related group of statistics.

UX purpose:

• Promotion
• Exploration and Storytelling
• Informational

Usage guidelines: 

• The component must have a title.
• Choose a title and facts that tell a story.
• Choose stats that are informative, containing numbers that may be on visitors’ minds as they compare options. See examples in the screenshot. 
• Minimum 3,  no maximum
• Each statistic should have the number (percentage, ratio, whole number) and the context below. Context should be no more than 50 characters. 
• Professional Development detail pages, such as Project-Based Learning,  use keywords in place of numbered statistics. Make these words short enough so they won't be cut off.

 Stats and Facts example: 

STORYTELLING

What it is: 

• An attractive, interactive component intended to help you tell several facets of a story, all in one package.

UX purpose:

• Exploration and Storytelling
• Promotion
• Informational

Usage guidelines: 

• Use when you want to impress visitors with compelling copy and imagery that ties together what makes Penn GSE special. 
• Inline links are optional. This component is not a wayfinding device. It is meant to have impact all by itself. 
• Make sure that the elements all work in concert to tell a single story.

Storytelling example: 

TESTIMONIAL

What it is: 

• An attractive, full-width feature to grab visitors with first-person accounts that bolster the information shared on the page. 

UX purpose:

• Supplemental
• Promotion
• Exploration and Storytelling
• Wayfinding

Usage guidelines: 

• Testimonials provide a personal touch. First-person impressions can enhance the credibility of your content.
• Use testimonials to add visual interest and variety and to break up a page.
• Use testimonials as evidence and illustrations of points you make in components before or after them.
• For the required photo, experiment with headshots and action shots.
• The link is also required. Use it to continue the person's story, as in a news item, or point to the area where the person is involved.
• For testimonials, the shorter the better. The example is about the right length. 
• All testimonials must have an attribution (the person quoted).
   

 Testimonial example: 

TOPIC GROUP

What it is: 

• A flexible component to show images, text, and focused user pathways. Topic Group may be the most versatile component. 

UX purpose:

• Exploration and Storytelling
• Wayfinding
• Informational

Usage guidelines: 

• After WYSIWYG, the Topic Group is the design system's most versatile component. Here are some examples of how to use it:
  • Connect the content on the current page with content that lives in different sections.
  • Preview children pages of the page the visitor is currently on. 
  • Number the topics to illustrate a step-by-step process. 
• When creating content for topics, always consider why the user is on this current page, where they would need to go next, and how those are connected. 
• Each topic should be limited to a single subject, though you can link to items related to that topic.
• Topic Group Title is required and Description is optional. Description microcopy can be very helpful to visitors as they navigate the page and decide what to pay attention to.
• Topic row image is optional. But images add excellent visual interest. Make sure images implement the Topic Group title, topic text and link(s). Choose striking images.
• Each topic can have one to five link outs, but they are not required. Three links max is a good rule of thumb, to maintain balance with the accompanying image. Link titles should be descriptive of the destination page, using either the destination page’s title or an action phrase, instead of ‘Learn More’.  

Topic Group example: 

VIDEO EMBED

What it is: 

• A full-width, interactive component to showcase your most compelling video content.

UX purpose:

• Exploration and Storytelling
• Promotion
• Informational

Usage guidelines: 

• Videos need to be hosted on YouTube or Vimeo.
• Videos will be played inline.
• The component requires an image to be displayed before visitors play the video.
• Component Title, the large text above the video, is optional. But microcopy here sets the stage. 
• Video Title is required. The Video Description is optional. But here too, microcopy helps tell the story.
   

Video Embed example: 

VISUAL CTA

What it is: 

• A CTA with storytelling elements and a large image.

UX purpose:

• Task Completion and Conversion
• Promotion
• Wayfinding

Usage guidelines: 

• Use when you want to compel visitors to take a big action at the end of a rich information section, such as applying to a program or reading about big news at Penn GSE. 
• Make sure that the headline, description, image, and CTA link(s) complement each other and tell a story when read together.
• Choose your most striking images.
• Like other CTA's, place it at the end of a section or a page, where you want the visitor to take the next step in the journey, ideally to a conversion page. 

Visual CTA example: 

WYSIWYG

An acronym for “what you see is what you get”, a WYSIWYG editor is a component that allows you to populate, edit, and format content in a form closely resembling the final layout of the rendered text. It has a number of built-in markup options and a familiar interface—allowing for significant flexibility. The WYSIWYG editor is capable of styling many different elements.
 

General Usage

The WYSIWYG Block is often the first building block in the content region of a page, but it doesn’t have to be. It’s possible to have more than one WYSIWYG block per page which makes it possible to break up long texts into two or more content areas with other more visual building blocks in between. A varied content layout is easier for your readers to scan and parse.  

Warning

Be careful when pasting content from other word processors. The resulting text can be formatted in unexpected ways. If you do paste in from outside, always use a paste as text keyboard shortcut.

Accessibility Note

To ensure you are creating accessible content when formatting text in the WYSIWYG Block, be sure to follow WCAG headline use guidelines. Follow best practices when naming files, using alt text, and creating transcripts. WCAG 2.0 guidelines require the inclusion of descriptive alt text for images that are not merely decorative. Refer to the W3C alt Decision Tree, when writing alt text. The decision tree is also linked to in every image’s Details panel.

Video captions are also required. When captioning videos, write descriptions that summarize the most compelling and important points contained within the video to encourage users to view the item. 

Headings

Headings 2-6 help break up the page into logical priority and hierarchy. As such, they should always follow a sequence. Heading 1 is designated for the page title and appears at the top of each page. Heading 2 and below are to be used for organizing body copy. Use background shading for visual appeal and to break up larger WYSIWYG sections.

Inline links

Hyperlinks can be added to words or phrases for when you need to link out to something within paragraph text, such as our faculty, or interest areas. We recommend that all links open in the same tab, even links to external sites. This is current best practice, for accessibility and usability reasons. If visitors want to open a hyperlink in a new tab, they can do that with a browser command. 

Bulleted and numbered lists

Bulleted (Unordered) lists are great for breaking up long paragraphs that mention many items broken up by commas, or any time you have a number of equally important items within a particular category. Numbered (Ordered) lists are great for breaking up sequences of information in a process, such as application steps.

Tables

Tables can contain as many rows as you like, though you should limit the number of columns to 4. Though more will still work, they will horizontally scroll. Formatting tables is labor intensive, but you’ll find controls for them in the toolbar.

Inline Images and Video

Both images and video can be included within the WYSIWYG, Many components use image and video, so the best time to choose an inline image or video is when it adds context to the written body copy around it. You can change the positioning of images in relation to text, and add or edit the caption from the Media Gallery before you insert it, or with popup controls after you insert it.

Block Quote

Create a new block quote to display, or insert one that another user has created, by choosing Select Existing, and finding the existing quote by keyword: