Card Sliders

Card sliders combine the benefits of cards and slideshows in that they allow you to have teaser events that live in a more condensed space.

Some examples of card sliders on our sites include:

‘Research‘ and ‘change makers’ section on migrations
The top section on Biotechnology
‘Faculty Voices on Teaching’ on the Center for Teaching Innovation.

Image Card Slider

1. A “Card” of Content

2. Cards Can Hold Any HTML

3. They Can Be Varying Heights

4. But Consistency Will Look Best

5. A “Card” of Content

6. A “Card” of Content

7. A “Card” of Content

8. A “Card” of Content

9. A “Card” of Content

10. A “Card” of Content

11. A “Card” of Content

Text Card Slider

1. A “Card” of Content

Max-1 sliders are similar to a standard carousel, but can support any HTML markup needed (like this aside!).

Subheading

Donec ullamcorper nulla non metus focusable link auctor fringilla. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Cras justo odio, dapibus ac facilisis in, egestas eget quam.

2. Cards Can Hold Any HTML

Max-1 sliders are similar to a standard carousel, but can support any HTML markup needed (like this aside!).

Subheading

Donec ullamcorper nulla non metus auctor fringilla. Donec id elit focusable link non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Cras justo odio, dapibus ac facilisis in, egestas eget quam.

3. They Can Be Varying Heights

Max-1 sliders are similar to a standard carousel, but can support any HTML markup needed (like this aside!).

Subheading

Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa focusable link justo sit amet risus.

Cras justo odio, dapibus ac facilisis in, egestas eget quam.