Skip to content
MENU

Soracom

Design System

App

A layout component for web apps

Overview 

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

Basic usage 

The basic building blocks of ds-app are as follows:

Class Required? Description
ds-app The top-most level container.
ds-app__header The container for the header component.
ds-app__notice Optional The container for notice content.
ds-app__breadcrumb Optional The container for the breadcrumb component.
ds-app__main The container for the main content of the page.
ds-app__main-title Recommended The app title panel. This panel will disappear when scrolling.
ds-app__main-controls Optional A panel to contain the main controls. This panel will stick to the top when scrolling.
ds-app__main-content A panel to contain the main page content. This panel will scroll automatically.
ds-app__footer Optional A panel for footer content.

Notices 

A notice directly inside ds-app “should” always appear directly under the header 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 ds-notice--pinned ds-notice--strong">
  An example alert notice
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-notice--alert ds-notice--pinned ds-notice--strong">
  An example alert notice
</div>

Example 

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

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

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

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

    <!-- RECOMMENDED: Main section title -->
    <section class="ds-app__main-title">
      <i class="ds-icon --large --icon-notice"></i>
      <h2>Page title!</h2>
    </section>

	<div class="ds-notice--info ds-notice--pinned ds-notice--strong">A notice that will scroll with the main content</div>
    
    <!-- OPTIONAL: Main section controls -->
    <section class="ds-app__main-controls ds-sticky--0">
      <div>
        <!-- Left group button/fields -->
      </div>
      
      <div>
        <!-- Right group button/fields -->
      </div>
    </section>
    
    <!-- REQUIRED: Main content -->
    <section class="ds-app__main-content">
      <!-- Main content -->
    </section>
    
    <!-- OPTIONAL: Footer  -->
    <div class="ds-app__footer">
      <!-- Footer content -->
    </div> 
  </main>
  
</div>
Full working example with sample content