Flexible Page Components

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 is primarily intended to explain how to add each component to your site, as well as format the various styling options. To see how these Components look on a page, visit our  Colorful Theme  and  Traditional Theme  Reference Pages. There you will be able to match your site's color palette and preview every style and format option for each component on your site.
Jump to:
﻿ Text Area⁠ ﻿
﻿ Accordion⁠ ﻿
﻿ Banner Image Types⁠ ﻿
﻿ Callout Box⁠ ﻿
﻿ Collection⁠ ﻿
﻿ Color Band⁠ ﻿
﻿ Curriculum Map⁠ ﻿
﻿ Photo Album⁠ ﻿
﻿ Postcard⁠ ﻿
﻿ Spotlight(s)⁠ ﻿
﻿ Testimonial⁠ ﻿
﻿ Vertical Timeline⁠ ﻿
﻿ Developers' Catalog⁠ ﻿
﻿ 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 and videos. 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⁠ .
﻿
The Text Area editing box, including the Text Area toolbar, is shown.The Text Area editing box, including the Text Area toolbar, is shown.
AccordionAccordions are expandable text areas commonly used for FAQs or other long sections of information where some of it can be "hidden."
﻿
Three Accordions. each with a different style: default, secondary, and light. The first accordion includes an Expand All button.Three Accordions. each with a different style: default, secondary, and light. The first accordion includes an Expand All button.
Formatting and Styling an AccordionOnce you add an Accordion to your page, you'll see a range of options. 
﻿
Editing interface of an Accordion component. From top to bottom, users are able to: decide whether or not an "expand/collapse all" link, which style or color the accordion should be, what the top level text should say, whether the accordion title should be formatted as a heading, and what to include in the body of the accordion. Editing interface of an Accordion component. From top to bottom, users are able to: decide whether or not an "expand/collapse all" link, which style or color the accordion should be, what the top level text should say, whether the accordion title should be formatted as a heading, and what to include in the body of the accordion. 
"Add Expand/Collapse All" ToggleFirst, you have the option to provide an "expand/collapse all" link to your page. This gives users the ability to click one button to either expand 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. 
StyleThe next option allows you to choose the color of your accordion. 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 inverts the colors: a white background with text in a color determined by your site's theme and color palette. The "Light" style option renders as a gray accordion with a colorful line along the left side. 
SummaryThis is where the title of your Accordion should be entered. The text here will always be displayed, regardless of whether the accordion is expanded or collapsed.
Summary Heading LevelHere you will decide if the title of your accordion should be formatted as a heading. You can choose between: Default - which means no heading is provided, Heading 2, or Heading 3. Generally, accordions will need a heading level. For example, if you have a Heading 2 on your page that reads "Frequently Asked Questions," the accordions that follow should each be labeled as Heading 3s.  More information about headings and why they matter.⁠  
BodyThis is where you can add additional information. When expanded, the content shown here will be shown. When collapsed, anything typed in the body of your accordion will not be shown on the page, however, it will be searchable.
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. Be sure to include headings if relevant, so that screen reader users can jump to the desired question.
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: Multiple Component TypesThere are multiple Banner Image formats:  Banner Image⁠ ,  Banner Image with Full Overlay and Text⁠ ,  Banner Image(s) with Partial Overlay and Text⁠ , and  Banner Image(s) with Text Box⁠ . 
Each of these options allows you to place an image on your page, and depending on the type of Banner chosen, there will be additional formatting and styling options from which to choose. View them in action on our sample websites:  Colorful  and  Traditional . 
Banner Images are one of the few Components that can also be added to the full-width region at the top of a web page.
Banner ImageThis 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. Banner Images have the same appearance on all sites, regardless of theme or color palette. You can format Banner Images as "tall" or "short" depending on the size and proportions of the image.  Learn how to style a Banner Image .
﻿
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 This type of Component includes a single image with a transparent overlay covering its entirety. If desired, text and/or a link can be added. Learn how to  style a Banner Image with Full Overlay and Text .
On  Colorful  sites, the text will be aligned left; on  Traditional  sites it will be centered.
﻿
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 TextThe Partial Overlay Banner style displays one or more media items with optional text and/or a link. It has a gradient overly that fades from black to transparent across the image, providing 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. Learn how to  style a Banner Image(s) with Partial Overlay and Text .
The link appearance differs slightly between the Colorful and Traditional themes. Check out all of the various styling options for this Component on our  Colorful  or  Traditional  theme reference sites. 
﻿
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 This type of Banner Component includes one or more media items that the user can scroll between. There is a partially transparent text box covering a portion of the image. If desired, a link can be added. Learn how to  style a Banner Image(s) with Text Box .
There are considerable differences in the appearance between the Colorful and Traditional themes. Check out all of the various styling options for this Component on our  Colorful  or  Traditional  theme reference sites. 
﻿
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.
Callout Box A Callout Box is a small block of content that is placed in its own area to the side of other text. It is a great way to break up long sections of text, as well as highlight important information. Multiple callout boxes and text areas can be stacked.
﻿
A Callout Box is shown on a webpage. It is oriented to the right side of the page, and Lorem Ipsum text is wrapped from the left.A Callout Box is shown on a webpage. It is oriented to the right side of the page, and Lorem Ipsum text is wrapped from the left.
When formatting a flexible page, a Callout Box MUST be followed by a Text Area, or else it will not work. 
Formatting and Styling a Callout Box﻿
Callout Box editing module. From top to bottom, the fields are: body, which includes a standard text editing toolbar, alignment, and background color. Help text is also included to remind users that callout boxes must be followed by a text area.  Callout Box editing module. From top to bottom, the fields are: body, which includes a standard text editing toolbar, alignment, and background color. Help text is also included to remind users that callout boxes must be followed by a text area.  
BodyThe body of a callout box has the same toolbar as a standard  Text Area⁠ , and includes options such as styled text, block quote, splash or lead font, images, and more. 
AlignmentChoose whether the box should appear on the right or left side of the screen. Text in the following Text Area will wrap around this box.
Background ColorYou can choose whether or not to have a background color, which renders as gray.
Collection A Collection is a container for components that allows them to be displayed side by side. It is especially useful for displaying Postcards as a grid or allowing your page to be broken into two (or more) columns. 
﻿
Editing module of a Collection. From top to bottom, the input fields are: title settings, title, items per row, background color, raised cards toggle, uniform height toggle, and a section to add components such as Postcards, Spotlights, Text Areas, and more. Editing module of a Collection. From top to bottom, the input fields are: title settings, title, items per row, background color, raised cards toggle, uniform height toggle, and a section to add components such as Postcards, Spotlights, Text Areas, and more. 
Formatting and Styling a CollectionMore 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.
Title SettingsThis field pertains to accessibility.  Learn about Collection Title Settings⁠ .
TitleDepending on your selection for Timeline Settings, the Title field may or may not appear. If it does, this field is required and should describe the collection.
Items Per RowChoose how many items should be shown horizontally across the page. This can be set to 1, 2, 3, or 4. 
Except in limited cases, we generally recommend against using 4 across because of how narrow each component will be displayed.
Background ColorChoose whether or not your collection should have a background color, and if one is desired, you can choose between default, gray, or vibrant. 
The exact color of "default" and "vibrant" are determined by your website's theme and palette. Play with them on our  Colorful  and  Traditional  Reference Sites. 
Toggle: Raised CardsSelect this option if you desire a raised look for your components.
Toggle: Uniform HeightDepending on the length of your content, the items in each row of your collection might be different heights. Choosing this option extends the bottom of each component to match the length of the longest component in that row.  
Add ComponentClick this button to add additional items into your collection.
Color BandColor Bands are section heading text (heading 2) with a color background. They can contain up to 3 elements: a title is always required, and additional text and/or a link can also be included. 
﻿
Three 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.Three 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.
﻿
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.
Formatting and Styling a Color Band﻿
The editing interface for a color band is show. From top to bottom, the fields are: title, additional text, link, background color, and width.The editing interface for a color band is show. From top to bottom, the fields are: title, additional text, link, background color, and width.
TitleThis will be rendered as a Heading 2 and can contain up to 105 characters including spaces. 
Since this is a heading, it cannot be left blank for accessibility reasons.
Additional TextThis optional field allows you to add another line of text below the title. It is limited to 180 characters which will display as normal text.
LinkLinks can be included and will be styled according to your website's theme. Be sure to include descriptive link text. This field is limited to 80 characters.
Background ColorYou 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. 
WidthIf 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). If there is a navigation menu on the page, all color bands will be displayed with limited-width.
Curriculum MapMany academic units like to include an example of how students can plan their courses and requirements. Curriculum Maps allow web editors to create these visual maps directly on the site. Additional information, including examples, can be found in the ﻿ ⁠⁠Curriculum Maps⁠  guide.
Photo AlbumPhoto Albums are great for event photos. They can 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. 
Photo Album - Grid optionA Photo Grid displays all of the album's images on the page, in a grid format.
﻿
A photo album is shown with the grid styling: all 9 photos are shown on the page in three rows of three photos. A photo album is shown with the grid styling: all 9 photos are shown on the page in three rows of three photos. 
Photo Album - Slider optionA Slideshow displays one image at a time and users can click to advance to the next.
﻿
A photo album is shown with slider styling: the bottom left corner displays that this is the first image of 12 in the album. Scroll arrows are located on the left and right borders to allow users to scroll through the rest of the album.A photo album is shown with slider styling: the bottom left corner displays that this is the first image of 12 in the album. Scroll arrows are located on the left and right borders to allow users to scroll through the rest of the album.
Formatting and Styling a Photo Album﻿
Editing interface of a Photo Album. From top to bottom, the input fields are: Text, Body, Add Media, Link, and Style.Editing interface of a Photo Album. From top to bottom, the input fields are: Text, Body, Add Media, Link, and Style.
TextThis is where you enter the title that will be displayed at the top of the album.
BodyUsing the typical text editing toolbar, style any additional text as you wish. 
ImagesHere, you can add media to your album. Up to 60 media items can be added.
LinkAn optional link can be added. If the photo album is related to an event, it can be helpful to link to that event page. As always, be sure to use descriptive link text. 
StyleThere are two layout options for Photo Albums: grid and slider. Grid shows all of the images on one page, while slider shows one image as a time, and users can scroll through them.
Postcard Postcards are a flexible way to highlight information on your page. You can customize them by adding up to four elements: one media item, a title, body text, and a link. Postcards can be added to your page individually, or they can be added as part of a Collection. Additional information can be found in our ﻿ ⁠⁠Collection Guide⁠ . 
﻿
Examples of the 4 postcard styles. The top row displays one of each of the four styles (vertical, horizontal, vertical button, and vertical linked, respectively) as they appear without the raised card look. The second row is the exact same, but with raised card styling.Examples of the 4 postcard styles. The top row displays one of each of the four styles (vertical, horizontal, vertical button, and vertical linked, respectively) as they appear without the raised card look. The second row is the exact same, but with raised card styling.
Formatting and Styling a Postcard﻿
Editing interface showing the options within the Postcard component. A media item can be added if desired. The title, body, link, and style fields follow.Editing interface showing the options within the Postcard component. A media item can be added if desired. The title, body, link, and style fields follow.
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 .
ImageOne media item can be added, if desired. 
TitleEnter a heading for your postcard, if desired.
BodyAdd additional text. Unlike the Spotlight(s) component, there are no restrictions on character count.
LinkAdd a link if relevant, and be sure to use descriptive link text. 
StyleThis is the only field that is required, and there are four options from which you can choose: Vertical; Horizontal; Vertical Linked; Vertical Button. The  examples in the image above⁠  are just one of many ways each of these styles can be formatted. 
Spotlight(s)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 and framed or expanded. They can also include a link, which appears as a secondary button. The background will either be the default color determined by your site's theme and color palette, or gray. This style of Banner Image can have a single or multiple images.
Spotlights are one of the few Components that can also be added to the full-width region at the top of a web page.
﻿
Tall Spotlight, Framed, with multiple images on a Colorful site.Tall Spotlight, Framed, with multiple images on a Colorful site.
﻿
Tall Spotlight, Expanded, with a single image on a Colorful site.Tall Spotlight, Expanded, with a single image on a Colorful site.
Formatting and Styling a Spotlight(s)Once you add a Spotlight(s), you'll see a variety of options. 
﻿
The editing interface for a Spotlight(s). From top to bottom, the input fields are: background color width, title, background color, media, media alignment, image style, image height, body, and link. At the bottom is a button to "add spotlight" which will create a carousel of images that a viewer can scroll through.The editing interface for a Spotlight(s). From top to bottom, the input fields are: background color width, title, background color, media, media alignment, image style, image height, body, and link. At the bottom is a button to "add spotlight" which will create a carousel of images that a viewer can scroll through.
Background Color WidthYou can choose if the background color of your spotlight spans the entire width of the page, or just a limited portion. 
Note: When a page is included in a menu, the full-width option will not display. 
Spotlight TitleEnter the heading text here. 
Background ColorChoose between Default and Gray. The "default" color is determined by your website's theme and color palette. To see an example, visit our reference sites -  Colorful  or  Traditional  - and select your website's palette. 
MediaMedia is optional in a Spotlight. If you wish to include media, you can select an image or video. Additional media items can be added by clicking the " Add Spotlight⁠ " button at the very bottom of this component, at which time you will make new selections for each of these fields. 
Media AlignmentYou can choose for your media item to render on the right or left side of the Spotlight. The text, if any is added, will appear on the opposite side. 
Image StyleChoose between Framed and Expanded. Framed media is positioned within the Spotlight such that it doesn't touch the edges of the background. Expanded images will more completely fill the spotlight component from top to bottom. 
Image HeightChoose Tall or Short. The height choice affects how much text can be included beside it. Tall Spotlights allow approximately 625 characters, while short allows approximately 300. Any text included beyond those limits will be cut off.
BodyThis optional field allows you to include a short amount of text. Tall Spotlights can include up to 625 characters, while short can only accommodate 300 characters. This text will be included in a smaller font size below the Spotlight Title, and to the side of the media item, if included.
LinkLinks can also be included if desired. Be descriptive but concise, and don't use "click here" or "more info." When multiple Spotlights are used, it is critical that the link text of each be unique. For example, if you are highlighting two upcoming talks, you would not want them to both read, "RSVP here." Instead, use more descriptive language, such as "RSVP to the Distinguished Lecture" and "RSVP to the Department Seminar."
Add Spotlight: An option to create a carousel of SpotlightsIf you'd like to add additional images or information to your Spotlight component, click the button to "Add Spotlight." This will create another  section where you can add information. If multiple Spotlights are created, they will be stacked in a carousel so users scroll between them. 
TestimonialThis is a fancy quote style with areas to include the quoted person's name and position. Additional information, including a media item and link can be added if desired. Users can select if the quote should be aligned above or below the speaker information.  
﻿
Screenshot of a Testimonial component, with a quote aligned at the top. Fields for name, position, and link have all been filled in as an example of how a testimonial can be styled. Screenshot of a Testimonial component, with a quote aligned at the top. Fields for name, position, and link have all been filled in as an example of how a testimonial can be styled. 
Formatting and Styling a Testimonial﻿
Editing interface showing the fields for the Testimonial component. Users can enter the quote, quote alignment, one media item, the name and position of the person being quoted, and a link. Editing interface showing the fields for the Testimonial component. Users can enter the quote, quote alignment, one media item, the name and position of the person being quoted, and a link. 
QuoteEnter the quote in this field. Quotation marks should be omitted, since they are included in the styling of this component. There is no character limit.
Quote AlignmentChoose whether the quote should appear on top of or below the speaker name and position. 
ImageTestimonials can include one media item if desired.
NameHere, you can enter the name of the speaker.
PositionThis field is flexible to allow you to enter additional information about the speaker. It could include a title, such as faculty or lecturer, or if the speaker is a student, you might include their graduation year, e.g. Class of 2026."
LinkIf relevant, one link can be added. Be sure to include descriptive link text.
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.   
﻿
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.
Formatting and Styling a Vertical Timeline﻿
The editing interface of a Vertical Timeline is shown. From top to bottom, the entry fields are: Timeline Title, Item Title, Subheading, Body, Add Timeline Item, and a toggle to Collapse by Default.The editing interface of a Vertical Timeline is shown. From top to bottom, the entry fields are: Timeline Title, Item Title, Subheading, Body, Add Timeline Item, and a toggle to Collapse by Default.
Timeline TitleIf your Vertical Timeline should have a title that displays as a Heading 2, fill in the Timeline Title at the top of the box. If a Heading 2 should not be added, this field is not required.
Timeline Item: Complete the following information for each item in your timelineItem TitleEnter a short summary of the step, process, or checklist item. This information will render on the timeline in an accent color that is determined by your website's theme and color palette. While there is no character limit, we recommend ensuring this is a brief summary or overview. This information is always visible regardless of whether the timeline is collapsed or expanded. Item Title is the only required field for each Timeline Item.
SubheadingIf additional title information should be included, it can be entered here. Text in the subheading renders in italics, and is always visible regardless of whether the timeline is collapsed or expanded.  
BodyEnter any additional relevant information. For instance, if you are creating a timeline to lay out the steps to apply for your program, and the timeline item describes a personal statement, you might add information about the required length and what to include in the statement.
Add Timeline ItemClick the Add Timeline Item button to add another item to your timeline, then repeat the steps above. You may add as many Timeline Items as needed. 
Collapse by DefaultVertical Timelines can be displayed in their expanded or collapsed state. A timeline will default to the expanded view unless the toggle is selected to 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' CatalogThis is a Component that the web team will place for you. Examples of Developer's Catalogues include your People, Events, News, and Courses blocks. 
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.
﻿