Hero Sections

1 component in this section

Full Hero with Announcement

Large page header with title, subtitle, and call-to-action buttons

HTML

React

Web Components

<section class="dg-hero">
  <div class="dg-hero__content">
    <a href="#" class="dg-hero__announcement">
      <span class="dg-hero__announcement-text">New: Meet Flux - speech recognition for real-time voice agents</span>
      <span class="dg-hero__announcement-cta">Try It Now →</span>
    </a>
    <h1 class="dg-hero__title">Voice AI APIs that just work</h1>
    <p class="dg-hero__body">Build with the most accurate, realistic, and cost-effective APIs for speech-to-text, text-to-speech, and voice agents.</p>
    <div class="dg-hero__actions">
      <button class="dg-btn dg-btn--primary" type="button">Sign Up Free</button>
      <button class="dg-btn dg-btn--secondary" type="button">Playground</button>
    </div>
  </div>
</section>

import { Btn, Hero, HeroActions, HeroAnnouncement, HeroAnnouncementCta, HeroAnnouncementText, HeroBody, HeroContent, HeroTitle } from '@deepgram/styles/react';

<Hero>
  <HeroContent>
    <HeroAnnouncement href="#">
      <HeroAnnouncementText>New: Meet Flux - speech recognition for real-time voice agents</HeroAnnouncementText>
      <HeroAnnouncementCta>Try It Now →</HeroAnnouncementCta>
    </HeroAnnouncement>
    <HeroTitle>Voice AI APIs that just work</HeroTitle>
    <HeroBody>Build with the most accurate, realistic, and cost-effective APIs for speech-to-text, text-to-speech, and voice agents.</HeroBody>
    <HeroActions>
      <Btn primary type="button">Sign Up Free</Btn>
      <Btn secondary type="button">Playground</Btn>
    </HeroActions>
  </HeroContent>
</Hero>

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

<dg-hero>
  <div class="dg-hero__content">
    <a href="#" class="dg-hero__announcement">
      <span class="dg-hero__announcement-text">New: Meet Flux - speech recognition for real-time voice agents</span>
      <span class="dg-hero__announcement-cta">Try It Now →</span>
    </a>
    <h1 class="dg-hero__title">Voice AI APIs that just work</h1>
    <p class="dg-hero__body">Build with the most accurate, realistic, and cost-effective APIs for speech-to-text, text-to-speech, and voice agents.</p>
    <div class="dg-hero__actions">
      <dg-btn primary type="button">Sign Up Free</dg-btn>
      <dg-btn secondary type="button">Playground</dg-btn>
    </div>
  </div>
</dg-hero>

Simple Hero

Large page header with title, subtitle, and call-to-action buttons

HTML

React

Web Components

<section class="dg-hero">
  <div class="dg-hero__content">
    <h1 class="dg-hero__title">Welcome to Our Platform</h1>
    <p class="dg-hero__body">Build amazing experiences with our component library</p>
  </div>
</section>

import { Hero, HeroBody, HeroContent, HeroTitle } from '@deepgram/styles/react';

<Hero>
  <HeroContent>
    <HeroTitle>Welcome to Our Platform</HeroTitle>
    <HeroBody>Build amazing experiences with our component library</HeroBody>
  </HeroContent>
</Hero>

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

<dg-hero>
  <div class="dg-hero__content">
    <h1 class="dg-hero__title">Welcome to Our Platform</h1>
    <p class="dg-hero__body">Build amazing experiences with our component library</p>
  </div>
</dg-hero>

Hero with Single CTA

Large page header with title, subtitle, and call-to-action buttons

HTML

React

Web Components

<section class="dg-hero">
  <div class="dg-hero__content">
    <h1 class="dg-hero__title">Get Started Today</h1>
    <p class="dg-hero__body">Join thousands of developers building with Deepgram</p>
    <div class="dg-hero__actions">
      <button class="dg-btn dg-btn--primary" type="button">Start Building</button>
    </div>
  </div>
</section>

import { Btn, Hero, HeroActions, HeroBody, HeroContent, HeroTitle } from '@deepgram/styles/react';

<Hero>
  <HeroContent>
    <HeroTitle>Get Started Today</HeroTitle>
    <HeroBody>Join thousands of developers building with Deepgram</HeroBody>
    <HeroActions>
      <Btn primary type="button">Start Building</Btn>
    </HeroActions>
  </HeroContent>
</Hero>

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

<dg-hero>
  <div class="dg-hero__content">
    <h1 class="dg-hero__title">Get Started Today</h1>
    <p class="dg-hero__body">Join thousands of developers building with Deepgram</p>
    <div class="dg-hero__actions">
      <dg-btn primary type="button">Start Building</dg-btn>
    </div>
  </div>
</dg-hero>