Skip to content


Design System
Home Design System Containers App


A layout component for web apps


The .ds-app component provides the layout/arrangement of a web app.

The details on this page may not be relevent if the html structure of the page is different to the expected structure.

Basic usage 

The basic building blocks of ds-app are shown below.

The classes ds-app__* are specific named ‘grid areas’ - content with these classes will be shown in a specific location/order.

Class Required? Description
ds-app The top-most level container.
ds-app__header The container for the header component.
ds-app__breadcrumb Optional The container for the breadcrumb component.
ds-app__notice Optional The container for notice content.
ds-app__main The container for the main content of the page.
ds-app__main-content A panel to contain the main page content. This panel will scroll automatically.
ds-app__main-footer Optional A panel for footer content.
Other html content directly inside ds-app appears here
Banners, controls etc
The main content for the page


A notice directly inside ds-app “should” always appear directly under the breadcrumbs and will be pinned with the header and not scroll off the page.

A notice inside ds-app__main will appear based on the source code order and will scroll when the main content scrolls.

The recommend structure for notices is (see Notice - pinned style and Notice - strong color):

<div class="ds-notice --alert --pinned --strong">
  An example alert notice
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-notice --alert --pinned --strong">
  An example alert notice


Core ds-app elements
<!-- Overall app container -->
<div class="ds-app">

<!-- App top section -->
  <!-- REQUIRED: Header -->
  <header class="ds-app__header ds-header" data-ds-size="header">
    <!-- Standard ds-header -->

  <!-- OPTIONAL: Breadcrumb  -->
  <ul class="ds-app__breadcrumb ds-breadcrumb">
    <!-- Standard ds-breadcrumb -->

  <!-- OPTIONAL: Notice  -->
  <div class="ds-app__notice ds-notice --alert --pinned --strong">An important notice that will not disappear when scrolled</div>

<!-- App main section -->
  <!-- REQUIRED: Main section -->
  <main class="ds-app__main">

    <!-- RECOMMENDED: Main section title -->
    <header class="ds-banner --simple --indent-small">
        <h2>Page title</h2>
        <p>Page description</p>
    <!-- OPTIONAL: Notice  -->
    <div class="ds-notice --info --pinned --strong">A notice that will scroll with the main content</div>
    <!-- OPTIONAL: Main section controls -->
    <section class="ds-controls --sticky">
      <div class="ds-button-bar">
        <!-- Left group button/fields -->
      <div class="ds-button-bar">
        <!-- Right group button/fields -->
    <!-- REQUIRED: Main content -->
    <section class="ds-app__main-content">
      <!-- Main content -->
    <!-- OPTIONAL: Footer  -->
    <footer class="ds-app__main-footer ds-cols --indent-small --center">
      <!-- Footer content -->
Full working example with sample content