Containers

3 components in this section

Section

Reusable content section with responsive padding

<div class="dg-section">
  <p>Section content</p>
</div>
import { Section } from '@deepgram/styles/react';

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

<dg-section>
  <p>Section content</p>
</dg-section>

Constrained Container

Max-width container for readable content areas

<div class="dg-constrain-width">
  <p class="dg-prose">Content within a max-width container for readability.</p>
</div>
import { ConstrainWidth, Prose } from '@deepgram/styles/react';

<ConstrainWidth>
  <Prose>Content within a max-width container for readability.</Prose>
</ConstrainWidth>
<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-constrain-width>
  <dg-prose>Content within a max-width container for readability.</dg-prose>
</dg-constrain-width>

Responsive Grid

Grid that stacks on mobile and displays side-by-side on desktop

<div class="dg-grid-mobile-stack">
  <div class="dg-card">
    <div class="dg-card__body">
      <p class="dg-prose">Column 1</p>
    </div>
  </div>
  <div class="dg-card">
    <div class="dg-card__body">
      <p class="dg-prose">Column 2</p>
    </div>
  </div>
</div>
import { Card, CardBody, GridMobileStack, Prose } from '@deepgram/styles/react';

<GridMobileStack>
  <Card>
    <CardBody>
      <Prose>Column 1</Prose>
    </CardBody>
  </Card>
  <Card>
    <CardBody>
      <Prose>Column 2</Prose>
    </CardBody>
  </Card>
</GridMobileStack>
<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-grid-mobile-stack>
  <dg-card>
    <div class="dg-card__body">
      <dg-prose>Column 1</dg-prose>
    </div>
  </dg-card>
  <dg-card>
    <div class="dg-card__body">
      <dg-prose>Column 2</dg-prose>
    </div>
  </dg-card>
</dg-grid-mobile-stack>