Skip to content
MENU

Soracom

Design System

Layout

A generic container for layout.

Overview 

The .ds-layout styles provide generic layout/arrangement of content, altering the position/width/height and order of elements on screen, without applying additional styling to the elements themselves.

As of v1.5.52 .ds-layout__rows and ds-layout__cols have been moved to separate components: Rows and Cols.

Examples 

.ds-layout__page-with-aside 

<div class="ds-layout__page-with-aside">
  <div class="ds-layout__banner">
    Banner content area
  </div>
  <div class="ds-layout__header">
    Header content area
  </div>
  <div class="ds-layout__main">
    Main content area
  </div>
  <div class="ds-layout__aside">
    Aside content area
  </div>
</div>