Newsletter Archive End Card

ProNew

Use this when a row of past issues should end with a call to subscribe: a no-library snap row of issue links whose last slide is a subscribe form with a labelled email field, a clear error and a success message.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

label

Guide and examples

When to use it

Use it on a newsletter or blog landing page where the archive is a taste of what subscribers get, and the last card turns browsing into a sign-up.

Do not use it when subscribing is the main goal of the page. Give the form its own section above the fold.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`issues`	`Issue[]`	`-`	Each has an id, number, title, date and href.
`label`	`string`	`-`	Accessible name of the carousel.
`onSubscribe`	`(email: string) => void`	`Promise<void>`	-

Accessibility

The email field has a visible label, type email and aria-invalid with a linked error message (role alert) when it is wrong.
Success is announced as a status message and the form is replaced, not just hidden.
The final card is the last stop in the carousel, so keyboard users reach it with Tab after the issues.
Keyboard: Tab: issues, then the email field and Subscribe
Keyboard: Enter in the field: submit

Testing

The pattern ships with a Testing Library test (newsletter-archive-end-card.test.tsx). Embla needs layout to count snaps, and jsdom has none, so the repo's mockCarouselLayout helper gives the viewport and slides real sizes.