Page Components

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
    View page with the Accordion page component
  • 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
    View page with the Acalog Accordion page component
  • 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
    View page with the Faculty and Staff page component
  • 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
    View page with the Financial Aid/Admissions List page component
  • 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
    View page with the Image Grid page component
  • 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
    View page with the Location Highlight page component
  • 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
    View page with the Media page component
  • 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
    View page with the Media Video page component
  • 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
    View page with the My LR Experience (Curated) page component
  • 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
    View page with the My LR Experience (Taxonomy) page component
  • 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:

    1. bullet
    2. numbered
    3. 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
    View page with the Organized Links page component
  • 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
    View page with the Pull Quote page component
  • 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
    View page with the Related Programs (Curated) page component
  • 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
    View page with the Related Programs (Taxonomy) page component
  • 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
    View an example program page with the Request Info page component
  • 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
    View page with the Shared Component page component
  • 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
    View page with the Statistics page component
  • 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
    View page with the Table page component
  • 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
    View page with the WYSIWYG page component