Newsletter (Inline)

Pill-shaped email input + submit button in a single row. Marketing newsletter signup staple.

newsletter-inline interaction

Keywords

newsletter, signup, email, subscribe, form

Metadata

Slugnewsletter-inline

Categoryinteraction

Default containernarrow

Statuspublished

Variants

layout centred · split

background light · alt · dark · primary

size sm · md · lg

Fields (10)

Eyebrow text
Heading text
Subtext textarea
Placeholder text
Button label text
Form action text
Privacy note text
Layout button_group
Background button_group
Padding button_group

Use in a mockup

Copy this as the wrapper in your mockup's HTML — fill the inner markup per the Mockup Spec.

<section class="section newsletter-inline"
         data-block="newsletter-inline"
         data-surface="alt"
         data-layout="centred"
                  data-container="narrow">
  <div class="container container--narrow">
    <div class="newsletter-inline__inner">
      <!-- block content -->
    </div>
  </div>
</section>