The SUSE Design System uses cookies to help us learn more about how we can improve the design system.
Learn more about our cookie policy

Didn’t find the component you were looking for? Take a look on what’s coming next or contact us.
Looking for components? what’s next or contact us.


The page layout is the foundation of an application. It provides the overall structure and helps helps organise content consistently by using uniform elements.

Visit the layout demo page.

linkBasic structure

The basic structure provides sidebar, content area, footer and header.

  • The sidebar contains the elements used for main navigation.
  • Elements such as branding, submenu, account settings and search are positioned in the header.
  • The content area represents the canvas of the application, and it holds the content of each page.
  • The footer is an additional navigation element and can contain links, company or copyright information, etc.
Layout structure image

linkFluid page layout

The fluid page layout is the default layout in SUSE. It provides the right screen real estate for content by allowing it to stretch and contract relative to the screen size.

linkContent area

The main container has a maximum width of 1116px. When the screen size is greater than the container's maximum width, the margin:auto property is used to center it. Margins and paddings are used to create space around elements. Margins are used for space between elements while paddings are used for space within an element. The default padding is a fixed value and it is 32px.

Image depicting layout with content area and padding


EOS uses Bootstrap's grid system. It uses a series of rows, containers and columns to arrange and align content. It’s fully responsive.

Grid image