Newsletter Sections

1 component in this section

Simple Newsletter

Newsletter subscription form with email input and privacy checkbox

<div class="dg-newsletter">
  <h3 class="dg-card-heading">Stay Updated</h3>
  <p class="dg-prose">Get the latest news and updates from Deepgram.</p>
  <form class="dg-newsletter__form">
    <input type="email" class="dg-input" placeholder="Enter your email" />
    <button type="submit" class="dg-btn dg-btn--primary">Subscribe</button>
  </form>
</div>
import { Btn, CardHeading, Input, Newsletter, NewsletterForm, Prose } from '@deepgram/styles/react';

<Newsletter>
  <CardHeading>Stay Updated</CardHeading>
  <Prose>Get the latest news and updates from Deepgram.</Prose>
  <NewsletterForm>
    <Input type="email" placeholder="Enter your email" />
    <Btn primary type="submit">Subscribe</Btn>
  </NewsletterForm>
</Newsletter>
<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-newsletter>
  <dg-card-heading>Stay Updated</dg-card-heading>
  <dg-prose>Get the latest news and updates from Deepgram.</dg-prose>
  <form class="dg-newsletter__form">
    <dg-input type="email" placeholder="Enter your email"></dg-input>
    <dg-btn primary type="submit">Subscribe</dg-btn>
  </form>
</dg-newsletter>

Inline Newsletter

Newsletter subscription form with email input and privacy checkbox

<div class="dg-newsletter">
  <form class="dg-newsletter__form dg-newsletter__form--inline">
    <input type="email" class="dg-input" placeholder="Enter your email" />
    <button type="submit" class="dg-btn dg-btn--primary">Subscribe</button>
  </form>
</div>
import { Btn, Input, Newsletter, NewsletterForm } from '@deepgram/styles/react';

<Newsletter>
  <NewsletterForm className="dg-newsletter__form--inline">
    <Input type="email" placeholder="Enter your email" />
    <Btn primary type="submit">Subscribe</Btn>
  </NewsletterForm>
</Newsletter>
<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-newsletter>
  <form class="dg-newsletter__form dg-newsletter__form--inline">
    <dg-input type="email" placeholder="Enter your email"></dg-input>
    <dg-btn primary type="submit">Subscribe</dg-btn>
  </form>
</dg-newsletter>