Cards - The University of Pennsylvania Component Guide

Article Cards

Example of a featured article card

Example of a standard article card

Notes

  • The picture element is used on the standard article card and a transparent png is the default for these cards as the image is not shown until desktop. This prevents loading images that are hidden.
  • Article Cards are used inside of Featured News

Code

Card

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

Special Exhibition Moundbuilders

Aug. 1, 2017-Dec. 2, 2019
Penn Museum, 3260 South Street

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Alt Text

Penn Spectrum Weekend

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

By: Firstname Lastname Date

Notes

  • Card--large and card--small classes control various sizing styles when used within the listing layout.
  • Cards can also account for dates, location, and author as seen in the bottom two examples.

Code

Event Cards

Event category is a link

Event category is not a link

Alt Text Event

Honour Mack

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

Event has no image

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.

Notes

  • The category of an event can be a link to a listing page, but not required
  • Cards without images need an additional class of event-card--no-image

Code

Faculty Card

Code

Grid Card

4:3 Aspect Ratio

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.

2:3 Aspec Ratio

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.

Plain modifier class

Notes

  • Used in Grid layout.
  • Display is styled for either three or four items in a row.
  • Recommend either a 2:3 or 4:3 aspect ratio.
  • Picture element is used to control image size as the card layout does change responsively.
  • grid-card--plain modifier class will remove the border when in grid layout

Code

Listing Card

Page Hero child page listing layout

Alt Text

Introduction to Penn

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

Article listing layout

Alt Text

Penn Spectrum Weekend

Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Date

Notes

  • Hero listing have a modifier class of listing-card--small

Code

Priority Card

Notes

  • Card is used in the Penn Priorities slider

Code