Cards

1 component in this section

Default Card

Flexible card container with multiple variants

HTML

React

Web Components

<div class="dg-card">
  <h3 class="dg-card-heading">Card Title</h3>
  <div class="dg-card__body">
    <p class="dg-prose">Card content goes here.</p>
  </div>
</div>

import { Card, CardBody, CardHeading, Prose } from '@deepgram/styles/react';

<Card>
  <CardHeading>Card Title</CardHeading>
  <CardBody>
    <Prose>Card content goes here.</Prose>
  </CardBody>
</Card>

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

<dg-card>
  <dg-card-heading>Card Title</dg-card-heading>
  <div class="dg-card__body">
    <dg-prose>Card content goes here.</dg-prose>
  </div>
</dg-card>

Compact Card

Flexible card container with multiple variants

HTML

React

Web Components

<div class="dg-card dg-card--compact">
  <h3 class="dg-card-heading">Compact Card</h3>
  <div class="dg-card__body">
    <p class="dg-prose">Card content goes here.</p>
  </div>
</div>

import { Card, CardBody, CardHeading, Prose } from '@deepgram/styles/react';

<Card compact>
  <CardHeading>Compact Card</CardHeading>
  <CardBody>
    <Prose>Card content goes here.</Prose>
  </CardBody>
</Card>

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

<dg-card compact>
  <dg-card-heading>Compact Card</dg-card-heading>
  <div class="dg-card__body">
    <dg-prose>Card content goes here.</dg-prose>
  </div>
</dg-card>

Spacious Card

Flexible card container with multiple variants

HTML

React

Web Components

<div class="dg-card dg-card--spacious">
  <h3 class="dg-card-heading">Spacious Card</h3>
  <div class="dg-card__body">
    <p class="dg-prose">Card content goes here.</p>
  </div>
</div>

import { Card, CardBody, CardHeading, Prose } from '@deepgram/styles/react';

<Card spacious>
  <CardHeading>Spacious Card</CardHeading>
  <CardBody>
    <Prose>Card content goes here.</Prose>
  </CardBody>
</Card>

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

<dg-card spacious>
  <dg-card-heading>Spacious Card</dg-card-heading>
  <div class="dg-card__body">
    <dg-prose>Card content goes here.</dg-prose>
  </div>
</dg-card>

Card with Image and Footer

Structured card with image, header, body, and footer

HTML

React

Web Components

<div class="dg-card dg-card--structured" style="max-width: 400px;">
  <div class="dg-card__image dg-card__image--medium">
    <img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=800&h=400&fit=crop" alt="Technology workspace" />
  </div>
  <div class="dg-card__header">
    <h3 class="dg-card-heading">Build with APIs</h3>
  </div>
  <div class="dg-card__body">
    <p class="dg-prose">Voice AI Infrastructure for Builders. For developers and product teams ready to move fast with flexible APIs.</p>
  </div>
  <div class="dg-card__footer">
    <button class="dg-btn dg-btn--primary">Start Building</button>
  </div>
</div>

import { Btn, Card, CardBody, CardFooter, CardHeader, CardHeading, CardImage, Prose } from '@deepgram/styles/react';

<Card structured style={{ maxWidth: '400px' }}>
  <CardImage className="dg-card__image--medium">
    <img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=800&h=400&fit=crop" alt="Technology workspace" />
  </CardImage>
  <CardHeader>
    <CardHeading>Build with APIs</CardHeading>
  </CardHeader>
  <CardBody>
    <Prose>Voice AI Infrastructure for Builders. For developers and product teams ready to move fast with flexible APIs.</Prose>
  </CardBody>
  <CardFooter>
    <Btn primary>Start Building</Btn>
  </CardFooter>
</Card>

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

<dg-card structured style="max-width: 400px;">
  <div class="dg-card__image dg-card__image--medium">
    <img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=800&h=400&fit=crop" alt="Technology workspace" />
  </div>
  <div class="dg-card__header">
    <dg-card-heading>Build with APIs</dg-card-heading>
  </div>
  <div class="dg-card__body">
    <dg-prose>Voice AI Infrastructure for Builders. For developers and product teams ready to move fast with flexible APIs.</dg-prose>
  </div>
  <div class="dg-card__footer">
    <dg-btn primary>Start Building</dg-btn>
  </div>
</dg-card>

Card with Icon (Left Aligned)

Card with Font Awesome icon, left-aligned (default)

HTML

React

Web Components

<div class="dg-card dg-card--structured" style="max-width: 400px;">
  <i class="dg-card__icon dg-card__icon--left fas fa-rocket"></i>
  <div class="dg-card__header">
    <h3 class="dg-card-heading">Fast Integration</h3>
  </div>
  <div class="dg-card__body">
    <p class="dg-prose">Get started quickly with our streamlined API and comprehensive documentation.</p>
  </div>
  <div class="dg-card__footer">
    <button class="dg-btn dg-btn--primary">Get Started</button>
  </div>
</div>

import { Btn, Card, CardBody, CardFooter, CardHeader, CardHeading, CardIcon, Prose } from '@deepgram/styles/react';

<Card structured style={{ maxWidth: '400px' }}>
  <CardIcon name="rocket" className="dg-card__icon--left" />
  <CardHeader>
    <CardHeading>Fast Integration</CardHeading>
  </CardHeader>
  <CardBody>
    <Prose>Get started quickly with our streamlined API and comprehensive documentation.</Prose>
  </CardBody>
  <CardFooter>
    <Btn primary>Get Started</Btn>
  </CardFooter>
</Card>

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

<dg-card structured style="max-width: 400px;">
  <i class="dg-card__icon dg-card__icon--left fas fa-rocket"></i>
  <div class="dg-card__header">
    <dg-card-heading>Fast Integration</dg-card-heading>
  </div>
  <div class="dg-card__body">
    <dg-prose>Get started quickly with our streamlined API and comprehensive documentation.</dg-prose>
  </div>
  <div class="dg-card__footer">
    <dg-btn primary>Get Started</dg-btn>
  </div>
</dg-card>

Link Card with Bordered Footer

Structured card as a link with a bordered footer showing a CTA

HTML

React

Web Components

<a class="dg-card dg-card--structured" href="#" style="max-width: 400px; text-decoration: none;">
  <div class="dg-card__header">
    <h3 class="dg-card-heading">Documentation</h3>
  </div>
  <div class="dg-card__body">
    <p class="dg-prose">Getting started guides, API references, and integration tutorials.</p>
  </div>
  <div class="dg-card__footer dg-card__footer--bordered">
    <span style="font-size: 0.875rem; font-weight: 600; color: var(--color-dg-primary);">View docs</span>
    <span style="font-size: 1.5rem; color: var(--color-dg-primary); margin-left: auto;">→</span>
  </div>
</a>

import { CardBody, CardFooter, CardHeader, CardHeading, Prose } from '@deepgram/styles/react';

<a className="dg-card dg-card--structured" href="#" style={{ maxWidth: '400px', textDecoration: 'none' }}>
  <CardHeader>
    <CardHeading>Documentation</CardHeading>
  </CardHeader>
  <CardBody>
    <Prose>Getting started guides, API references, and integration tutorials.</Prose>
  </CardBody>
  <CardFooter className="dg-card__footer--bordered">
    <span style={{ fontSize: '0.875rem', fontWeight: '600', color: 'var(--color-dg-primary)' }}>View docs</span>
    <span style={{ fontSize: '1.5rem', color: 'var(--color-dg-primary)', marginLeft: 'auto' }}>→</span>
  </CardFooter>
</a>

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

<dg-card structured href="#" style="max-width: 400px; text-decoration: none;">
  <div class="dg-card__header">
    <dg-card-heading>Documentation</dg-card-heading>
  </div>
  <div class="dg-card__body">
    <dg-prose>Getting started guides, API references, and integration tutorials.</dg-prose>
  </div>
  <div class="dg-card__footer dg-card__footer--bordered">
    <span style="font-size: 0.875rem; font-weight: 600; color: var(--color-dg-primary);">View docs</span>
    <span style="font-size: 1.5rem; color: var(--color-dg-primary); margin-left: auto;">→</span>
  </div>
</dg-card>