# Newsletter sections > Email signups centred, beside the heading, in a card, or next to a phone or screen mockup. URL: https://apogee.avaui.dev/docs/newsletter-sections Last updated: 2026-10-20 Email signups centred, beside the heading, in a card, or next to a phone or screen mockup. Last updated October 20, 2026 Each example is a block: a [Section](https://apogee.avaui.dev/docs/section) with a [SectionHeader](https://apogee.avaui.dev/docs/section-header) and a form with an email [Input](https://apogee.avaui.dev/docs/input) and a submit [Button](https://apogee.avaui.dev/docs/button). The form posts to the page; point `action` at your list provider. ```sh npx @ava-ui/apogee add newsletter/simple-centered ``` ## Copy is props Every block in this family takes the same content props (`NewsletterContent` in `sections/_shared/newsletter.ts`), with its sample copy as the defaults. A block ignores the props it has no place for, so you can swap one block for another and keep the copy. - `eyebrow`: The small label above the heading. - `heading`: The heading. - `description`: The line under the heading. - `submitLabel`: The subscribe button. - `media`: The screenshot in the phone or browser frame. - Pass `null` to hide an optional part, such as `description={null}`. - Some blocks add props of their own; the top of each block’s file lists them. [ ![](https://apogee.avaui.dev/thumbs/newsletter-sections__simple-centered.light.webp)![](https://apogee.avaui.dev/thumbs/newsletter-sections__simple-centered.dark.webp) Simple centeredA centred heading and email signup. ](https://apogee.avaui.dev/docs/newsletter-sections/simple-centered)[ ![](https://apogee.avaui.dev/thumbs/newsletter-sections__simple-left.light.webp)![](https://apogee.avaui.dev/thumbs/newsletter-sections__simple-left.dark.webp) Simple leftA heading beside an email signup. ](https://apogee.avaui.dev/docs/newsletter-sections/simple-left)[ ![](https://apogee.avaui.dev/thumbs/newsletter-sections__simple-centered-brand.light.webp)![](https://apogee.avaui.dev/thumbs/newsletter-sections__simple-centered-brand.dark.webp) Simple centered brandA centred heading and email signup on the brand colour. ](https://apogee.avaui.dev/docs/newsletter-sections/simple-centered-brand)[ ![](https://apogee.avaui.dev/thumbs/newsletter-sections__simple-left-brand.light.webp)![](https://apogee.avaui.dev/thumbs/newsletter-sections__simple-left-brand.dark.webp) Simple left brandA heading beside an email signup on the brand colour. ](https://apogee.avaui.dev/docs/newsletter-sections/simple-left-brand)[ ![](https://apogee.avaui.dev/thumbs/newsletter-sections__card-horizontal.light.webp)![](https://apogee.avaui.dev/thumbs/newsletter-sections__card-horizontal.dark.webp) Card horizontalA heading beside an email signup in a grey card. ](https://apogee.avaui.dev/docs/newsletter-sections/card-horizontal)[ ![](https://apogee.avaui.dev/thumbs/newsletter-sections__card-vertical.light.webp)![](https://apogee.avaui.dev/thumbs/newsletter-sections__card-vertical.dark.webp) Card verticalA centred heading over an email signup in a grey card. ](https://apogee.avaui.dev/docs/newsletter-sections/card-vertical)[ ![](https://apogee.avaui.dev/thumbs/newsletter-sections__card-horizontal-brand.light.webp)![](https://apogee.avaui.dev/thumbs/newsletter-sections__card-horizontal-brand.dark.webp) Card horizontal brandA heading beside an email signup in a brand-colour card. ](https://apogee.avaui.dev/docs/newsletter-sections/card-horizontal-brand)[ ![](https://apogee.avaui.dev/thumbs/newsletter-sections__card-vertical-brand.light.webp)![](https://apogee.avaui.dev/thumbs/newsletter-sections__card-vertical-brand.dark.webp) Card vertical brandA centred heading over an email signup in a brand-colour card. ](https://apogee.avaui.dev/docs/newsletter-sections/card-vertical-brand)[ ![](https://apogee.avaui.dev/thumbs/newsletter-sections__iphone-mockup-01.light.webp)![](https://apogee.avaui.dev/thumbs/newsletter-sections__iphone-mockup-01.dark.webp) IPhone mockup 01A heading and email signup beside a phone on a soft circle. ](https://apogee.avaui.dev/docs/newsletter-sections/iphone-mockup-01)[ ![](https://apogee.avaui.dev/thumbs/newsletter-sections__iphone-mockup-02.light.webp)![](https://apogee.avaui.dev/thumbs/newsletter-sections__iphone-mockup-02.dark.webp) IPhone mockup 02A heading and email signup beside a phone in a grey panel, with notifications over it. ](https://apogee.avaui.dev/docs/newsletter-sections/iphone-mockup-02)[ ![](https://apogee.avaui.dev/thumbs/newsletter-sections__iphone-mockup-03.light.webp)![](https://apogee.avaui.dev/thumbs/newsletter-sections__iphone-mockup-03.dark.webp) IPhone mockup 03A heading and email signup beside two overlapping phones in a grey panel. ](https://apogee.avaui.dev/docs/newsletter-sections/iphone-mockup-03)[ ![](https://apogee.avaui.dev/thumbs/newsletter-sections__iphone-mockup-04.light.webp)![](https://apogee.avaui.dev/thumbs/newsletter-sections__iphone-mockup-04.dark.webp) IPhone mockup 04A brand-colour card with a heading, email signup and a phone, with notifications beside it. ](https://apogee.avaui.dev/docs/newsletter-sections/iphone-mockup-04)[ ![](https://apogee.avaui.dev/thumbs/newsletter-sections__screen-mockup-01.light.webp)![](https://apogee.avaui.dev/thumbs/newsletter-sections__screen-mockup-01.dark.webp) Screen mockup 01A heading, three benefits and an email signup beside a screen that runs off the edge. ](https://apogee.avaui.dev/docs/newsletter-sections/screen-mockup-01)[ ![](https://apogee.avaui.dev/thumbs/newsletter-sections__screen-mockup-02.light.webp)![](https://apogee.avaui.dev/thumbs/newsletter-sections__screen-mockup-02.dark.webp) Screen mockup 02A heading and email signup beside a screen with a phone over its edge. ](https://apogee.avaui.dev/docs/newsletter-sections/screen-mockup-02)[ ![](https://apogee.avaui.dev/thumbs/newsletter-sections__screen-mockup-03.light.webp)![](https://apogee.avaui.dev/thumbs/newsletter-sections__screen-mockup-03.dark.webp) Screen mockup 03A centred heading and email signup over a screen cropped at the bottom. ](https://apogee.avaui.dev/docs/newsletter-sections/screen-mockup-03)[ ![](https://apogee.avaui.dev/thumbs/newsletter-sections__screen-mockup-04.light.webp)![](https://apogee.avaui.dev/thumbs/newsletter-sections__screen-mockup-04.dark.webp) Screen mockup 04A grey card with a heading and email signup, and a screen spilling out of its corner. ](https://apogee.avaui.dev/docs/newsletter-sections/screen-mockup-04) ## Related [ InputA labeled text field with hint/error messaging, wired for accessibility — plus a pure-CSS floating label. ](https://apogee.avaui.dev/docs/input)[ ButtonTriggers an action. Renders a