Skip to content


Design System


A layout component for web apps


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.


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

  <!-- OPTIONAL: Notice  -->
  <div class="ds-console__notice">
    <!-- Notice content -->
  <!-- OPTIONAL: Breadcrumb  -->
  <ul class="ds-app__breadcrumb ds-breadcrumb">
    <!-- Standard ds-breadcrumb -->

<!-- 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 ds-icon--icon-notice"></i>
      <h2>Page title</h2>
    <!-- OPTIONAL: Main section controls -->
    <section class="ds-app__main-controls ds-sticky--0">
        <!-- Left group button/fields -->
        <!-- Right group button/fields -->
    <!-- REQUIRED: Main content -->
    <section class="ds-app__main-content">
      <!-- Main content -->
    <!-- OPTIONAL: Footer  -->
    <div class="ds-app__footer">
      <!-- Footer content -->
Full working example with sample content