Templates

Design templates

A design template is a reusable component that includes predefined layouts and regions. Design templates are useful for having consistent layouts throughout your entire application.

Pega ships with many common design templates out of the box, and users can extend and add their own templates as well. For information on how to extend templates, reference the Pega Community.

Page templates

Used to organize overall data on a page

  • Mobile page with content and layout group

    Mobile page with content and layout group thumbnail

    Design template used for mobile pages where some content is stacked, and other content in a layout group. The layout group defaults to display as tabs.

  • Page with secondary content

    Page with secondary content thumbnail

    A layout for an entire page with a main and secondary region.

Header templates

Used to arrange metadata for the current item in the header.

  • Header with assignment

    Header with assignment thumbnail

    A header used in a container to show details about who a piece of work is assigned to. Has a title and assignment, with options for metadata.

  • Header with breadcrumbs, image, metadata, and actions

    Header with breadcrumbs, image, metadata, and actions thumbnail

    Use for a header on a page. If an image or breadcrumbs are not included, they do not reserve space in the UI.

  • Mobile page header with left and right action

    Mobile page header thumbnail

    Use for a header in a mobile view. The left action is usually “back” and the right action is usually a primary action for the screen.

Card templates

Used to arrange data for a single atomic item. These can be repeated in a repeating dynamic layout (RDL).

  • Card with image & metadata

    Card with image and metadata thumbnail

    Used for showing a stand-alone item or list item with its related data. Requires a title. Optionally includes metadata or an image.

  • Card with image & action for empty state

    Empty state thumbnail

    Shown when no results are returned in a list or container. Requires at least an image, a description or an action, but may contain all items.

  • Card with image

    Card with image thumbnail

    Used for showing a stand-alone item or list item with its related data. Optionally includes an image, displayed with a 16x9 aspect ratio.

List item templates

Used to arrange data for items in a repeating list.

  • List item with image, metadata, & actions

    List item with image, metadata and actions thumbnail

    A list item in a repeating dynamic layout that may contain actions. Requires a title. Optionally includes actions, metadata, or an image.

  • List item with image & status

    List item with images and status thumbnail

    A list item in a repeating dynamic layout that does not include actions. Requires a title. Optionally includes an image or an item’s status.

  • List item with breadcrumbs, image, metadata, and actions

    List item with image, metadata and actions thumbnail

    A list item in a repeating dynamic layout that may contain actions. Requires a title. Optionally includes actions, metadata, or an image.

Other templates

In addition to the templates for specific purposes, there are generic layout templates to assist in creating any layout needed.

  • 1, 2, 3, and 4 column
  • 1, 2, 3, and 4 column with inline wrapping
  • 30/70 and 70/30
  • Inline wrapping
  • Additional helper classes for 4, 5, 6, 8, or 12 columns

Creating new templates

You can create new templates in your application. For more information on how to do this, visit the Pega Community.

Design templates have a design system for how to create them. Read about this design system. For example, best practice is that all template names follow the common pattern of:

Expected display (Card, List Item, Header, etc.) + Optional modifiers (Centered, Disabled, etc.) + Unique data that can be included (Image, Metadata, etc.) + Optional: Expected usage (Empty state, etc.)

Last updated: Oct 2018

Next: Tooltips