Components in the Main Region

Components are the building blocks of a page. You will add components, stacked one after another, to create your Flexible Page. This guide describes all of the Components that are available in the Main Region of your pages, which is where the vast majority of your content will be located.
﻿
This page will only include a limited sampling of the various ways each Component may be styled and is not intended to be fully comprehensive.
To see how to use these Components on a page and common use cases, visit our  Colorful Theme  and  Traditional Theme  Reference Pages. There you will be able to match your site's color palette and see how all of the many formatting options of each Component will look on your site. 
﻿
Jump to: 
﻿ Text Area⁠ ﻿
﻿ Accordion⁠ ﻿
﻿ Banner Images and their formats⁠ (formerly called "Hero")
﻿ Callout Box⁠ ﻿
﻿ Collection⁠ ﻿
﻿ Color Band⁠ ﻿
﻿ Photo Album⁠ ﻿
﻿ Postcard⁠ ﻿
﻿ Testimonial⁠ ﻿
﻿ Vertical Timeline⁠ ﻿
﻿ Developers' Catalog⁠  (formerly called "View) 
﻿ Video Tutorial⁠ ﻿
Text AreaA Text Area is the most commonly used Component. There are a variety of ways that your text can be formatted within this Component, and you can even wrap text around images/videos here. This is the editor view of a Text Area. For more information about the various ways you can style your text, see our guide on  ⁠﻿⁠Using the Text Area Editor⁠ ﻿.
﻿
Screenshot of the Text Area editing box, including the Text Area toolbar.Screenshot of the Text Area editing box, including the Text Area toolbar.
﻿
AccordionThis is an expandable text area and is commonly used for FAQs or other long sections of information where some of it can be "hidden."
﻿
Screenshot of three Accordions. Accordion 1 is expanded to show the text, which reads, "Text for the accordion." Accordions and 3 are collapsed.Screenshot of three Accordions. Accordion 1 is expanded to show the text, which reads, "Text for the accordion." Accordions and 3 are collapsed.
﻿
When creating or editing an Accordion, you have the option to provide an "expand/collapse all" link to your page. This will allow users the ability to click one button and either expand all of the Accordions on the page or to collapse all of the Accordions on the page. Simply toggle the "Add Expand/Collapse All" slider to add the link to your page. 
﻿
Screenshot of the interface to add an Accordion. The slider for "Add Expand/Collapse All" is outlined, highlighting its location at the top of the interface.Screenshot of the interface to add an Accordion. The slider for "Add Expand/Collapse All" is outlined, highlighting its location at the top of the interface.
﻿
When the link is added, this is how your Accordions will appear on your page.
﻿
Screenshot of the appearance of three collapsed Accordions. The link option to "Expand All," which is located to the top right of the first Accordion, is outlined to highlight its placement on the page.Screenshot of the appearance of three collapsed Accordions. The link option to "Expand All," which is located to the top right of the first Accordion, is outlined to highlight its placement on the page.
﻿
Styling an AccordionAccordions can now be displayed with your choice of two style options: Default and Secondary. On your page, these will have a similar appearance to links styled as primary buttons and secondary buttons, respectively.
﻿
Screenshot of the editing interface with the Accordion component shown. There is a dropdown menu for Style that includes the options of "Default" and "Secondary."Screenshot of the editing interface with the Accordion component shown. There is a dropdown menu for Style that includes the options of "Default" and "Secondary."
﻿
The "default" style option is what you are accustomed to seeing: a dark background with white text. The background color is determined by your site's theme and color palette. A "Secondary" style option has been added, which will invert the colors: a white background with text in a color determined by your site's theme and color palette. 
﻿
All existing Accordions on your site are in the Default style. You can opt in to the Secondary style as you see fit.
﻿
Screenshot of a webpage with 2 sets of 2 Accordions. The first set use the default styling, where the first Accordion is collapsed and the second is expanded. The second set of Accordions use the secondary styling. The first Accordion is collapsed while the second is expanded.Screenshot of a webpage with 2 sets of 2 Accordions. The first set use the default styling, where the first Accordion is collapsed and the second is expanded. The second set of Accordions use the secondary styling. The first Accordion is collapsed while the second is expanded.
﻿
﻿
Examples of when to use an AccordionFAQ. This is the best usage of this type of component. Users will be able to view and also search for questions, while the answer portion will be tucked away.
Long lists or groups of items.
Resources, especially when the resources include lists of links.
Lists of award winners.
Any other instance where saving space is a priority.
Banner Image OptionsThere are 5 types of Banner Images that can be placed in the main region: Banner Image, Banner Image with Full Overlay and Text, Banner Image(s) with Partial Overlay and Text, Banner Image(s) with Text Box, and Spotlight(s). Each of these options allows you to place an image into your page, and depending on the type of Banner chosen, there will be additional formatting and styling options from which to choose. 
Banner Image (formerly "Hero (no text)")This is the most simple type of image option. It is simply a large image without any text. Only one image or video can be used in this style, and links cannot be included. The Banner Image Component appears the same on the Traditional and Colorful theme.
﻿
Example of a Banner Image. This is an image of the Main Quad at Stanford University. The photo is a panoramic view that spans the width of the main region of the page.Example of a Banner Image. This is an image of the Main Quad at Stanford University. The photo is a panoramic view that spans the width of the main region of the page.
﻿
Banner Image with Full Overlay and Text (formerly "Hero Overlay")The Full Overlay and Text Banner style includes text on a translucent colored background that completely covers an image. The color of the background can be selected from a handful of choices based on your website's theme and color palette. An optional link can be included. This style only allows one image to be used.
The formatting of this Component will depend on your website's theme. Colorful themes will have text left aligned, whereas Traditional themes display centered text.
﻿
Banner Image with Full Overlay and Text on a site with a Colorful theme.Banner Image with Full Overlay and Text on a site with a Colorful theme.
﻿
﻿
Banner Image with Full Overlay and Text on a site with a Traditional theme.Banner Image with Full Overlay and Text on a site with a Traditional theme.
﻿
Banner Image(s) with Partial Overlay and Text (formerly "Hero Gradient Slider")The Partial Overlay Banner style is a large image with optional text. It has a gradient from black to transparent that provides enough contrast for the text to be legible while allowing a large portion of the image to also remain visible. The gradient can begin from the left or the right. This Component can include a single or multiple images.
﻿
Banner Image with Partial Overlay and Text on a site with a Colorful theme. Banner Image with Partial Overlay and Text on a site with a Colorful theme. 
﻿
﻿
Banner Image with Partial Overlay and Text on a site with a Traditional theme.Banner Image with Partial Overlay and Text on a site with a Traditional theme.
﻿
Banner image(s) with Text Box (formerly "Hero (Layered) Slider")The Text Box Banner style is a large image with optional text. It has a box of text layered over a portion of the image. The text overlay box can be shown in a handful of colors, which are determined by your theme and color palette. This style of Banner Image can have a single or multiple images.
﻿
Banner Image(s) with Text Box on a Colorful Theme.Banner Image(s) with Text Box on a Colorful Theme.
﻿
﻿
Banner Image(s) with Text Box on a Traditional Theme.Banner Image(s) with Text Box on a Traditional Theme.
﻿
Spotlight(s) (formerly "Spotlight - Slider")The Spotlight(s) Banner style includes text and an image or images in a colored box. Spotlights can be tall or short and their image(s) can be right or left aligned. They can also include a link, which appears as a secondary button. The background will either be the default that is determined by your site's theme and color palette, or gray. This style of Banner Image can have a single or multiple images.
Tall Spotlight(s)﻿
Tall Spotlight with multiple images on a Colorful site.Tall Spotlight with multiple images on a Colorful site.
﻿
﻿
Short Spotlight(s)﻿
Short Spotlight with one image on a Traditional site.Short Spotlight with one image on a Traditional site.
﻿
Callout Box A Callout Box is a small block of content that is placed in its own area to the side of other text. In that aside, you can add styled text, a quote, splash or lead font, images, and more. It's flexible and it has all the options of a text editor plus the option to choose whether the box should be displayed on the right or the left of the main content region. Multiple callout boxes and text areas can be stacked. 
﻿
For styling, choose a background color: "light" adds a defined grey area around the Callout Box, while "None" keeps the background color the same as the rest of the page.
When formatting a flexible page, a Callout Box MUST be followed by a Text Area, or else it will not work. 
﻿
Screenshot of a Callout Box on a webpage. It is oriented to the right side of the page, and Lorem Ipsum text is wrapped from the left.Screenshot of a Callout Box on a webpage. It is oriented to the right side of the page, and Lorem Ipsum text is wrapped from the left.
﻿
Callout boxes are a great way to break up long areas of text, as well as highlight important information. 
Collection This is a container for components that allows them to be displayed side by side. It is especially useful for postcards to display as a grid, or to allow your page to be broken into two (or more) columns. The styling options include:
Number of items per row (1-4)
Adding a background color (limited width will provide a gray background on just that section of the collection; full width provides the gray background color across the entire width of the page, provided there is no navigation bar on the side; none keeps the background white to match the rest of the page)
Raised cards to give a bit of texture to the Components within the Collection
More information about setting up a collection can be found in our detailed  ⁠﻿⁠Collection Guide⁠ ﻿ and examples of Collections can be found on our  Colorful  and  Traditional  Reference Pages.
Color BandColor Bands are section heading text (heading 2) with a color background. They can contain up to 3 elements: 
Title. This will be rendered as a Heading 2 and can contain up to 105 characters including spaces. 
Additional Text (optional). If you wish to add another line of text below the title, you can do so in this field. It is limited to 180 characters which will display as normal text.
Link (optional). Links can be included and will be styled according to your website's theme. Be sure to include descriptive link text.
﻿
Screenshot of 3 different iterations of Color Bands. The first includes a title, additional text, and link on a gray background. The second provides an example of a color band with only a title and link on a gray background. The third is a color band with title and additional text on a cardinal background.Screenshot of 3 different iterations of Color Bands. The first includes a title, additional text, and link on a gray background. The second provides an example of a color band with only a title and link on a gray background. The third is a color band with title and additional text on a cardinal background.
﻿
﻿
Additional styling options are available for Color Bands. You may select from one of 4 color choices: Cardinal Red, Dark Gray, Light, and a Default color which is determined by the theme and color palette of your site. If there is no navigation menu on the side of the page, Color Bands can span the entire width of the page (full-width), or they can just span the typical section of the page (limited-width).
﻿
Four examples of Color Bands are shown to demonstrate the color options available. Each option contains only a title. The bands are shown in the default color, cardinal, gray, and light, respectively.Four examples of Color Bands are shown to demonstrate the color options available. Each option contains only a title. The bands are shown in the default color, cardinal, gray, and light, respectively.
﻿
﻿
Photo AlbumPhoto Albums are great for event photos. They include a headline and description and can contain up to 60 images. An optional link can be included at the bottom of the Album. When Photo Albums are used for event photos, it is useful to include a link to the album from your Events page. 
﻿
There are two layout options for Photo Albums:
Photo Album - Grid optionA Photo Grid displays all of the album's images on the page, in a grid format..  
﻿
Add a caption...
﻿
Photo Album - Slider optionA Slideshow displays one image at a time and users can click to advance to the next.
﻿
Add a caption...
﻿
Postcard There are three options from which you can choose within this Component: Vertical; Horizontal; Vertical Linked. While all can have an image, text, and link, they don't need to include all of these fields.
﻿
Screenshot providing examples of a vertical card, horizontal card, and vertical linked card, respectively.Screenshot providing examples of a vertical card, horizontal card, and vertical linked card, respectively.
﻿
﻿
Card styling will change based on the theme and color pairing. To see all the ways you can format and style your Postcards using your site's color palette, check out the  Colorful Theme reference site  or  Traditional Theme reference site .
Postcards can be added to your page individually, or they can be added as part of a Collection. For instance, the image above displays 3 Postcards, one of each type, laid out in a Collection. Additional information can be found in our  ⁠﻿⁠Collection Guide⁠ ﻿. 
TestimonialThis is a fancy quote style with a place to include the quoted person's name and position, as well as (optionally) an image and a link to more. 
﻿
Screenshot of a Testimonial component. The quote is formatted above the quoted person's name and title. A link is included for additional information.Screenshot of a Testimonial component. The quote is formatted above the quoted person's name and title. A link is included for additional information.
﻿
﻿
Vertical Timeline This Component presents information in a step-by-step list format. It is a great visual aid for laying out multi-step processes. Each step or item will have a title, plus an optional subtitle and body content. When creating or editing a Vertical Timeline, you have the option to set it up such that all of the text is either expanded or collapsed. 
﻿
Screenshot showing a Vertical Timeline. There are 9 items in the timeline, 2 of which are expanded and the remainder are shown collapsed.Screenshot showing a Vertical Timeline. There are 9 items in the timeline, 2 of which are expanded and the remainder are shown collapsed.
﻿
 
If your Vertical Timeline should have a title that displays as a Heading 2, fill in the Timeline Title at the top of the box. 
﻿
Complete the Timeline by adding information in the Timeline Item area. The item title is required and will be displayed on your webpage. An optional subheading can be added, which will be displayed in italics. Additional text can be added to the Body section. 
﻿
Screenshot of the module to add a Vertical Timeline. Three Timeline Items have been added, and the third is expanded to show the Body text box.Screenshot of the module to add a Vertical Timeline. Three Timeline Items have been added, and the third is expanded to show the Body text box.
﻿
﻿
To add additional Timeline Items, click the button to "Add Timeline Item." Repeat as needed.
﻿
Screenshot showing the button to "Add Timeline Item" as well as the slider to "Collapse by default."Screenshot showing the button to "Add Timeline Item" as well as the slider to "Collapse by default."
﻿
﻿
Vertical Timelines can be displayed in their expanded or collapsed state. A timeline will default to the expanded view. To change this, simply click the slider to toggle the option for "Collapse by default." When this option is selected, only the Timeline Title and each Item Title and Subheading will be shown. The body will be hidden and users will view it by clicking the triangle button to the side.
 
Developers' Catalog (formerly called View) This is a Component that the web team will place them for you. Examples of Developer's Catalogues include your People, Events, News, and Courses pages. 
﻿
Video Tutorial﻿
https://youtu.be/vlapRoM5thU?si=KwhX_S2nIxirjZLr
Video Tutorial explaining how to use Components within a Flexible Page.Video Tutorial explaining how to use Components within a Flexible Page.
﻿
﻿