Overview

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

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="ds-details--simple" th="Class|Required?|Description" >}}
<code>ds-app</code>
<i class="ds-icon --icon-confirm"></i>
The top-most level container.
---
<code class="docs-indent--1">ds-app__header</code>
<i class="ds-icon --icon-confirm"></i>
The container for the <a href="/design-system/elements/header/">header</a> component.
---
<code class="docs-indent--1">ds-app__breadcrumb</code>
<em>Optional</em>
The container for the <a href="/design-system/elements/breadcrumb/">breadcrumb</a> component.
---
<code class="docs-indent--1">ds-app__notice</code>
<em>Optional</em>
The container for notice content.
---
<code class="docs-indent--1">ds-app__main</code>
<i class="ds-icon --icon-confirm"></i>
The container for the main content of the page.
---
<code class="docs-indent--2">ds-app__main-content</code>
<i class="ds-icon --icon-confirm"></i>
A panel to contain the main page content. This panel will scroll automatically.
---
<code class="docs-indent--2">ds-app__main-footer</code>
<em>Optional</em>
A panel for footer content.

Notices

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</div>

Example

Core ds-app elements

<div class="ds-app">
  <header class="ds-app__header ds-header" data-ds-size="header">
    <!-- REQUIRED: Standard ds-header -->
  </header>

  <article class="ds-app__main">
    <main class="ds-app__main-container">
      <header class="ds-banner --simple --indent-small">
        <!-- RECOMMENDED: Main section title -->
        <div>
          <h2>Page title</h2>
          <p>Page description</p>
        </div>
      </header>

      <div class="ds-notice --info --pinned --strong">
        <!-- OPTIONAL: Notice  -->
      </div>

      <section class="ds-controls --sticky">
        <!-- OPTIONAL: Main section controls -->
        <div class="ds-button-bar">
          <!-- Left group button/fields -->
        </div>
        <div class="ds-button-bar">
          <!-- Right group button/fields -->
        </div>
      </section>

      <!-- REQUIRED: Main content -->
      <section class="ds-app__main-content">
        <!-- Main content -->
      </section>
    </main>
  </article>

  <footer class="ds-app__footer">
    <!-- REQUIRED: Footer content -->
  </footer>
</div>