Multi-Column Layouts

1 component in this section

Three-Column Layout

Responsive layout with left sidebar, main content, and right sidebar

HTML

React

Web Components

<div class="dg-columns" style="width: 100%; max-width: 100%;">
  <div class="dg-columns__wrapper">
    <div class="dg-columns__column dg-columns__column--left" role="aside">
      <p class="dg-prose dg-prose--small">Left sidebar</p>
    </div>
    <div class="dg-columns__column dg-columns__column--center" role="main">
      <p class="dg-prose dg-prose--small">Main content</p>
    </div>
  </div>
  <div class="dg-columns__column dg-columns__column--right" role="aside">
    <p class="dg-prose dg-prose--small">Right sidebar</p>
  </div>
</div>

import { Columns, ColumnsColumn, ColumnsWrapper, Prose } from '@deepgram/styles/react';

<Columns style={{ width: '100%', maxWidth: '100%' }}>
  <ColumnsWrapper>
    <ColumnsColumn is="aside" left>
      <Prose small>Left sidebar</Prose>
    </ColumnsColumn>
    <ColumnsColumn is="main" center>
      <Prose small>Main content</Prose>
    </ColumnsColumn>
  </ColumnsWrapper>
  <ColumnsColumn is="aside" right>
    <Prose small>Right sidebar</Prose>
  </ColumnsColumn>
</Columns>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-columns style="width: 100%; max-width: 100%;">
  <div class="dg-columns__wrapper">
    <div class="dg-columns__column dg-columns__column--left" role="aside">
      <dg-prose small>Left sidebar</dg-prose>
    </div>
    <div class="dg-columns__column dg-columns__column--center" role="main">
      <dg-prose small>Main content</dg-prose>
    </div>
  </div>
  <div class="dg-columns__column dg-columns__column--right" role="aside">
    <dg-prose small>Right sidebar</dg-prose>
  </div>
</dg-columns>

Small Left Sidebar (--sm)

Layout with small left sidebar (256px) using the --sm modifier

HTML

React

Web Components

<div class="dg-columns" style="width: 100%; max-width: 100%;">
  <div class="dg-columns__wrapper">
    <div class="dg-columns__column dg-columns__column--left dg-columns__column--sm" role="aside">
      <p class="dg-prose dg-prose--small">Small (256px)</p>
    </div>
    <div class="dg-columns__column dg-columns__column--center" role="main">
      <p class="dg-prose dg-prose--small">Main content</p>
    </div>
  </div>
  <div class="dg-columns__column dg-columns__column--right" role="aside">
    <p class="dg-prose dg-prose--small">Right sidebar</p>
  </div>
</div>

import { Columns, ColumnsColumn, ColumnsWrapper, Prose } from '@deepgram/styles/react';

<Columns style={{ width: '100%', maxWidth: '100%' }}>
  <ColumnsWrapper>
    <ColumnsColumn is="aside" left sm>
      <Prose small>Small (256px)</Prose>
    </ColumnsColumn>
    <ColumnsColumn is="main" center>
      <Prose small>Main content</Prose>
    </ColumnsColumn>
  </ColumnsWrapper>
  <ColumnsColumn is="aside" right>
    <Prose small>Right sidebar</Prose>
  </ColumnsColumn>
</Columns>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-columns style="width: 100%; max-width: 100%;">
  <div class="dg-columns__wrapper">
    <div class="dg-columns__column dg-columns__column--left dg-columns__column--sm" role="aside">
      <dg-prose small>Small (256px)</dg-prose>
    </div>
    <div class="dg-columns__column dg-columns__column--center" role="main">
      <dg-prose small>Main content</dg-prose>
    </div>
  </div>
  <div class="dg-columns__column dg-columns__column--right" role="aside">
    <dg-prose small>Right sidebar</dg-prose>
  </div>
</dg-columns>

Large Left Sidebar (--lg)

Layout with large left sidebar (384px) using the --lg modifier

HTML

React

Web Components

<div class="dg-columns" style="width: 100%; max-width: 100%;">
  <div class="dg-columns__wrapper">
    <div class="dg-columns__column dg-columns__column--left dg-columns__column--lg" role="aside">
      <p class="dg-prose dg-prose--small">Large (384px)</p>
    </div>
    <div class="dg-columns__column dg-columns__column--center" role="main">
      <p class="dg-prose dg-prose--small">Main content</p>
    </div>
  </div>
  <div class="dg-columns__column dg-columns__column--right" role="aside">
    <p class="dg-prose dg-prose--small">Right sidebar</p>
  </div>
</div>

import { Columns, ColumnsColumn, ColumnsWrapper, Prose } from '@deepgram/styles/react';

<Columns style={{ width: '100%', maxWidth: '100%' }}>
  <ColumnsWrapper>
    <ColumnsColumn is="aside" left lg>
      <Prose small>Large (384px)</Prose>
    </ColumnsColumn>
    <ColumnsColumn is="main" center>
      <Prose small>Main content</Prose>
    </ColumnsColumn>
  </ColumnsWrapper>
  <ColumnsColumn is="aside" right>
    <Prose small>Right sidebar</Prose>
  </ColumnsColumn>
</Columns>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-columns style="width: 100%; max-width: 100%;">
  <div class="dg-columns__wrapper">
    <div class="dg-columns__column dg-columns__column--left dg-columns__column--lg" role="aside">
      <dg-prose small>Large (384px)</dg-prose>
    </div>
    <div class="dg-columns__column dg-columns__column--center" role="main">
      <dg-prose small>Main content</dg-prose>
    </div>
  </div>
  <div class="dg-columns__column dg-columns__column--right" role="aside">
    <dg-prose small>Right sidebar</dg-prose>
  </div>
</dg-columns>

Extra Large Left Sidebar (--xl)

Layout with extra large left sidebar (512px) using the --xl modifier

HTML

React

Web Components

<div class="dg-columns" style="width: 100%; max-width: 100%;">
  <div class="dg-columns__wrapper">
    <div class="dg-columns__column dg-columns__column--left dg-columns__column--xl" role="aside">
      <p class="dg-prose dg-prose--small">Extra Large (512px)</p>
    </div>
    <div class="dg-columns__column dg-columns__column--center" role="main">
      <p class="dg-prose dg-prose--small">Main content</p>
    </div>
  </div>
  <div class="dg-columns__column dg-columns__column--right" role="aside">
    <p class="dg-prose dg-prose--small">Right sidebar</p>
  </div>
</div>

import { Columns, ColumnsColumn, ColumnsWrapper, Prose } from '@deepgram/styles/react';

<Columns style={{ width: '100%', maxWidth: '100%' }}>
  <ColumnsWrapper>
    <ColumnsColumn is="aside" left xl>
      <Prose small>Extra Large (512px)</Prose>
    </ColumnsColumn>
    <ColumnsColumn is="main" center>
      <Prose small>Main content</Prose>
    </ColumnsColumn>
  </ColumnsWrapper>
  <ColumnsColumn is="aside" right>
    <Prose small>Right sidebar</Prose>
  </ColumnsColumn>
</Columns>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-columns style="width: 100%; max-width: 100%;">
  <div class="dg-columns__wrapper">
    <div class="dg-columns__column dg-columns__column--left dg-columns__column--xl" role="aside">
      <dg-prose small>Extra Large (512px)</dg-prose>
    </div>
    <div class="dg-columns__column dg-columns__column--center" role="main">
      <dg-prose small>Main content</dg-prose>
    </div>
  </div>
  <div class="dg-columns__column dg-columns__column--right" role="aside">
    <dg-prose small>Right sidebar</dg-prose>
  </div>
</dg-columns>

Small Right Sidebar (--sm)

Layout with small right sidebar (320px) using the --sm modifier

HTML

React

Web Components

<div class="dg-columns" style="width: 100%; max-width: 100%;">
  <div class="dg-columns__wrapper">
    <div class="dg-columns__column dg-columns__column--left" role="aside">
      <p class="dg-prose dg-prose--small">Left sidebar</p>
    </div>
    <div class="dg-columns__column dg-columns__column--center" role="main">
      <p class="dg-prose dg-prose--small">Main content</p>
    </div>
  </div>
  <div class="dg-columns__column dg-columns__column--right dg-columns__column--sm" role="aside">
    <p class="dg-prose dg-prose--small">Small (320px)</p>
  </div>
</div>

import { Columns, ColumnsColumn, ColumnsWrapper, Prose } from '@deepgram/styles/react';

<Columns style={{ width: '100%', maxWidth: '100%' }}>
  <ColumnsWrapper>
    <ColumnsColumn is="aside" left>
      <Prose small>Left sidebar</Prose>
    </ColumnsColumn>
    <ColumnsColumn is="main" center>
      <Prose small>Main content</Prose>
    </ColumnsColumn>
  </ColumnsWrapper>
  <ColumnsColumn is="aside" right sm>
    <Prose small>Small (320px)</Prose>
  </ColumnsColumn>
</Columns>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-columns style="width: 100%; max-width: 100%;">
  <div class="dg-columns__wrapper">
    <div class="dg-columns__column dg-columns__column--left" role="aside">
      <dg-prose small>Left sidebar</dg-prose>
    </div>
    <div class="dg-columns__column dg-columns__column--center" role="main">
      <dg-prose small>Main content</dg-prose>
    </div>
  </div>
  <div class="dg-columns__column dg-columns__column--right dg-columns__column--sm" role="aside">
    <dg-prose small>Small (320px)</dg-prose>
  </div>
</dg-columns>

Large Right Sidebar (--lg)

Layout with large right sidebar (384px) using the --lg modifier

HTML

React

Web Components

<div class="dg-columns" style="width: 100%; max-width: 100%;">
  <div class="dg-columns__wrapper">
    <div class="dg-columns__column dg-columns__column--left" role="aside">
      <p class="dg-prose dg-prose--small">Left sidebar</p>
    </div>
    <div class="dg-columns__column dg-columns__column--center" role="main">
      <p class="dg-prose dg-prose--small">Main content</p>
    </div>
  </div>
  <div class="dg-columns__column dg-columns__column--right dg-columns__column--lg" role="aside">
    <p class="dg-prose dg-prose--small">Large (384px)</p>
  </div>
</div>

import { Columns, ColumnsColumn, ColumnsWrapper, Prose } from '@deepgram/styles/react';

<Columns style={{ width: '100%', maxWidth: '100%' }}>
  <ColumnsWrapper>
    <ColumnsColumn is="aside" left>
      <Prose small>Left sidebar</Prose>
    </ColumnsColumn>
    <ColumnsColumn is="main" center>
      <Prose small>Main content</Prose>
    </ColumnsColumn>
  </ColumnsWrapper>
  <ColumnsColumn is="aside" right lg>
    <Prose small>Large (384px)</Prose>
  </ColumnsColumn>
</Columns>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-columns style="width: 100%; max-width: 100%;">
  <div class="dg-columns__wrapper">
    <div class="dg-columns__column dg-columns__column--left" role="aside">
      <dg-prose small>Left sidebar</dg-prose>
    </div>
    <div class="dg-columns__column dg-columns__column--center" role="main">
      <dg-prose small>Main content</dg-prose>
    </div>
  </div>
  <div class="dg-columns__column dg-columns__column--right dg-columns__column--lg" role="aside">
    <dg-prose small>Large (384px)</dg-prose>
  </div>
</dg-columns>

Extra Large Right Sidebar (--xl)

Layout with extra large right sidebar (512px) using the --xl modifier

HTML

React

Web Components

<div class="dg-columns" style="width: 100%; max-width: 100%;">
  <div class="dg-columns__wrapper">
    <div class="dg-columns__column dg-columns__column--left" role="aside">
      <p class="dg-prose dg-prose--small">Left sidebar</p>
    </div>
    <div class="dg-columns__column dg-columns__column--center" role="main">
      <p class="dg-prose dg-prose--small">Main content</p>
    </div>
  </div>
  <div class="dg-columns__column dg-columns__column--right dg-columns__column--xl" role="aside">
    <p class="dg-prose dg-prose--small">Extra Large (512px)</p>
  </div>
</div>

import { Columns, ColumnsColumn, ColumnsWrapper, Prose } from '@deepgram/styles/react';

<Columns style={{ width: '100%', maxWidth: '100%' }}>
  <ColumnsWrapper>
    <ColumnsColumn is="aside" left>
      <Prose small>Left sidebar</Prose>
    </ColumnsColumn>
    <ColumnsColumn is="main" center>
      <Prose small>Main content</Prose>
    </ColumnsColumn>
  </ColumnsWrapper>
  <ColumnsColumn is="aside" right xl>
    <Prose small>Extra Large (512px)</Prose>
  </ColumnsColumn>
</Columns>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-columns style="width: 100%; max-width: 100%;">
  <div class="dg-columns__wrapper">
    <div class="dg-columns__column dg-columns__column--left" role="aside">
      <dg-prose small>Left sidebar</dg-prose>
    </div>
    <div class="dg-columns__column dg-columns__column--center" role="main">
      <dg-prose small>Main content</dg-prose>
    </div>
  </div>
  <div class="dg-columns__column dg-columns__column--right dg-columns__column--xl" role="aside">
    <dg-prose small>Extra Large (512px)</dg-prose>
  </div>
</dg-columns>