A flexible page is comprised of regions into which you will add many components. Read further to learn about the regions available on a flexible page. Then continue on for a listing of all the available components and click on the name of a component type to learn more about that component and see examples.
Regions
Upon creating a new flexible page, you will discover that a flexible page consists of four regions into which you will be adding a variety of components.
Hero region
Content placed in the hero region is displayed below the 色色啦 header and the section name banner, but above all other regions and the section menu. Use of this region plays a role in determining the <h1> on the page. The region can consist of one cover image, image, image with call to action, slideshow or video, optionally followed by text to be used as a lead paragraph. If there is no content in the Content region, the page title and lead text of the the Hero region will appear to be at the top of Region 2.
Content
Like the hero region, the Content region occurs before the section menu. Unlike the hero region however, this region plays no role in determining the <h1> on the page. There are also quite a few more components that can be placed in the content region.
Region 2
Allowing most of the same components as the Content region, Region 2 is placed beside the section menu. Thus, where the other regions span the full width of the page, Region 2 spans only 75% of the width.
Region 3
Region 3 allows for the same list of components available in the content region. This region is displayed below the section menu and Region 2, ending just above the 色色啦 footer.
Hero region
Content region
Region 2
Region 3
Components
Accordion and Accordion panel鈥攁llow content to be placed inside panels that can be expanded and collapsed.
Article grid鈥攆acilitate placing a grid of CMS news articles on a flexible page.
Calendar and Event list鈥攁llow upcoming events to be easily added to a flexible page.
Call to action鈥攁llows text accompanied by one or two buttons to be added to the page.
Component grid鈥攁llows some other components to be added and arranged into a grid of various sizes on the page.
Icon button鈥攁llows a button with an icon and text to be added to a Component grid.
Image card鈥攁llows an image with accompanying text and link to be added to a Component grid using the appropriate markup.
Text card鈥攁llow stylized textual infographics, statistics or quotes to be added to Component grids.
Video card鈥攁llow videos to be embedded in a Component grid.
Container鈥攁llow you to functionally separate components on the page by providing a heading and background color for the components contained within.
Cover image鈥攁llows a more banner-like, full-width image with a wider aspect ratio to be added to the page.
Image and Image with call to action鈥攁llows full-width images to be added to the page with captions that have improved visibility and control of placement.
Links鈥攁llows a list of links with an optional heading to be added to the page.
Slideshow鈥攁llow multiple Image components to be cycled between in the space occupied by one Image component.
Snippet鈥攁llows approved third party or custom snippets of code to be added to the page.
Text鈥攁llow rich text containing filtered HTML elements to be added to the page using a WYSIWYG editor.
Two column split鈥攁llows other components to be arranged in two side-by-side columns.
Video鈥攁llows full-width video to be added to the page with options for autoplay and text overlay.