Toggle Menu
Visual Styles
Color
Color
Color System
Color Tokens
Theming System
Text Color Utilities
Spacing
Spacing
Spacing System
Spacing Tokens
Spacing Utilities
Typography
Typography
Typography System
Typography Tokens
Breakpoints
Breakpoints
Breakpoint System
Information Density
Information Density
Information Density System
Comfortable Density
Regular Density
Compact Density
More Utilities
More Utilities
Bare List
Clearfix
Displays
Flex
Height
Opacity
Shadow
Text Align
Text Decoration
Visually Hidden
Z Index
View All Visual Styles
Elements
Article
Article
Article
Button
Button
Button
Button Link
Button Attributes
Button With Icon
Button With Icon Only
Button Hierarchy
Button Size
Button Border Radius
Button Display
Button Upload
Icon
Icon
Icon
Icon Size
Icon Color
Icon Use Case Custom Svg
Icon Javascript Usage
Image
Image
Image
Image Srcset And Sizes
Image Fill
Image Background
Image Use Case Background Fit And Position
Image Use Case Art Direction
Printable
Printable
Printable
Ratio
Ratio
Ratio
Ratio Video
Ratio Use Case Fit And Position
Shape
Shape
Shape
Shape Border Radius
Shape Size
Shape Theming
Table
Table
Table Examples
Table
Table Caption
Table Top Header
Table Side Header
Table Top Side Headers
Table Headers Footers
Table Borderless
Table Format Variations
Table Full Width
Table Sticky Headers
Table Column Fixed Width
Table Fixed Width Table
Table Custom Column Width
Text Link
Text Link
Text Link
Text Link Button
Text Link Attributes
Text Link With Icon
Text Link Reversed Underline
Text Link Expand Click Target
Type
Type
Type
Type Tag
Type Size
Type Hierarchy
Type With Icon
Type Headline Links
Type Use Case Numbered Headlines
Wrapper
Wrapper
Wrapper
Wrapper Use Case Custom Max Width
View All Elements
Layouts
Holy Grail
Holy Grail
Holy Grail
Holy Grail Use Case Navigation
Layout
Layout
Layout
Layout Template
Layout Sub Template
Layout Background And Theme
Layout Gutter
Layout Padding
Layout Horizontal Alignment
Layout Vertical Alignment
Layout Item Vertical Alignment
Layout Item Order
Layout Use Case About Hero
Layout Use Case Artificial Intelligence Hero
Layout Use Case Center Out Hero
Layout Use Case Customer Lifetime Value Hero
Layout Use Case German Homepage Hero
Layout Use Case Homepage Hero
Layout Use Case Infinity Hero
Layout Use Case Locations France Hero
Layout Use Case Platform Hero
Layout Use Case Old Homepage
Site
Site
Site
View All Layouts
Components
Accordion
Accordion
Accordion
Accordion Single Variations
Accordion Separator Variations
Accordion Box Shadow Variations
Accordion Spacing Variations
Accordion Icon Valign Variations
Accordion Inactive Variations
Accordion Theme Variations
Accordion Content Variations
Accordion Deep Linking
Accordion Deep Linking With Scroll Offset
Accordion Trigger And Content Spacing Variations
Accordion Web Component
Action Blocks
Action Blocks
Action Blocks
Action Blocks Valign Variations
Action Blocks Borderless Variations
Action Blocks Theme Variations
Action Blocks Max Items Per Row
Action Blocks Spacing Variations
Action Blocks Freeform Content
Background
Background
Background
Background Opacity Variations
Background Focal Variations
Background Shapes Variations
Background Fill Variations
Background Valign Variations
Backgrounds Shapes
Backgrounds Shapes
Background Shapes
Background Shapes Shapegroup Variation
Band
Band
Band
Band Size Variations
Band Theme Variations
Band Tag Variations
Band Full Bleed Variations
Band With Pinned Content
Band With Background
Band Nested
Band Flag
Band Feature
Band Collection
Banner
Banner
Banner
Banner Status Variations
Banner Align Variations
Banner Use Case Links
Banner With Web Component
Blockquote
Blockquote
Blockquote
Blockquote AlignItems Variation
Blockquote Indent Variation
Blockquote Border Variation
Blockquote Full Bleed Variation
Blockquote Quote Variation
Blockquote Multiple Paragraphs Variation
Blockquote Language Specific Quotation Marks
Blockquote Theme Variation
Blockquote Weight Variation
Blockquote Size Variation
Blockquote Web Component
Breadcrumb
Breadcrumb
Breadcrumb
Breadcrumb Use Case Popover
Breadcrumb Use Case Band
Button (Deprecated)
Button (Deprecated)
Button
Button Size Variations
Button Hierarchy Variations
Button Theme Variations
Button Width Variations
Button Border Radius Variations
Button Align Variations
Button Transform Variations
Button Type Variations
Button With Text And Icon
Button Icon Only
Button With Web Component
Button Group (Deprecated)
Button Group (Deprecated)
Button Group
Button Group Icon Only
Button Group Quantity Variations
Card
Card
Card - Basic Example
Card - Horizontal
Card - Internal & External Actions
Card - With Two Actions
Card - Theme Colors
Card - Height Options
Card - Whole Card Clickability
Card - Video Example
Card - Freeform Content
Card - With Text Group Content
Card - Border Radius
Card - Spacing
Card - Web Component Usage
Carousel
Carousel
Carousel
Carousel Nav Button Position Variations
Carousel Slides Per View Variations
Carousel Autoplay Variations
Carousel Basic Variations
Carousel Advanced Variations
Carousel With Web Component
Chip
Chip
Chip
Chip Url Variations
Chip Size Variations
Chip Border Radius Variations
Chip Icon Variations
Chip Color Variations
Chips List
Chips List
Chip List
Chip List Size
Chip List Truncate
Chip List Collapsible
Code Snippet
Code Snippet
Code Snippet
Code Snippet Language
Code Snippet Mode
Code Snippet Custom Language Label
Code Snippet Header Display
Content Pagination
Content Pagination
Content Pagination
Copy To Clipboard
Copy To Clipboard
Copy To Clipboard
Copy To Clipboard Multiple Instances
Copy To Clipboard Custom Content
Device Viewer
Device Viewer
Device Viewer
Device Viewer Ipad Variation
Device Viewer Iphone8 Variation
Device Viewer Macbook Variation
Device Viewer Video
Device Viewer Content Magnifier Modal
Dialog
Dialog
Dialog
Dialog Width
Dialog Spacing
Dialog Persistent
Dialog Transparent
Dialog Themes
Dialog Use Case Image
Dialog Use Case Video
Dialog Use Case Form
Dialog Use Case Layouts
Figure
Figure
Figure
Figure Media Variations
Figure With Web Component
Floating Action Buttons
Floating Action Buttons
Demo: Basic FAB
Demo: Show On Scroll Selector
Demo: Toggle Button
Demo: X And Y Offsets
Basic FAB
Show On Scroll Selector
Toggle Button
X And Y Offsets
Footer
Form
Form
Demo: Multi-column Form
Form Element Input Field
Form Label Display
Form Fieldset
Form Radios And Checkboxes
Form Select
Form Textarea
Form Input Auto Format
Form Search
Form Use Case Campaign Landing
Form Use Case Inline Inputs
Form Use Case Multiple Columns
Grid
Grid
Grid
Grid Start And Span
Grid Gutter Variations
Grid Row Gutter Variations
Grid Item Column Span Variations
Grid Item Row Span Variations
Grid Item Responsive Breakpoints
Grid Item Align Variations
Grid Item Valign Variations
Grid Traditional Columns And Rows
Headline
Headline
Headline
Headline Tag Variations
Headline Align Variations
Headline Style And Weight Variations
Headline Icon Variations
Headline Link Variations
Headline Quoted Variation
Headline Numbered
Hero (Deprecated)
Hero (Deprecated)
Hero
Hero Reverse Order
Hero Reverse Order No Image
Hero Image Min Width
Hero Image Align Right
Hero Image Valign Top
Hero Image Valign Bottom
Hero Bg Valign
Icon (Deprecated)
Icon (Deprecated)
Icon
Icon Size Variation
Icon Theme Variation
Icon Color Variation
Icon Adding Custom Icons
Icon Custom Colors
Icon Name Variations
Icon Pega Branding
Icon With Web Component
Image (Deprecated)
Image (Deprecated)
Image
Image Size Variations
Image Source Variations
Image Lazyload Variations
Image Custom Width Height Variations
Image With Web Components
Info Section
Info Section
Info Section
Link (Deprecated)
Link (Deprecated)
Link
Link Display Variations
Link Icon Variations
Link Valign Variations
Link Theme Variations
Link With Button Element
Link With Web Component
Link With Web Component Html Attributes
List
List
List
List Item Variations
List Display Variations
List Spacing Variations
List Separator Variations
List Inset Variations
List Regular Vs Inset Spacing
List Align Variations
List Valign Variations
List Tag Variations
List Nowrap Variations
List With Web Component
Listing Teaser
Listing Teaser
Listing Teaser
Listing Teaser Signifier
Listing Teaser Headline
Listing Teaser Status And Action
Listing Teaser Meta Data And More
Listing Teaser Reply
Listing Teaser Variant
Listing Teaser Callout
Listing Teaser Layout
Listing Teaser Use Case Academy
Listing Teaser Use Case Collaboration Center
Listing Teaser Use Case Article List
Listing Teaser Use Case Search Result List
Listing Teaser Use Case Contact List
Logo (Deprecated)
Logo (Deprecated)
Logo
Logo Invert Variation
Menu
Menu
Menu
Menu Title Variations
Menu Spacing Variations
Menu Use Case Button Link Items
Menu Use Case Icons
Menu Use Case Popover
Menu Use Case Theming
Modal
Modal
Modal
Modal Width Variations
Modal Spacing Variations
Modal Theme Variations
Modal Scroll Variations
Modal Trigger Variations
Modal Usage Javascript
Modal Usage Image And Caption
Modal Usage Video
Modal Usage Content
Modal Usage Persistent
Modal Usage Form
Modal With Web Component
Navbar
Navbar
Navbar Use Case Multiple
Navbar Use Case Scroll Offset
Navbar Use Case Sticky Offset
Navbar
Navbar Spacing
Navbar Center
Navbar Width
Navbar Static
Navbar Theme
Navbar Hide Title Text
Navbar Scroll Offset
Navbar Sticky Offset
Navbar Multiple
Navbar Custom Content
Notifications
Notifications
Notifications
Notifications Empty State
Ordered List
Ordered List
Ol
Ol Theme Variation
Ol Nested Items
Ol With Web Component
Page Footer
Page Footer
Page Footer
Page Header
Page Header
Demo: Academy
Demo: Collaboration Center
Demo: Community
Demo: Documentation
Demo: Pega (logged Out)
Demo: Pega
Demo: Partners
Demo: PegaWorld
Demo: SalesHub
Page Header
Pagination
Pagination
Pagination
Pagination Theme Variations
Pagination Count Variations
Pagination Align Variations
Placeholder
Placeholder
Placeholder
Placeholder Animated Variations
Placeholder Sizes Variations
Popover
Popover
Popover
Popover Placement Variations
Popover Spacing Variations
Popover Use Case Menu
Popover Use Case Custom Width
Popover Theme Variations
Popover Trigger Event Variations
Profile
Profile
Profile
Profile Full Bleed
Profile Avatar Edit Button
Progress Bar
Progress Bar
Progress Bar Basic Usage
Progress Bar Value Format
Progress Bar Max
Progress Bar Animated
Progress Bar Theming
Progress Bar In Toolbar
Progress Bar Use Case Stepper
Progress Bar Use Case Loading Animation
Progress Bar With Web Component
Ratio (Deprecated)
Ratio (Deprecated)
Ratio No Shadow No Css Vars
Ratio No Shadow
Ratio 1x1
Ratio 21x9 Web Component
Ratio 4x3
Ratio 8x1 Web Component Legacy
Ratio
Search Filter
Share
Share
Share
Share Size Variations
Share Display Variations
Share Opacity Variations
Share Align Variations
Share Theme Variations
Share Use Case Custom Title
Side Nav
Side Nav
Side Nav
Stack
Stack
Stack
Stack Spacing Variations
Sticky
Sticky
Sticky Simple Example
Switch Button
Switch Button
Switch Button
Table
Table
Table
Table Format Variations
Table Borderless
Table First Column Fixed Width
Table Cell Attributes
Table Theme Variations
Table Item Variations
Table Caption
Table With Web Component
Tabs
Tabs
Tabs
Tabs Inset
Tabs Label And Content Spacing
Tabs Align
Tabs Theme
Tabs Content
Tabs Selected Tab
Tabs Use Case Tabbed Band
Tabs Deep Linking
Tabs Deep Linking With Scroll Offset
Tabs Web Component
Teaser
Teaser
Teaser
Teaser Layout And Variant
Teaser Gutter
Teaser Chips
Teaser Time
Teaser Status And Actions
Teaser Text Options
Teaser Description On Hover
Teaser Video Modal
Text
Text
Text
Text Typographic Recipes
Text Tag Variations
Text Display Variations
Text Color Variations
Text Align Variations
Text Opacity Variations
Text Quoted
Text Line Height Variations
Text Letter Spacing Variations
Text Transform Variations
Text Font Family Variations
Text Font Size Variations
Text Font Style Variations
Text Font Weight Variations
Table Of Contents
Table Of Contents
Toc
Toc Item Active Variations
Toc Header Variations
Toc Variants Variations
Toc Use Case Sticky
Tooltip
Tooltip
Tooltip
Tooltip Placement Variations
Tooltip Inverted
Tooltip Use Case Button And Link
Tooltip Use Case Icon
Tooltip With Web Component
Trigger
Trigger
Trigger
Trigger Tag Variations
Trigger Cursor Variations
Trigger Display Variations
Trigger Outline Variations
Trigger Disabled Variations
Trigger Advanced Usage
Trigger With Web Component
Typeahead
Typeahead
Typeahead Dynamically Fetch Data
Typeahead Navigate To Exact Result
Typeahead Navigate To Search Results
Unordered List
Unordered List
Ul
Ul Theme Variation
Ul Nested Items
Ul With Web Component
Video Thumbnail
Video Thumbnail
Video Thumbnail
Video Thumbnail Aspect Ratio
Video Thumbnail Border Radius
Video Thumbnail Title Chips And Subtitles
Video Thumbnail Use Case Modal
Video Thumbnail Use Case Inline
Video Thumbnail External Link
Status Board
View All Components
Pages
Best Of Content
Best Of Content
Homepage
Gallery
PegaWorld Replays
Customers
Component - Quick Filters
Community
Community
Community Doc Layout
Community Doc Search Layout
Community Search Layout
Optimized Campaign Landing
Optimized Campaign Landing
Gated (PDF)
Gated (External Link)
Gated (Video)
Ungated (PDF And External Links)
Ungated (Video)
Portal
Portal
Portal Quick Links
User
User
User Notification Settings
User Notification Tag Manager 1
User Notification Tag Manager 2
User Notification Tag Manager 3
User Notification Tag Manager 4
User Profile Edit
User Profile Empty State
User Profile
User Sign Up
Bolt Dev Sandbox
Bolt Dev Sandbox
Ckeditor 5
Ckeditor 4
Wysiwyg Kitchen Sink
View All Pages
Experiments
Animate
Animate
Animate
Animate Build Stages
Editor
Editor
Editor Simple
Editor Blockquote
Editor Modal
Editor With Two Character Layout
Drupal Integration
Micro Journeys
Micro Journeys
Character
Character Kitchen Sink
Connection
Status Dialogue Bar
Status Dialogue Bar Kitchen Sink
Icon Group
Micro Journeys Solo
Micro Journeys
Micro Journeys Intersection Observer
Micro Journeys Single Step With Two Character Layout
Step 1 Demo
Step 2 Demo
Step 3 Demo
Step 4 Demo
Step 5 Demo
Micro Journey In Themes
In Page Example
Demo Links
Svg Animations
Svg Animations
Svg Animations
View All Experiments
Archive
Academy
Academy
Page - Completed Training
Page - Dashboard (My Favorite Training)
Page - Dashboard (My Missions)
Page - Dashboard (Add Mission)
Page - Dashboard
Page - Search Results (Archived)
Page - Search Results (Filtered)
Page - Search Results
Page - T1 Landing - Certification Exam
Page - T1 Landing - Mission Test W/ Modal (Before Submit)
Page - T1 Landing - Mission Test W/ Modal (After Submit)
Page - T1 Landing - Mission Test (H5P Example)
Page - T1 Landing - Mission Test
Page - T1 Landing - Mission Landing (Hide Completed)
Page - T1 Landing - Mission Landing
Page - T1 Landing - Module Landing
Page - T2 Details - Challenge
Page - T2 Details - Topic
Agenda Manager
Agenda Manager
Agenda Manager Details
Agenda Manager Details Aflac
Agenda Manager Details Alan Keynote
Blog
Blog
Blog Homepage
Blog Post
Calculator
Calculator
Calculator
Results
Careers
Careers
Careers Homepage
Content Hub
Content Hub
Sticky Navbar
Events
Events
Event Detail
Event Form Example
Event Landing
Homepage
Homepage
Homepage Japanese
Homepage
Partners
Partners
Partners Search
Press And Media
Press And Media
Browse Page
Browse Page Media
Browse Page Press
Details Page Press
News Landing
Product Pages
Product Pages
Product Landing
Product T2
Product T4
Resource Details Pages
Resource Details Pages
Resource Details Page
Resource Details Page Extra Long Title
Resource Details Page Long Title
Resource Details Page Short Title
View All Archive
Tests
Accordion
Accordion
Accordion No Shadow
Accordion In Band
Animations
Animations
Banner Test Fade Ins
Gallery Test Fade Ins
Icon Test Fade Ins
Image Test Fade Ins Cascade
Image Test Fade Ins No Cascade
Nested Animations Cascade
Nested Animations No Cascade
Video Test Bounce Ins
Banner
Banner
Banner Themes
Button
Button
Button Without States
Card
Card
Card
Card Links And Buttons
Carousel
Carousel
Carousel In Layout
Chip
Chip
Chip And Icon
Code Snippet
Code Snippet
Code Snippet Languages
Code Snippet Lang None
Code Snippet Escape Html
Code Snippet Table
Dialog
Dialog
Dialog With Popover
Dialog In Relative Div
Dialog In Carousel
Dialog In Table
Dialog With Table
Dialog From Card
Form
Form
Form Search Fields
Headline
Headline
Headline Numbered
Heroes
Heroes
Basic Usage
Reverse Desktop Order
Reverse Desktop Order No Image
Image Minimum Width
Image Horizontal Alignment
Image Horizontal Alignmen Top
Image Horizontal Alignmen Bottom
Background Image Vertical Alignment
Centered Content
Video And List
Templates
Centered Form
Icon
Icon
Loop Thru All Icon Props
Element Performance Test
Component Performance Test
Image
Image
Image No Shadow
Listing Teaser
Listing Teaser
Listing Teaser
Navbar
Navbar
Navbar With Links
Navbar With Active Link
Navbar With Content
Navbar With List
Navbar No Title
Navbar Title Tags
Navbar Center
Navbar With Offsets
Optimized Campaign Landing
Optimized Campaign Landing
Oclp Page Theme 1
Oclp Page Theme 2
Oclp Page Theme 3
Oclp Page Theme 4
Oclp Page Theme 5
Oclp Page Theme 6
Popover
Popover
Popover Auto Open
Popover No Shadow
Popover Boundary
Popover Disconnected Callback
Profile
Profile
Profile Edit
Share
Share
Share
Switch Button
Switch Button
Switch Button Id
Table
Table
Table Default Html
Table Format Variations Html
Table Borderless Html
Table Only Rows Column Fixed Width Html
Table Full Width Html
Table Support Center
Table Sticky Headers
Tabs
Tabs
Tabs No Shadow
Tabs Deep Linking
Teaser
Teaser
Teaser
Teaser Video
Teaser Video Card
Tooltip
Tooltip
Tooltip No Shadow
Tooltip Boundary
Tooltip Link Whitespace
Trigger
Trigger
Trigger Card Modal
Video
Video
Video Playback Rates
Video Media
Video Captions
Video Social
Video Custom Error Message
Video Quality Options
Video Autoplay On Viewport
Video Modal
Audio Player
Video Dialog
View All Tests
All
1024px
/
64em
Resize viewport to small
Resize viewport to medium
Resize viewport to large
Resize viewport to full
Expand Panel
Switch Layout
Switch Theme
Show Archive and Test Folders
Open In New Tab
Browser Support
Pattern Lab Docs
Drag to resize Pattern Lab
Drag to resize Pattern Lab Drawer
Loading Code Panel