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):

Example

Manifest

The component manifest describes this component's API — its modifiers, structure, data attributes, CSS custom properties, accessibility notes, and example markup. It is consumed by tooling such as AI assistants and code generators.

Latest version: https://assets.soracom.io/sds/latest/ds-app/index.mjs