Rutgers logo
Rutgers Core Component Library (RCCL) Demo Site
Rutgers University queens gate

Landing: Secondary

This is the demo page for the Landing: Secondary content type. This page template uses the Basic Hero and offers the most number of components and secondary navigation options, making it ideal for subpages.

Browse Demo Components

Below are examples of components available on the Landing: Secondary content type. By the way, this is the Heading & Description component.

Animated 50/50

Animated 50/50 provides an interactive scrolling experience ideal for displaying rich images and text with three or more 50/50 components.

rutgers students

50/50 #2

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. 

Rutgers newark campus

50/50 #3

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. 

Rutgers newark campus
rutgers students
Rutgers newark campus
Rutgers newark campus

Description & Image Cards

Description & Image Cards displays content in two sections. The right side is organized as two columns of image cards that scroll within the component, while the left side displays header text and description.

Rutgers student
Optional Name Tag

Image Card 1

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.

Image Card 3

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.

Image Card 2

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.

Image Card 4

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.

Description & Summary Cards

Description & Summary Cards displays content in two sections. The right side is organized as two columns of text content with links (no images), while the left side displays header text and description.

Summary Card 1

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

Summary Card 2

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

Summary Card 3

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

Summary Card 4

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

Facts & Figures

Facts & Figures displays statistics and other key pieces of information with bold text, optional button style link and background color options.

Top Heading
Stat 1
subheading

Description with optional links

Top Heading
Stat 2
subheading

Description with optional links

Top Heading
Stat 3
subheading

Description with optional links

Top Heading
Stat 4
subheading

Description with optional links

Top Heading
Stat 5
subheading

Description with optional links

Accordion

Accordion groups and organizes rich text content, including images, tables, and more, into expandable "drawers" for easy browsing.

  • Add any rich text content here, including embedded images, tables, lists, and videos.

     

    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.

  • Add any rich text content here, including embedded images, tables, lists, and videos.

  • Add any rich text content here, including embedded images, tables, lists, and videos.

    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.

Slideshow

Slideshow displays a set of images with optional descriptions. Images can be viewed one at a time by navigating with the arrows at the bottom of the component.

Caption 1

Caption 2

Caption 3

Caption 4

rutgers R signage

Program Finder

Program Finder provides an interactive link experience. This component uses the Program Type content type to create a multi-step user flow with guided links.

What kind of study are you looking for?

rutgers students

Cost Component

Cost component provides an interactive experience for users seeking undergraduate cost information. Site editors must create four "cost" entries for each desired school/location to cover the following cases:

•  NJ Resident - Commuter
•  NJ Resident - On Campus
•  Out of State - Commuter
•  Out of State - On Campus

Cost for Undergraduates

People Collection

People Collection displays a vertical list of curated people's profiles. Each entry's content is associated with a Person content type and includes an optional contextual blurb and link.

Rutgers student

Test Person 1

Optional contextual rich text displays here.

Test Person 2

Filtered Events Display (Featured)

Filtered Events Display (Filtered)

Filtered Events Display (Similar)

Filtered News Display (Featured)

Rutgers newark campus

This article can be displayed on pages using various news display components or the Feature: Internal Content component.

Filtered News Display (Filtered Summaries)

Filtered News Display (Filtered)

rutgers R signage

This article can be displayed on pages using various news display components or the Feature: Internal Content component. When using the 'Headline Only Hero', make sure to add a Promotional Image. Promotional Images will display when an article is viewed inside components or on news listing pages.

Full Width Video Headline

Full-Width Video displays a remotely hosted video with an optional headline and description that spans the width of the screen. Videos must first be added to your content management's media library as "Remote Video" type before they can be used inside this component.

Discover Rutgers video

Discover Rutgers University

Rutgers University queens gate
Optional caption for the Full Width Image component