Rutgers logo
Rutgers Core Component Library (RCCL) Demo Site
Red legos

Landing: Marketing

The vertical decorative line in the hero is required. Offers the Full-Width Hero only. Use an image or ambient video in the background. Note: This page does not have breadcrumbs.

Components Available

  1. Animated 50/50
  2. 50/50
  3. Description & Card Carousel
  4. Feature: External Content
  5. Feature: Internal Content
  6. Featured Summaries
  7. Filtered News Display
  8. Photo Feature: 2-Column
  9. Social Media
  10. Facts and Figures
  11. Program Finder
  12. User Choice: Vertical Tabs
  13. Full-Width Video
  14. Transitions
  15. Descriptive Links
  16. Heading and Description
  17. Rich Text 
  18. Sticky Promo
Old Queens Gate

Filtered News Display

Facts and Figures (optional headline)

Description (optional description).
There are seven available background colors (red, white, teal, light gray, black, blue, and dark gray).

150+
Undergraduate majors
400+
Graduate programs
Top 25
Public university in the U.S. 

Animated 50/50

Creates an animated series of 50/50s.

The image remains right at all times.

  • As the user scrolls down, the image at the right changes as the text on the left scrolls up.
  • To get the animated effect, you must use at least two 50/50 sub-components within this animated 50/50. 
  • It's recommended that you use at least three 50/50s in this component.
gray placeholder image

Second 50/50

You'll see a red box with an animated arrow prompting the user to scroll.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id enim et urna semper faucibus. Morbi non velit libero. Vestibulum in accumsan neque. Nam placerat fermentum est in tincidunt. Curabitur condimentum viverra nunc quis tincidunt. Donec at lorem in nunc tempus rhoncus vitae a arcu. Aliquam sagittis justo imperdiet magna iaculis convallis. Integer at quam ex. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ut viverra libero. Sed suscipit neque at ante rhoncus, sed varius est viverra. Donec sed gravida sapien, accumsan ultrices est. Etiam porttitor eget magna sodales sodales.

Commencement

Third 50/50

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id enim et urna semper faucibus. Morbi non velit libero. Vestibulum in accumsan neque. Nam placerat fermentum est in tincidunt. Curabitur condimentum viverra nunc quis tincidunt. Donec at lorem in nunc tempus rhoncus vitae a arcu. Aliquam sagittis justo imperdiet magna iaculis convallis. Integer at quam ex. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ut viverra libero. Sed suscipit neque at ante rhoncus, sed varius est viverra. Donec sed gravida sapien, accumsan ultrices est. Etiam porttitor eget magna sodales sodales.

gray placeholder image
gray placeholder image
Commencement
gray placeholder image

Photo Feature: 2-Column

Photo Feature: 2-Column

Jonathan Holloway

Photo Feature: 2-Column
First Descriptive Link

The headline and the black flyout caption over the image are required. You can display the photo on the left or right side of the text. CTA links are available but optional. The individual descriptive links fly up from the bottom of the component. The background color is white.

Second Descriptive link 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Third Descriptive Link 

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Heading and Description 

Add text here. Often used for introductory copy. Optional description. The required headline may be hidden if you only want to use this component to show text and not a large title. This component can be displayed in 3 orientations: vertical, horizontal, and vertical-animated. 

Rich Text 

Vestibulum in accumsan neque. Nam placerat fermentum est in tincidunt. Curabitur condimentum viverra nunc quis tincidunt. Donec at lorem in nunc tempus rhoncus vitae a arcu. Aliquam sagittis justo imperdiet magna iaculis convallis. Integer at quam ex. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ut viverra libero. Sed suscipit neque at ante rhoncus, sed varius est viverra. Donec sed gravida sapien, accumsan ultrices est. Etiam porttitor eget magna sodales sodales.

Cras eu blandit felis. Nam tempus velit dolor, eget vestibulum ante ultricies vitae. Sed tincidunt vehicula leo a sodales. In lacinia risus a tellus congue luctus. Sed maximus ultricies lacinia. Vivamus in lacus orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc tempor lorem enim, id congue metus dapibus quis. Nam gravida vestibulum massa, sit amet luctus justo pharetra sed. Curabitur ac eros ac augue facilisis varius. Praesent luctus sed erat at pulvinar.

Aenean imperdiet neque eget enim venenatis accumsan. Fusce et nibh justo. Morbi vehicula molestie elit, ut auctor leo placerat feugiat. In hac habitasse platea dictumst. Maecenas egestas ipsum in mauris tempor sodales. Suspendisse molestie lectus ut diam tempus bibendum. Sed iaculis orci et ligula suscipit semper. Ut sollicitudin rutrum nunc quis cursus. Sed consequat neque neque. Nam sit amet scelerisque turpis, sed tempor sem. Pellentesque et vulputate sapien.

Fusce diam ante, vehicula ut sodales eget, consectetur sed ex. Donec et ante lacus. Etiam nec dolor ut tortor faucibus molestie id nec quam. Sed consectetur aliquam tincidunt. Praesent massa nisl, volutpat eu enim in, feugiat tempor metus. Donec accumsan, risus non rutrum lacinia, magna sapien semper nulla, eget fermentum metus justo non nibh. Nam vulputate leo a nunc mollis sagittis. Duis id nunc dolor. Duis in eros massa. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ac tortor vitae leo ultricies hendrerit sed sed odio. Proin fermentum iaculis ex, in hendrerit massa iaculis quis. Nam aliquam mattis arcu eu vulputate.

Duis ut tellus turpis. Duis vehicula tincidunt nunc, nec lacinia augue pretium eu. Vivamus urna nulla, maximus id feugiat in, sagittis non dui. Nullam consectetur molestie nibh at dignissim. Vestibulum eu urna varius, vulputate magna vitae, gravida turpis. Aliquam erat volutpat. Vestibulum aliquam ac turpis sit amet dignissim. Aenean dapibus, dui sit amet aliquam finibus, elit justo viverra ante, a varius velit ex vel leo. Etiam et nunc scelerisque, placerat nibh ut, ultrices enim. Phasellus faucibus, est at rhoncus tincidunt, nisi nulla sagittis ante, eu egestas dui leo nec nunc. Praesent ultrices mattis diam, tempus ullamcorper est ornare eu. Duis aliquet, lacus sed molestie ultrices, libero enim eleifend nunc, at dignissim enim magna quis nunc. Donec volutpat turpis ac urna condimentum, ut efficitur odio rhoncus.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque eget tincidunt velit. Donec in lacinia quam. Nullam non placerat ante. Class aptent.