Newsletter sections

Inline email signup, in either a simple stacked form or a two-column with-details layout.

Preview

Want product news and updates? Sign up for our newsletter.

Subscribe to our newsletter

Nostrud amet eu ullamco nisi aute in ad minim nostrud adipisicing velit quis.

Weekly articles: Non laboris consequat cupidatat laborum magna. Eiusmod non irure cupidatat duis commodo amet.
No spam: Officia excepteur ullamco ut sint duis proident non adipisicing. Voluptate incididunt anim.

React preview

LiveView (HEEx)

alias DesignSystem.UI.NewsletterSections

<NewsletterSections.newsletter_section
  id="newsletter"
  variant="simple"
  title="Want product news and updates? Sign up for our newsletter."
  footer_note="We care about your data."
  phx-submit="subscribe"
/>

<NewsletterSections.newsletter_section
  id="newsletter-pro"
  variant="with-details"
  title="Subscribe to our newsletter"
  subtitle="Weekly articles, no spam."
  phx-submit="subscribe"
>
  <:details>
    <div class="flex flex-col items-start">
      <dt class="text-base font-semibold text-gray-900 dark:text-white">Weekly articles</dt>
      <dd class="mt-2 text-base/7 text-gray-600 dark:text-gray-400">Non laboris consequat.</dd>
    </div>
    <div class="flex flex-col items-start">
      <dt class="text-base font-semibold text-gray-900 dark:text-white">No spam</dt>
      <dd class="mt-2 text-base/7 text-gray-600 dark:text-gray-400">Officia excepteur.</dd>
    </div>
  </:details>
</NewsletterSections.newsletter_section>

React (JSX)

import { NewsletterSection } from "../ui/index.mjs"

<NewsletterSection
  variant="simple"
  title="Want product news and updates? Sign up for our newsletter."
  footerNote="We care about your data."
  onSubmit={onSubscribe}
/>

<NewsletterSection
  variant="with-details"
  title="Subscribe to our newsletter"
  subtitle="Weekly articles, no spam."
  onSubmit={onSubscribe}
  details={
    <>
      <div className="flex flex-col items-start">
        <dt className="text-base font-semibold text-gray-900 dark:text-white">Weekly articles</dt>
        <dd className="mt-2 text-base/7 text-gray-600 dark:text-gray-400">Non laboris consequat.</dd>
      </div>
      <div className="flex flex-col items-start">
        <dt className="text-base font-semibold text-gray-900 dark:text-white">No spam</dt>
        <dd className="mt-2 text-base/7 text-gray-600 dark:text-gray-400">Officia excepteur.</dd>
      </div>
    </>
  }
/>