nested layout

List element nested in Layout

Drive business and IT collaboration

with nimble Fusion Team development

Develop intelligent workflows fast by combining business expertise with development prowess.

  • Capture objectives with built-in design thinking
  • Quickly build and deploy minimal lovable products
  • Enable users to make immediate workflow adjustments

Discover App Studio

Automate powerful workflows in a no-code environment that centralizes user experience.

Alt text.

A layout nested in a layout

Drive business and IT collaboration

with nimble Fusion Team development

Develop intelligent workflows fast by combining business expertise with development prowess.

  • Capture objectives with built-in design thinking
  • Quickly build and deploy minimal lovable products
  • Enable users to make immediate workflow adjustments

Discover App Studio

Automate powerful workflows in a no-code environment that centralizes user experience.

Alt text. Learn how our low-code platform delivers 598% ROI Alt text.

full bleed layout

Twig Usage
Alt text.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio consequuntur ipsam consectetur at, quod optio! Neque quo eligendi itaque enim non fugiat odit suscipit qui voluptatum accusantium provident, quis voluptates.

Alt text.
HTML Usage Alt text.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio consequuntur ipsam consectetur at, quod optio! Neque quo eligendi itaque enim non fugiat odit suscipit qui voluptatum accusantium provident, quis voluptates.

Alt text.

layout display none

Fourths Layout Template. There are four items here. The fourth item has an additional class, u-bolt-hidden@medium.

First Item - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Second Item - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Third Item - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Fourth Item (hidden@medium) - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tiles Layout Template. There are four items here. The fourth item has an additional class, u-bolt-hidden@medium.

First Item - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Second Item - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Third Item - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Fourth Item (hidden@medium) - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Fourths Layout Template. There are four items here. The third item has an additional class, u-bolt-hidden@medium.

First Item - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Second Item - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Third Item (hidden@medium) - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Fourth Item - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

25/75 Layout Template. There are two items here. The second item has an additional class, u-bolt-hidden@medium.

First Item - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Second Item (hidden@medium) - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

25/75 Layout Template. There are two items here. The first item has an additional class, u-bolt-hidden@medium.

First Item - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Second Item (hidden@medium) - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

layout item order and reset

Make first item last on the breakpoint larger than small and then reset layout to default on medium breakpoint, HTML usage.

Layout item (this will come last once the viewport is larger than the small breakpoint and first again on larger than medium breakpoint due to the reset@from-medium rule)
Layout item
Layout item

Make first item last on the breakpoint larger than small and then reset layout to default on medium breakpoint, TWIG usage.

Layout item (this will come last once the viewport is larger than the small breakpoint and first again on larger than medium breakpoint due to the reset@from-medium rule)
Layout item
Layout item

Use case scenario - one of the element has reseted order, the anotehr hasn't.

Layout item (this will come last once the viewport is larger than the small breakpoint)
Layout item
Layout item
Layout item (this will come first once the viewport is larger than the small breakpoint and try to return to the default order defined by HTML structure when the breakpoint is larger than medium due to the reset@from-medium rule. If this layout item is originally the last one in the HTML structure but another layout item has not been reset and is defined as the last one for example last@from-small, therefore this layout item will not be able to return to its original position defined by the HTML structure but will be the penultimate one.)

nested layout valign items

Nested layout with valign-items="center" option. According to the CSS comment - nested layout has reset all defaults. Everything stays the same except for padding getting zeroed out.

Bolt layout item ISN'T vertically centerd, because lives in nested layout, where options are reset.
Tall item (The height of the layout items will not match. Some more text to make this taller. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur natus dolore recusandae incidunt odio quasi reiciendis fugiat nihil quod? Assumenda culpa, cupiditate debitis ipsum excepturi tempora similique eum saepe! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur natus dolore recusandae incidunt odio quasi reiciendis fugiat nihil quod? Assumenda culpa, cupiditate debitis ipsum excepturi tempora similique eum saepe!)
Bolt layout item is vertically centerd, because lives in first level layout with valign-items="center" option.

layout valign self

padding-top=none, padding-bottom=none and image wrapper with valign-self="end-offset" prop.

 Ready to crush complexity? Delight customers and get work done in a fast-changing world. Explore our technology Woman in a business suit glancing to her right

padding-top=small, padding-bottom=small and image wrapper with valign-self="end-offset" prop.

 Ready to crush complexity? Delight customers and get work done in a fast-changing world. Explore our technology Woman in a business suit glancing to her right

padding-top=medium, padding-bottom=medium and image wrapper with valign-self="end-offset" prop.

 Ready to crush complexity? Delight customers and get work done in a fast-changing world. Explore our technology Woman in a business suit glancing to her right

padding-top=large, padding-bottom=large and image wrapper with valign-self="end-offset" prop.

 Ready to crush complexity? Delight customers and get work done in a fast-changing world. Explore our technology Woman in a business suit glancing to her right

padding-top=xlarge, padding-bottom=xlarge and image wrapper with valign-self="end-offset" prop.

 Ready to crush complexity? Delight customers and get work done in a fast-changing world. Explore our technology Woman in a business suit glancing to her right

layout card variant

Layout with Card Display

The following classes are present on this "card"

  • t-bolt-white
  • u-bolt-padding-medium
  • u-bolt-shadow-level-20
  • u-bolt-border-radius-large

Second Item - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

The following classes are present on this "card"

  • t-bolt-white
  • u-bolt-padding-medium
  • u-bolt-shadow-level-20
  • u-bolt-border-radius-large
 Alt text.

The following classes are present on this "card"

  • t-bolt-white
  • u-bolt-padding-none
  • u-bolt-shadow-level-20
  • u-bolt-border-radius-large

The following inline styles are applied to this "card"

  • overflow: hidden;

layout mask test

Build for whatever
comes next — right now

Our low-code platform frees the world's
leading organizations to adapt to change.

Learn how Pega’s low code platform for AI-powered decisioning and workflow automation lets you:

 Image alt text

Maximize value

Handle anything, fast, with automation and AI.
 Image alt text

Maximize value

Handle anything, fast, with automation and AI.
 Image alt text

Maximize value

Handle anything, fast, with automation and AI.

The best of Pega, curated for you

Recommended for you

Trending now

Image alt text

AI is now for everyone with Pega Infinity 8.8

Build and manage better workflows and more valuable interactions with enterprise-grade intelligence.

platform
Image alt text

AI is now for everyone with Pega Infinity 8.8

Build and manage better workflows and more valuable interactions with enterprise-grade intelligence.

platform
Image alt text

AI is now for everyone with Pega Infinity 8.8

Build and manage better workflows and more valuable interactions with enterprise-grade intelligence.

platform
Browse our collection Image alt text

featured success story

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.

Michelangelo di Lodovico Buonarroti Simoni
Renaissance Artist
Client Success 03:37

Meet our industry-leading clients

 Image alt text Image alt text Image alt text Image alt text Image alt text

A history of
AI innovation

Over 40 years ago, Alan Trefler developed some of the first AI agents capable of playing chess at an elite level.

He applied the same principles to tech and business to unlock radical agility as never before.

Built for speed and scale

Pega simplifies your technology from the center out, one customer journey at a time.
 Image alt text

Ready to connect?