General - The University of Pennsylvania Component Guide

Accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu magna eu sem ornare convallis vitae eu ex. Nullam malesuada neque eu posuere iaculis. Etiam dapibus, ligula bibendum interdum facilisis, justo erat volutpat elit, eu porta dui massa id nibh. Morbi pharetra volutpat tempus. Quisque mollis tortor dolor, ut tempus lacus lacinia vitae. Aliquam sed sollicitudin nisl. Aliquam ac ante ultrices, suscipit nibh ac, commodo sem. Nam vel ex felis. Nulla sodales porta ipsum non ornare. Sed eleifend erat quis nibh posuere imperdiet. Ut purus sapien, commodo non pharetra sit amet, imperdiet quis metus. Sed rhoncus ante eget neque sodales venenatis.

Notes

  • Add data-allow-multiple to js-wikit-accordion to allow multiple panes open at the same time.
  • Add data-allow-toggle to js-wikit-accordion to allow only one pane open.This can produce screen jumpiness especially on mobile.

Code

Alert

Campus closed on Thursday due to winter weather advisory. Learn More

Campus closed on Thursday due to winter weather advisory.

Emergency!

A suspect with a weapon is on campus. Go into the nearest room and lock the door. Follow instructions from authorities.

Notes

  • Three alert styles alert--primary, alert--secondary and alert--emergency.
  • Alerts can have a corresponding data attribute of data-alert. This allows for LocalStorage to know which alert(s) has been closed by the user and will keep the alert from displaying for that user's session. If no data attribute is present, the alert will continue to display upon every page load.
  • For testing purposes, use the clearAlert(); function to display all alerts again if they've been closed.

Code

Breadcrumbs

Code

Filters

Code

Quote

Alt Text

"Innovation is much more than traditional patenting and technology transfer. It is about creating an innovation ecosystem that fosters a fluid exchange of ideas and expertise across a broad spectrum of new and established knowledge."

Amy Gutmann, Position/Title

Notes

  • Reference file for the Quote Slider compontent, but could be used on it's own.
  • This quote treatment accounts for a standard block quote with an optional image.

Code

Quote Overlay

Alt Text

"Innovation is much more than traditional patenting and technology transfer.It is about creating an innovation ecosystem that fosters a fluid exchange of ideas and expertise across a broad spectrum of new and established knowledge."

Amy Gutmannn, Position/Title

Notes

  • Full-width quote treatment with background image and color overlay.
  • Red background: quote-overlay__picture--red, blue background: quote-overlay__picture--blue

Code

Testimonial

Innovation is much more than traditional patenting and technology transfer. It is about creating an innovation ecosystem that fosters a fluid exchange of ideas and expertise across a broad spectrum of new and established knowledge.

Amy Gutmann, Position/Title

Notes

  • For use within sidebar content.

Code

Text CTA

Student Resources

Financial Aid

The First-Generation, Low-Income (FGLI) Program opened in 2016 at the Greenfield Intercultural Center (GIC), part of the Division of the Vice Provost for University Life. The FGLI Program supports students' academic, personal, and social transition needs while facilitating community-building and a sense of belonging.

Since it was launched in 2007, Penn’ s all - grant financial aid program has provided access to an Ivy League education for 7,475 students from a range of social and economic backgrounds.

News Article Display

Featured Penn Today

The politics of health inequality

Ahead of Super Tuesday, political scientist Julia Lynch discusses her new book, which argues that the way politicians frame the problem of health inequality sets it up to be unsolvable.

Subtopic Taxonomy
Februrary 28, 2020
Full Story

Notes

  • This component is primarily used within the Content Spotlight, Content Gallery and Student Spotlight layouts, but could be used on its own.
  • Content model can include subheadings, heading, paragraph text, taxonomies, date and button.

Code