Overview
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="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.ds-app__header
ds-app__notice
Other html content directly inside ds-app appears here
Banners, controls etc
…
The main content for the page
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):
html
Copy
Example
html
Copy