Sliders - The University of Pennsylvania Component Guide

Penn Priorities

Penn Priorities

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

Notes

  • The Priority Card component is used in the Penn Priorities slider
  • JavasScipt is looking for a data attribute of data-slider with a value of center-to-edge

Code

Card Sidebar Slider

Notes

  • JavasScipt is looking for a data attribute of data-slider with a value of single

Code

Card Slider

Two Across Slider

Three Across Slider

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.

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.

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.

Alt Text

Slide 4

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

Learn More
Alt Text

Slide 5

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

Learn More
Alt Text

Slide6

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.

Learn More

Notes

  • Two Across JavasScipt is looking for a data attribute of data-slider with a value of two-across. This slider instance is for a Card Slider layout with a text area to the left of the slider.
  • Three Across JavasScipt is looking for a data attribute of data-slider with a value of three-across. This slider instance is for use within tabbed layout or should at least have a darker background color applied.

Code

Image Slider

Alt Text
01 / 07
Pennovation Center

Pennovation Works

Pennovation Works is a distinctive blend of offices, labs, and production space developed to link the intellectual and entrepreneurial initiatives necessary for advancing knowledge.

Alt Text
02 / 07
Singh Center for Nanotechnology

Slide 2

Lorem Ipsum

Alt Text
03 / 07
Tangen Hall

Slide 3

Lorem Ipsum

Alt Text
04 / 07
Singh Center for Nanotechnology Singh Center for Nanotechnology Singh Center for Nanotechnology Singh Center for Nanotechnology Singh Center for Nanotechnology

Slide 4

Lorem Ipsum

Alt Text
05 / 07
Slide 5 Caption

Slide 5

Lorem Ipsum

Alt Text
06 / 07
Slide 6 Caption

Slide 6

Lorem Ipsum

Alt Text
07 / 07
Slide 7 Caption

Slide 7

Lorem Ipsum

Notes

  • Basic single slider instance within a container.
  • JavasScipt is looking for a data attribute of data-slider with a value of single-image.

Code

Quote Slider

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

"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

  • Image is not necessary, but is recommended.
  • JavasScipt is looking for a data attribute of data-slider with a value of single.

Code