Newsletter Components für React und Tailwind

Jede Ausgabe, die verschickt wurde, lesbar im Web. Die neueste Ausgabe neben der Anmeldung, eine durchsuchbare Liste, gezeichnete Mailvorschauen, eine Ausgabe als Webseite und ein Kalender des Jahres.

Neueste Ausgabe
Durchsuchbare Liste
Mailvorschauen
Webversion
Kalender

Props und Details

Neueste Ausgabe

Die neueste Ausgabe groß mit pulsierender Marke, daneben die Anmeldung mit Lesenden und Rhythmus, die früheren Ausgaben in einer Reihe.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/newsletter-archive

Bringt mit utils, kit, button, icon, input, reveal, motion, section

Usage

<NewsletterArchive variant="latest" name="…" readers="3,840" issues={[{ number, title, summary, date, href }]} onSubscribe={(email) => …} />

Source

Durchsuchbare Liste

Jede Ausgabe mit Nummer, Vorschau und Datum. Die Suche markiert den Treffer, Jahre wechseln mit gleitender Pille.

Im Studio öffnen

Mailvorschauen

Ausgaben als gezeichnete Mailvorschauen mit ihrer Überschrift, sie heben und neigen sich beim Darüberfahren. Die Anmeldung steht neben der Überschrift.

Im Studio öffnen

Webversion

Eine Ausgabe als Webseite mit Mailkopf, einem Inhaltsverzeichnis, das der Leseposition folgt, der Anmeldung mit umlaufendem Licht und den benachbarten Ausgaben.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/newsletter-archive

Bringt mit utils, kit, button, icon, input, reveal, motion, section

Usage

<NewsletterArchive variant="reader" name="…" issues={[{ …, sections: [{ title, text: ["…"], link }] }]} />

Source

Kalender

Ein Jahr als zwölf Monate, jede Ausgabe ein Punkt, eine Linie zeigt die vollen Monate. Ein Monat öffnet seine Ausgaben daneben, Jahre wechseln darüber.

Im Studio öffnen

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Newsletter stehen.

In einer Zeile

Karte

Geteilt

Mittig mit Licht

Für die Fußzeile

Mit Vorteilen

Mit Vorschau

Neueste Ausgabe

Durchsuchbare Liste

Mailvorschauen

Webversion

Kalender

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit