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

Landing: Informational

This is the demo page for the Landing: Informational content type. This page template uses the unique Swoosh Hero and many components ideal for first level landing pages.

Available Components

 

Content Discovery Interactive & Media Text & Navigation
  • 50/50
  • Animated 50/50
  • Description & Card Carousel
  • Description & Image Cards
  • Description & Summary Cards
  • Enhanced 50/50
  • Featured Summaries
  • Filtered Events Display
  • Filtered News Display
  • People Collection
  • Photo Feature: 2-Column
  • Social Media
  • Cost Component
  • Enhanced Photo Gallery
  • Full-width Image
  • Full-width Video
  • Location Map
  • Program Finder
  • Rollover Photo Grid
  • Slideshow
  • Transition
  • User Choice Carousel
  • User Choice: Vertical Tabs
  • Descriptive Links
  • Enhanced Secondary Navigation
  • Facts & Figures
  • Heading and Description
  • Full HTML
  • Link Grid
  • Rich Text
  • Secondary Navigation
  • Sticky Promo
  • Tabbed Link Grid

View Live Example

Browse Demo Components

Below are examples of components available on the Landing: Informational 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

Photo Feature: 2-Column

Headline 1

Photo Feature: 2-Column displays a prominent image and bold content as users scroll down the component. This component has text and links on one side and an image with a caption area on the other side.

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

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

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

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.

Leonid Yanchis posing with his 2 daughters

Test Person 2

Optional contextual rich text displays here.

Filtered Events Display (Featured)

Filtered Events Display (Filtered)

Filtered Events Display (Similar)

Filtered News Display (Featured)

webpage building graphic

This guide provides an overview of how the RCCL works and first steps for a website project.

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