Blog or magazine

An editorial site lives from three moments, finding a story, reading it in peace and coming back for the next one. The components follow those moments from the front page to the sign-up.

6 componentsInstall all of it at once

The order

Top to bottom, the way the sections sit on the finished page.

Step 1 / 6 · Editorial
Magazine front
A front page with a lead story and sections gives the site an editorial voice.
The front of a magazine or news site, sorted like an editor would. Lead story, sections with a bar that follows, a print issue with contents, a morning digest to tick off and the most read by period.
5 variants · Magazine front
Step 2 / 6 · Blog
Blog
Article lists with image, date and reading time for everyone who browses.
Post lists from grid to magazine, the article itself with a table of contents, related posts and the author.
8 variants · Blog
Step 3 / 6 · Long reads
Long read
A calm reading layout with table of contents and pull quotes for long texts.
The article itself, set for reading. Sidenotes beside the text, footnotes with previews, pictures in four widths, chapters with a rail that fills and an essay with initial and pull quote.
5 variants · Long read
Step 4 / 6 · Authors and interviews
Author page
Authors with portrait and articles build trust in the people who write.
The people who write. An author profile with their articles, the directory of contributors, the masthead of an editorial team, a box with writer, reviewer and checks, and a byline for several authors.
5 variants · Author page
Step 5 / 6 · Blog
Comments
Comments turn readers into a community and keep them on the page.
Threads with replies, a form first layout, questions with answers and a compact summary. New comments appear in place.
4 variants · Comments
Step 6 / 6 · Newsletter
Newsletter
The sign-up at the end of an article meets readers when they liked what they read.
Sign-up forms with a real label, email type, autocomplete, error and success states.
7 variants · Newsletter

Install all of it at once

One command puts every component of this collection into your project.

aiw add @ai-website/magazine-front @ai-website/blog @ai-website/long-read @ai-website/author-page @ai-website/comments @ai-website/newsletter

Prompt for your AI assistant

Hand Claude, Cursor, Copilot or Codex the order and it builds the page from exactly these parts.

Build a blog or magazine with the UI Kit. Use Magazine front, Blog, Long read, Author page, Comments and Newsletter in this order. Write real copy for my offer and check the page in light and dark.

The order

Magazine front

Blog

Long read

Author page

Comments

Newsletter

Install all of it at once

Prompt for your AI assistant

More collections