Newsletter sections

Email signups centred, beside the heading, in a card, or next to a phone or screen mockup.

Last updated

Each example is a block: a Section with a SectionHeader and a form with an email Input and a submit Button. The form posts to the page; point action at your list provider.

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.

Simple centeredA centred heading and email signup.
Simple leftA heading beside an email signup.
Simple centered brandA centred heading and email signup on the brand colour.
Simple left brandA heading beside an email signup on the brand colour.
Card horizontalA heading beside an email signup in a grey card.
Card verticalA centred heading over an email signup in a grey card.
Card horizontal brandA heading beside an email signup in a brand-colour card.
Card vertical brandA centred heading over an email signup in a brand-colour card.
IPhone mockup 01A heading and email signup beside a phone on a soft circle.
IPhone mockup 02A heading and email signup beside a phone in a grey panel, with notifications over it.
IPhone mockup 03A heading and email signup beside two overlapping phones in a grey panel.
IPhone mockup 04A brand-colour card with a heading, email signup and a phone, with notifications beside it.
Screen mockup 01A heading, three benefits and an email signup beside a screen that runs off the edge.
Screen mockup 02A heading and email signup beside a screen with a phone over its edge.
Screen mockup 03A centred heading and email signup over a screen cropped at the bottom.
Screen mockup 04A grey card with a heading and email signup, and a screen spilling out of its corner.

Related

InputA labeled text field with hint/error messaging, wired for accessibility — plus a pure-CSS floating label.
ButtonTriggers an action. Renders a <button>, or an <a> when href is set. Hue, fill and height are three separate props.
DeviceFrameA screenshot in a phone, a landscape tablet or a browser window, drawn in CSS with the theme's colours; it scales as a whole and a dark screenshot swaps in with the theme.