Layouts - The University of Pennsylvania Component Guide

A-Z

A

Notes

  • For specific use in the A-Z template.
  • Each letter section requires a data-attribute: data-letter.

Code

Accordion Columns

Two-column Accordion

Academic Programs

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Cultural Institutions

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Learn More

Three-column Accordion

Business Services Division

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Learn More

Information Systems & Computing

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Learn More

Penn's Division of Human Resources

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Learn More

Notes

  • Example layout of the accordion component within columns.
  • Can be two accordion-columns__content--2 or three columns accordion-columns__content--3

Code

Card Listing

Card Listing (card-listing--2)

Alt Text

Penn Center for Innovation (PCI)

Every day, research activities at Penn result in exciting scientific breakthroughs and technological advances that have commercial potential. PCI works in partnership with Penn faculty, staff and students to advance these discoveries and ideas towards new products, services and/or businesses that provide benefits back to Penn, its inventors and society.

Visit PCI
Alt Text

Center for Undergraduate Research and Fellowships (CURF)

As one of the world’s leading research universities, Penn has an array of faculty conducting cutting-edge research in all disciplines. The Center for Undergraduate Research & Fellowships helps Penn undergraduates become involved in research by teaching them how to identify resources, narrow their searches, and shape their initial inquiries in order to find appropriate faculty mentors and research funding.

Visit CURF

Notes

  • The Card Listing component currently uses the standard Card Component
  • Background colors are added by wrapper containers.

Code

Column Layouts

Two Column Layout

Diversity (Fall 2018)

48%

of the Class of 2022 identify as black, Hispanic, Asian, or Native American

55%

of all students currently enrolled are women
Diversity at Penn
Alt Text
Caption lorem etiam porta sem malesuada magna mollis euismod.

Three Column Layout

Faculty (Fall 2018)

  • Standing 2,753
  • Associated 2,040
  • Total 4,793
  • Academic Support Staff 2,461
  • The student-faculty ratio is 6:1

Members of distinction of the faculty, active, and emeritus, include:

  • Members of the Academy of Arts and Sciences. 88
  • Members of the National Academy of Mediciine. 94
  • Members of the National Academy of Sciences. 42
  • Members of the American Philosophical Society. 30
  • Geggenheim Fellowships. 169
  • Members of the National Academy of Engineering. 15

In the past two decades, the faculty has been home to:

  • MacArthur Award recipients. 9
  • National Medal of Science recipients. 1
  • Nobel Prize recipients. 1
  • Pulitzer Prize recipients. 4

Notes

  • Basic column layouts to be used when none of the other components are applicable. These two examples display facts, but could be used for standard WYSIWYG.
  • Two column layout uses class layout--50-50 and three column layout uses class layout--28-28-28.

Code

Content Aside

Office of the Vice Provost for Research

The Vice Provost for Research is an advisor to the Provost and has oversight of the University’s vast research enterprise, encompassing a broad spectrum of research support services, regulatory bodies, multi-disciplinary campus-wide Centers and Institutes, and partnerships to further develop investigator inventions. OVPR collaborates with Penn constituents and external partners to promote meaningful scholarship, uphold research integrity, and foster new discoveries.

Services For Researchers

The investigative collaborations that take place at Penn represent some of today’s most cutting-edge interdisciplinary research. Explore the 142 centers and institutes that are generating new knowledge all over campus, and learn about the powerful impact this Penn-generated knowledge is making in all corners of the world.

Centers & Institutes

The Office of the Vice Provost (OVPR) is charged with oversight responsibility for multiple regulatory compliance areas at Penn. Given the breadth of regulations and guidelines, research compliance is a shared responsibility between numerous University offices.

Funding

The Office of Vice Provost for Research manages a number of internal funding opportunities on behalf of the University as well as access to external funding opportunities.

Notes

  • This sections title is outside the WYSIWYG to have the aside start align with the content.
  • Background colors are added by wrapper containers.

Code

Contact Information

Alt Text

Office for the Vice Provost for Reasearch

Contact Info

Suite 118 College Hall
University of Pennsylvania
Philadelphia, PA 19104-6376
(215) 898-7326
Contact Us

Hours

Monday-Friday: 9 am - 5 pm

Notes

  • This sections title is outside the WYSIWYG to have the aside start align with the content.
  • Background colors are added by wrapper containers.

Code

Content Spotlight

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
Alt Text
Subheading

Campus Media

Look here for new and communications services offered by the University; includes news offices, publications, telephone and video services and more.

Campus Media
Alt Text

Notes

  • Used to feature text that is supported by an image.
  • Subheading is optional.
  • Can support an article treatment via optional taxonomy terms and date.
  • Optional red bg-red or blue bg-blue background.

Code

Content Gallery

Alt Text

Students lorem ipsuum dolor sit amet

Alt Text

Slide 2 Text

Alt Text

Slide 3

Alt Text

Slide 4

Penn Parents

The Office of Parent Outreach and Development/Penn Parents is the central resource for connecting undergraduate parents and families to the University. Through events, communications, volunteer opportunities and The Parents Fund, the Penn Parents team is committed to building relationships and creating avenues for parents to feel informed, connected, and be uniquely involved in the life of the University.

Explore

Notes

  • Used to feature text and links that is supported by an image or image gallery.

Code

Event Calendar

Important Dates

Thurs-Fri Class Schedule on Tues-Wed

Thanksgiving Break Thursday-Sunday

Classes Resume Monday

Last Day of Classes Monday

View Academic Calendar on Penn Today

Notes

  • Sidebar treatment for a simplified event listing.

Code

Event Listing

Important Events

See All Events
See All Events

Notes

  • Uses the Event Card component
  • Is dependent on an accessible fork of Ken Wheeler's Slick, by Bryan Garaventa, which we have forked to modify (Github
  • Slider is used for screens under 1024 pixels

Code

Facts

Research Facts

189

Centers & Institues

$1.08B

2019 Research Budget

5,000+

Research Faculty

Code

Featured Story

Alt Text

Notes

  • The cards inside of the Featured Story is the Featured Initiative components

Code

Grid

Three Across Cards with Background Color

Title Heading Lorem Ipsum

Four Across Cards

Alt Text

Penn Museum

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.

Alt Text

Arthur Ross Gallery

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.

Alt Text

Institute of Contemporary Art

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.

Alt Text

Anneberg Center

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.

Four Across Cards in Filterable Format

Heading Lorem Ipsum

Notes

  • Display is styled for either three or four items in a row.
  • Optional red bg-red or blue bg-blue background.

Code

Homepage Hero

Campus & Community

Engaging Minds showcases best part of Penn in New York

For Penn synthetic biologist César de la Fuente and his team, these concepts aren’t some far-off ideal. They’re projects already in progress, and they have huge real-world implications should they succeed.

 

Arts, Humanities, & Social Sciences

Sculptor Michelle Lopez creates installation for ICA exhibition ‘Ballast & Barricades’

Code

Page Header

  • Home
  • / Research & Innovation

Research & Innovation

With more than $900 million in annual R&D expenditures, Penn is one of the nation’s top research universities, not only generating important new knowledge in the fields of medicine, technology, business, science, and beyond, but applying this knowledge to improve the lines of individuals and communities at home and around the world. Innovative research that yields actionable knowledge is one of the cornerstones of Penn Compact 2020, President Gutmann’s vision for the future of the University.

Notes

  • Header treatment without an image.
  • Accounts for breadcrumbs, page title and optional intro text.

Code

Page Header Hero

Academics

Alt Text

Graduate Admissions

Lorem justo odio, dapibus ac facilisis in, egestas eget quam. Vivamus sagittis lacus vel augue.

Alt Text

About

Alt Text

Introduction to Penn

Lorem justo odio, dapibus ac facilisis in, egestas eget quam. Vivamus sagittis lacus vel augue.

Alt Text

Trustees & Administration

Lorem justo odio, dapibus ac facilisis in, egestas eget quam. Vivamus sagittis lacus vel augue. Lum id ligula porta felis euismod semper.

Alt Text

The President's Website

Lorem justo odio, dapibus ac facilisis in, egestas eget quam. Vivamus sagittis lacus vel augue. Lum id ligula porta felis euismod semper.

Alt Text

“Penn has a long and proud tradition of intellectual rigor and pursuit of innovative knowledge… That tradition lives today through the creativity, entrepreneurship, and engagement of our faculty, students, and staff.

Amy Gutmannn, Position/Title

Notes

  • Header treatment with a large image or quote.
  • Accounts from breadcrumbs, page title, large image/quote and optional subpage listing.

Code

Section Header

Section Header Left Aligned

Penn Today

Section Header Centered

Stay Connected

Section Header with Filter

News via Penn Today

Section Header on dark background

Penn Priorities

A look at a few of our big picture priorities that improve Penn as we create knowledge to benefit the world.

Code

Split Content

President Amy Gutmann’s far-reaching vision for the University builds on the success of the original Penn Compact, which she launched at her inauguration in 2004. Penn Compact 2020 outlines President Gutmann’s manifold strategy for making Penn the most inclusive, innovative, and impactful university in the nation.

Penn Compact 2020

Inclusion

Increasing diversity, expanding financial aid, and offering free online classes to the public are three of the many ways Penn nurtures an inclusive learning environment.

Innovation

Penn’s culture of innovation, entrepreneurship, and interdisciplinary collaboration generates discoveries and applies them to pressing social needs.

Impact

Faculty and students leverage Penn’s distinctive intellectual resources to promote progress and prosperity in our local, national, and global communities.

Notes

  • An alternative option for two column layout, primarily allows for WYSIWYG content in both columns via the wysiwyg class.

Code

Student Spotlight

Featured Student Story Penn Today

Penn Senior Researches the Silence of Socrates in Plato’s Symposium

“That’s the nice thing about having professors who can tell me when there’s not enough evidence to support my idea. It tempers me and forces me to go back to the text and come up with really clear arguments. I like to think it’s youthful exuberance, and Plato’s such a tough puzzle, I mean, there’s so much there that it’s hard not to grab at things.”

Learn More
Alt Text
Donald AntenenBachelor of Arts, Classical Studies, Phi Beta Kappa ’15

Notes

  • 2:3 image ratio is recommended.

Code

Tabs

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in vehicula dolor. In auctor luctus sem vel dignissim. Integer a orci vitae est dictum lacinia. Quisque ultrices justo scelerisque nunc fermentum, ut porttitor lorem fringilla. Integer auctor elit in odio commodo, ut euismod nisi aliquam. Fusce tempus luctus ultricies. Duis tempor metus nec ultrices elementum. Sed semper sodales imperdiet. Suspendisse gravida ac neque quis pellentesque.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Nulla magna leo, rhoncus a lacus sed, viverra viverra tortor.Integer sit amet maximus massa.Etiam ultrices massa arcu, et gravida tellus bibendum a.Phasellus a ullamcorper magna, eu placerat mauris.Curabitur quis elementum nibh.Interdum et malesuada fames ac ante ipsum primis in faucibus.Proin et sem interdum, vulputate ipsum et, dignissim elit.Curabitur dolor risus, pretium nec feugiat nec, faucibus et neque.Nunc iaculis lacinia dapibus.

Notes

Code

Upcoming Events

Upcoming Events

Alt Text Event

Honour Mack

Honour Mack, a painter and professor at Maine College of Art, discusses her work.

Exhibits

Frankenthaler on Paper

This exhibition showcases 10 soak-stain paintings on paper from abstract artist Helen Frankenthaler, plus 17 prints. Works date from the 1970s to 1990s and are rarely displayed.

More Events Via Penn Today

Notes

  • Uses the Event Card component
  • Is dependent on an accessible fork of Ken Wheeler's Slick, by Bryan Garaventa, which we have forked to modify (Github
  • Slider is used for screens under 1024 pixels

Code