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.

Error page

The error page helps users to recognise, diagnose, and recover from errors. It should provide an error message to indicate the problem, and constructively suggest a solution.

Visit the 503 or 404 demo pages.

linkBasic structure

The basic structure provides a header and the main area. The main area has a fixed width on top of a background.

  • The header contains the brand logo.
  • The main area shows the error type, error message, CTA button, and footer.
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.

linkHow to implement

  • Main area has a fixed width 460px on top of a background and stays left side of the screen with left-marging 250px.
  • The header appears as a fixed, full-width strip, on top of the screen.
  • For screens smaller than 770px, the background is no longer visible and the main area becomes flexible.


Click here to download the background image.