Rutgers logo
Rutgers Core Component Library (RCCL) Demo Site
Old Queens Gate

Basic Hero

Allows for an image or ambient video background. In addition, you may have a hero with no image with a simple color band that is shorter in height in white, black, blue, teal, red, dark gray, and light gray.

Components available on Landing: Secondary

Description Link

  • Body - Hero Options:


    Basic Hero 

    ------------------------------------------------

    Content Discovery:

    • 50/50
    • Animated 50/50Cost Component
    • Description & Card Carousel
    • Description & Image Card
    • Description & Summary Cards
    • Facts & Figures
    • Filtered Events Display
    • Filtered News Display
    • Featured Summaries
    • People Collection
    • Social Media
       

    Informational:

    • Cost Component
    • Facts and Figures
    • Interactive:
    • Program Finder
    • Rollover Photo Grid
    • Location Map 

    Media:

    • Full-width Image
    • User Choice: Vertical Tabs
    • Full Width Video
    • Slideshow
    •  

    Sub-Navigation:

    • Descriptive Links
    • Link Grid
    • Tabbed
    • Tabbed Linked Grid

    Text:

    • Accordion
    • Heading and Description
    • Rich Text
    • Sticky Promo
  • Here is some text.

People Collection

Use this people collection to show a list of people, who have already been added to our site through the People CT.

Bob Jones

Bob Jones-Person

Rutgers University-New Brunswick

Assistant Professor

Rutgers University-New Brunswick

Fax555-555-5555

Here is my contextual blurb limited to 550 characters. Use this area to add a short bio instead of or in addition to linking to the full bio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu vehicula tellus. Donec non fermentum sem, in euismod velit. Vivamus sollicitudin, lacus id euismod semper, lorem urna fermentum risus, quis eleifend eros quam ac nunc. Maecenas purus risus, finibus in mollis et, fringilla ut enim. Maecenas semper felis ex. Morbi. 

Adam Aronn-Person

Rutgers University-New Brunswick

Professor

Rutgers University-New Brunswick

Fax555-555-5555

Enhanced 50/50

The e50/50 can take embedded videos hosted on Vimeo or YouTube, as well as Lottie files.

Don't use the e50/50 for static images. 

Filtered Events Display - Display ID: Featured (Shows One, First-Ranked Featured Event Item)

Filtered Events Display-Display ID: Similar  (Shows list of events of selected category/event type)

Filtered Events Display - Display ID: Filtered (Shows top "featured event for site and list of events of selected category/event type)

Animated 50/50 - Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in metus vitae ex condimentum molestie. Phasellus at dolor cursus, tristique justo eu, vestibulum arcu. Vivamus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in metus vitae ex condimentum molestie. Phasellus at dolor cursus, tristique justo eu, vestibulum arcu. Vivamus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in metus vitae ex condimentum molestie. Phasellus at dolor cursus, tristique justo eu, vestibulum arcu. Vivamus.

Student at wall board

Another 50/50

Bold, italics, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in metus vitae ex condimentum molestie. Phasellus at dolor cursus, tristique justo eu, vestibulum arcu. Vivamus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in metus vitae ex condimentum molestie. Phasellus at dolor cursus, tristique justo eu, vestibulum arcu.

  • Vivamus.Lorem ipsum dolor sit amet,
  • consectetur adipiscing elit. Nullam in metus vitae ex condimentum molestie.
  • Phasellus at dolor cursus, tristique justo eu, vestibulum arcu.

Vivamus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in metus vitae ex condimentum molestie. Phasellus at dolor cursus, tristique justo eu, vestibulum arcu. Vivamus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in metus vitae ex condimentum molestie. Phasellus at dolor cursus, tristique justo eu, vestibulum arcu. Vivamus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in metus vitae ex condimentum molestie. Phasellus at dolor cursus, tristique justo eu, vestibulum arcu. Vivamus.

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in metus vitae ex condimentum molestie. Phasellus at dolor cursus, tristique justo eu, vestibulum arcu. Vivamus.Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  1. Nullam in metus vitae ex condimentum molestie.
  2. Phasellus at dolor cursus, tristique justo eu, vestibulum arcu.
  3. Vivamus.Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nullam in metus vitae ex condimentum molestie. Phasellus at dolor cursus, tristique justo eu, vestibulum arcu. Vivamus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in metus vitae ex condimentum molestie. Phasellus at dolor cursus, tristique justo eu, vestibulum arcu. Vivamus.

Old Queens - Rutgers Sign - Fall
Student at wall board
Old Queens - Rutgers Sign - Fall

Accordion

Optional description here. Choice of text hover/rollover states: Blue, red, and teal. Alignment options for above title text is: Left, center, and right

  • Add Rich text. Full rich text styling available. You can embed images and video in this space as well.

    Heading 2

    Heading 3

    Heading 4

    Heading 5
  • Add Rich text. Full rich text styling available. You can embed images and video in this space as well.

    Heading 2

    Heading 3

    Heading 4

    Heading 5
  • Add Rich text. Full rich text styling available. You can embed images and video in this space as well.

    Heading 2

    Heading 3

    Heading 4

    Heading 5

Program Finder Headline

Optional description

What kind of study are you looking for?

Description & Image Card - Title

Optional description. The title and description remain sticky on the left as the user scrolls. Add bold, italics, sub- and super-script, remove formatting, add/remove the link, add an anchor, paste as plain text. Add any number of image card squares. Tip: This component looks best with 4 or more image card squares. 

Description & Summary Cards

The title and description remain sticky while the user scrolls. Optional description here. Color options: White, black, blue, teal, red, light gray, dark gray.

Title for Summary Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in metus vitae ex condimentum molestie. Phasellus at dolor cursus, tristique justo eu, vestibulum arcu. Vivamus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in metus vitae ex condimentum molestie. Phasellus at dolor cursus, tristique justo eu, vestibulum arcu. Vivamus.

Title for Summary Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in metus vitae ex condimentum molestie. Phasellus at dolor cursus, tristique justo eu, vestibulum arcu. Vivamus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in metus vitae ex condimentum molestie. Phasellus at dolor cursus, tristique justo eu, vestibulum arcu. Vivamus.

Title for Summary Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in metus vitae ex condimentum molestie. Phasellus at dolor cursus, tristique justo eu, vestibulum arcu. Vivamus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in metus vitae ex condimentum molestie. Phasellus at dolor cursus, tristique justo eu, vestibulum arcu. Vivamus.

Title for Summary Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in metus vitae ex condimentum molestie. Phasellus at dolor cursus, tristique justo eu, vestibulum arcu. Vivamus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in metus vitae ex condimentum molestie. Phasellus at dolor cursus, tristique justo eu, vestibulum arcu. Vivamus.

Title for Summary Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in metus vitae ex condimentum molestie. Phasellus at dolor cursus, tristique justo eu, vestibulum arcu. Vivamus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in metus vitae ex condimentum molestie. Phasellus at dolor cursus, tristique justo eu, vestibulum arcu. Vivamus.

Title for Summary Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in metus vitae ex condimentum molestie. Phasellus at dolor cursus, tristique justo eu, vestibulum arcu. Vivamus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in metus vitae ex condimentum molestie. Phasellus at dolor cursus, tristique justo eu, vestibulum arcu. Vivamus.

Title for Summary Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in metus vitae ex condimentum molestie. Phasellus at dolor cursus, tristique justo eu, vestibulum arcu. Vivamus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in metus vitae ex condimentum molestie. Phasellus at dolor cursus, tristique justo eu, vestibulum arcu. Vivamus.

Animated 50/50 Title

Add text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eleifend non mi ac blandit. Sed vel metus nisl. Etiam ac placerat leo. Aenean ullamcorper lorem leo, ut tincidunt mauris dictum ultricies. Vivamus sed efficitur nisi, non aliquam diam. Phasellus laoreet orci sit amet lorem facilisis varius a at purus. Vivamus egestas felis nec fringilla varius. Fusce sit amet varius justo, hendrerit luctus odio. Nunc vel erat elementum, fermentum lectus et, aliquam quam. Donec tincidunt neque at leo ornare, non venenatis massa efficitur. Praesent bibendum sagittis tincidunt. Sed posuere turpis sit amet elementum fermentum. Ut in lorem hendrerit, varius quam eget.

Filtered News Display