Page templates

Page templates are responsive layouts that have pre-defined regions and additional functionality that come together to build a full web page.

For more information on how to use the features and props for this component, check out the developer documentation.

To learn more about configuration, visit Pega Community.

There are a variety of page templates that Cosmos offers as individual components. This list represents the available template components:

  • OneColumnPage
  • TwoColumnPage
  • ThreeColumnPage
  • FourColumnPage
  • WideNarrowPage: 2 columns
  • NarrowWidePage: 2 columns
  • WideWideNarrowPage: 3 columns
  • NarrowWideWidePage: 3 columns
  • NarrowWideNarrowPage: 3 columns
  • TabbedPage: No columns. Tabs above the content region control the content to display

Each available template offers support for a page title, an icon, and an additional header. If provided an icon name, the appropriate Cosmos Icon will render alongside the title. For the use of custom icons, refer to the Icon documentation. If a path is provided, Breadcrumbs will render above the title. This is a useful visual reference of a user's navigation history within your application.

If actions are supplied to the page template, they will render inline with the page title. Any banners that are supplied will render just below the title, but above the content regions.

The DashboardPage component is a quick solution for any dashboard page complete with three content regions and a set of filters. The filters are just a region that can render above or on any side of the content regions. You can change the positioning via the filterPosition prop. We recommend you use the ComboBox component for your filters.

The CategorySubPage component is a prescribed layout ideal for sub-navigation of your application. The template is composed of a navigation sidebar that contains navItemGroups, and a region that includes a pageTitle and pageActions. The groups within the navigation include an optional title and a list of items, each with their own text and an indicator if it is active. This indicator modifies the styling of the item and should only be applied to the item that is controlling the current region. These items also have href and onClick handlers.

The CategorySubPage should include a category and an optional categoryIcon to display at the top of the navigation region. If the current view uses pageActions, these will render as Buttons inline with the pageTitle at the top of the region. The maxActions prop controls how many actions are rendered as Buttons. Any actions that exceed the max will become bundled into a MenuButton. The maxActions prop is set to 3 by default.

NameTypeDefaultDescription
a*ReactNode
tabs*TabsProps
title*string
actionsReactNode
asElementTypeHTML tag or React Component to render the component as.
bannersReactNode
classNamestringAdditional CSS classes.
forwardedAsElementTypeHTML tag or React Component to finally render the component as.
headerReactNode
iconstring
pathMenuItemProps[]
refRef<HTMLDivElement>
scrollContentboolean