Page Components
Page Components format and present content in a specific way for a specific purpose, such as to create a data table, show a slideshow, or display a quote.
Page Components are usually added directly to a page, making them "single use" pieces of content, i.e. visible and used in only one page.
Page Components can be added to Shared Components to create re-usable blocks of content that can be added to multiple pages.
Below is a list of the Page Components. Click on the name of the component to reveal:
- Reference information about the Component
- The Pages Types and Components where the Page Component is used
- A link to a page that includes an example of the Page Component
Open the page that includes the Page Component to see how it displays on the website. Open the page to edit view to see the content entry fields for the Page Component and how they are filled in.
Available Page Components
-
Accordion
The Accordion component creates a set of expandable/collapsible content blocks (accordion items).
The Accordion component also includes fields for a heading and content to introduce and provide context for the set of accordion items.
Pages in which the Accordion component is used:
- Content Page
- High Level Page
- Admissions Landing Page
- Campus Landing Page
- Program Page
- Article Page
- Person Page
-
Acalog Accordion
The Acalog Accordion component creates a set of expandable/collapsible content blocks (accordion items).
The component includes a single field for inputting the Acalog Program ID. The component then populates the content of the accordion items dynamically.
Pages in which the Acalog Accordion component is used:
- Content Page
-
Faculty and Staff
The Faculty and Staff component creates a grid of panels. Each panel displays the information of one faculty or staff member.
The content of each panel is pulled from Person pages.
This component also includes fields for a heading and content to introduce and provide context for the set of accordion items. There is also a field for a Call-to-Action (CTA) link.
The faculty and staff Person pages are pulled into the component in two ways:
1. By a series of selector fields enabling specific Person pages to be selected.
2. By taxonomy so that Person pages matching the taxonomy selections are pulled in.
Two faculty/staff members are displayed when the component is used on the Content Page.
Three faculty/staff members are displayed when the component is used on the High Level Page, Admissions Landing Page, and Campus Landing Page.
Pages in which the Faculty and Staff component is used:
- Content Page
- High Level Page
- Admissions Landing Page
- Campus Landing Page
-
Financial Aid/Admissions List
The Financial Aid/Admissions List component creates a list of formatted content blocks.
The component includes fields for a heading and content to introduce and provide context for the list.
The content of each item in the list is pulled from a Financial Aid/Admissions List Item Component. The Financial Aid/Admissions List component includes selector fields for selecting the Financial Aid/Admissions List Item Components to pull in.
Pages in which the Financial Aid/Admissions List component is used:
- Content Page
- Program Page
-
Image Grid
The Image Grid component creates a grid of images, statistics, and a video.
The component includes a selector field for selecting one Image Grid Component to pull in.
The Image Grid Component that is pulled in includes the content for two statistics, images to associate with the statistics, the URL of the YouTube video that is played within the Image Grid, and heading and introduction content to introduce and provide context for the grid.
The component fills the remaining "slots" in the grid with images pulled in randomly from the Image and Grid Image media types.
The Image Grid is a direct input component, meaning that it is an integral part of the pages in which it is used. It is not added to the page in way that the other Page Components are.
Pages in which the Image Grid component is used:
- Content Page
- High Level Page
- Admission Landing Page
- Campus Landing Page
- Program Page
- Article Page
-
Location Highlight
The Location Highlight component creates an interactive "location" that highlights specific points of interest with "pins".
The component includes fields for selecting the image onto which to place the pins, and fields for each of the pins: X and Y coordinate fields to place the pin onto the image and a field to include information about what the pin is marking (building, etc.).
Pages in which the Location Highlight component is used:
- Content Page
- High Level Page
- Admission Landing
- Campus Landing
- Program Page
-
Media
The Media component creates a block that features a single image or a slideshow of up to five images.
The component includes fields for selecting the images and for a heading and caption. The heading and caption remain constant and do not change with each image in the slideshow.
Pages in which the Media component is used:
- Content Page
- Program Page
- Article Page
- Person Page
-
Media Video
The Media Video component creates a block that features a YouTube video. The video plays in a pop-up panel so that the website visitor remains on the page while viewing the video.
The component includes fields for entering the URL of the page for the video on YouTube, a "Poster" image that displays and the website visitor clicks on to play the video, and for a heading and caption.
The component places a "Play" icon at the center of the "Poster" image.
Pages in which the Media component is used:
- Content Page
- Program Page
- Article Page
- Person Page
-
My LR Experience (Curated)
The My LR Experience (Curated) component creates a list of formatted content blocks that highlight individual student experiences at Lenoir-Rhyne.
The component includes selector fields for selecting the LR Experience Components that populate the list.
The content of each item in the list is pulled from a LR Experience Component. The LR Experience Component includes fields for the student's quote, the name of the student, a link, an image of the student, and the URL of the page for a video on YouTube. Like the Media Video Page Component, the video plays on the page on which the LR Experience is on.
If a YouTube video is included, the component places a "Play" icon at the center of the image.
Pages in which the My LR Experience (Curated) component is used:
- Content Page
- High Level Page
- Admission Landing
- Campus Landing
- Program Page
- Article Page
-
My LR Experience (Taxonomy)
The My LR Experience (Curated) component creates a list of formatted content blocks that highlight individual student experiences at Lenoir-Rhyne.
The component includes taxonomy groups for pulling in the LR Experience Components that populate the list.
The taxonomy groups are:
- Audience
- Campus
The content of each item in the list is pulled from a LR Experience Component. The LR Experience Component includes fields for the student's quote, the name of the student, a link, an image of the student, and the URL of the page for a video on YouTube. Like the Media Video Page Component, the video plays on the page on which the LR Experience is on.
If a YouTube video is included, the component places a "Play" icon at the center of the image.
Pages in which the My LR Experience (Curated) component is used:
- Content Page
- High Level Page
- Admission Landing
- Campus Landing
- Program Page
- Article Page
-
Organized Links
This component is used to create a list of links that is displayed as two columns.
The component does include the option for the three list types:
- bullet
- numbered
- no markers
The links are added as a single and then broken out into two columns when displayed on the website with the left column always having the greater number of links when the list contains an odd number of links.
In mobile display, the list is displayed in one column.
Fields are included for an optional heading and intro copy above the list.
This component can be added directly into the Page - Content type and can be moved up and down to change its position with respect to other page components. Multiple instances of the component can be added to a page.
This component also can be added to a Shared Component so it can be pulled into as many pages as needed.
Pages in which the Organized Links component is used:
- Content Page
-
Pull Quote
The Pull Quote component creates a block that features a quote.
The component includes fields for entering the quote and the citation (person to whom the quote is attributed).
Pages in which the Pull Quote component is used:
- Content Page
- Article Page
-
Related Programs (Curated)
The Related Programs (Curated) component creates a grid of formatted content blocks of programs that relate to the content of a page.
The component includes selector fields for selecting the Program pages that populate the grid.
The component also includes fields for a CTA (Call-to-Action) link that displays below the grid of programs.
The content of each item in the list is pulled from the Thumbnail and Teaser content fields in the Embedded Options area, the Heading field, and the Program Type taxonomy terms of the Program page.
Pages in which the Related Programs (Curated) component is used:
- Content Page
- Program Page
- Person Page
-
Related Programs (Taxonomy)
The Related Programs (Taxonomy) component creates a grid of formatted content blocks of programs that relate to the content of a page.
The component includes taxonomy groups for pulling in the Program pages that populate the list.
The taxonomy groups are:
- Program Type
- Campus
The component also includes fields for a CTA (Call-to-Action) link that displays below the grid of programs.
The content of each item in the list is pulled from the Thumbnail and Teaser content fields in the Embedded Options area, the Heading field, and the Program Type taxonomy terms of the Program page.
Pages in which the Related Programs (Taxonomy) component is used:
- Content Page
- Program Page
- Person Page
-
Request Info
The Request Info component creates a block of content that prompts website visitors to request more information about a program.
The component includes fields for a heading, content, and a CTA (Call-to-Action) link that links to a Webform page to request information about the program.
Pages in which the Request Info component is used:
- Program Page
-
Shared Component
The Shared Component component pulls in one or more instances of the Shared Component.
The Shared Component holds one or more Page Components and enables Page Components to be used on multiple pages.
The component includes selector fields for selecting the Shared Components to pull in.
Pages in which the Shared Component component is used:
- Content Page
-
Statistics
The Statistics component creates a block of content that highlights or features two statistics about Lenoir-Rhyne University.
The component includes header and copy fields for providing context for the statistics, fields for the content of each statistic, and a CTA (Call-to-Action) link.
Pages in which the Statistics component is used:
- Content Page
- High Level Page
- Admissions Landing
- Campus Landing
-
Table
The Table component is used to create a data table.
The component includes fields for a heading and copy to provide context for the table, fields for setting the number of rows and columns in the table, fields for entering the content of the header and data cells in the table, a field for a table caption, a field to highlight one row in the table (to draw special attention to it), and a field to import a .csv file to use to populate the table header and data cells.
Pages in which the Table component is used:
- Content Page
- Program Page
- Article Page
-
WYSIWYG
The WYSIWYG component is used to create a block of content formatted using the WYSIWYG editor.
The component includes a field for a heading for the content, an instance of the WYSIWYG editor, and fields for the content of each statistic, and a CTA (Call-to-Action) link.
Pages in which the WYSIWYG component is used:
- Content Page
- Program Page
- Article Page