MeDo

AI Article Content Layout Generator.

Describe the article experience and MeDo composes the whole page — a reading-width body, a sticky table of contents that tracks the reader's place, pull quotes, a share rail, an author block, and related posts — with anchor spacing and mobile reflow handled from the start.

Article Content Layout
A

A Long Read Is Won at the Start and Kept by the Layout

Landing pages fight for attention; a long article has already won it, and the layout's only job is to not lose it. That reduces to three obligations. Protect the reading column: prose holds comprehension around 60-75 characters per line, and every element that squeezes the column below that taxes the reader to pay for something they did not ask for. Maintain orientation: past a thousand words nobody holds the structure in their head, which is the job the sticky table of contents, the progress bar, and anchor-linked headings do — answering where am I, how much is left, how do I get back. Place the exits deliberately: the share rail, the author block, and the related-posts row are how a finished reader becomes a subscriber or a three-page session, and stacking them all after the last paragraph wastes the mid-article moments when interest peaks. An article layout that choreographs those three jobs is the difference between a page and a text dump.

4 plantillas

Plantillas de Article Content Layout que puedes generar

Cada plantilla es un prompt real, no una captura de pantalla. Cópialo en cualquier editor de IA o ejecútalo en MeDo y obtén código React + Tailwind.

Three-regionSticky-TOC Long Read

TOC Rail, Body, Share Rail

The engineering-blog arrangement: orientation on the left, prose in the middle, actions on the right, all holding their places while the reader scrolls.

Create a three-region article layout: a left rail 240px wide holding a sticky table of contents that lists h2 anchors and highlights the current section with IntersectionObserver; a center prose column capped at 68 characters with 20px paragraph spacing, full-column code blocks on zinc-900, and scroll-margin-top of 96px on every heading; and a right rail with a sticky vertical share bar — three icon buttons plus copy-link with a two-second tooltip confirmation. Add a 3px indigo progress bar fixed under the header. After the body, render an author bio card and a related row of three same-category posts. Below xl, fold the TOC into a disclosure above the body and move the share buttons to a row at the end.

Prueba en MeDo
Single columnMinimal Essay

Prose, Progress, Nothing Else

For pieces under 1,200 words where the writing is the design: one column, a progress bar, a byline. The layout declines to compete.

Create a minimal essay layout: a single centered prose column at 640px on a white page, 21px serif body text, 20px paragraph spacing, no table of contents, no rails, no sidebar. Above the text, a compact byline row — avatar, name, date, read time. A 3px progress bar fixed under the header fills with scroll, the only persistent element. Blockquotes render as oversized italic lines at 24px with a hairline left rule. At the end, one author line and a text link to the archive. Generous 96px padding above and below. On mobile nothing changes except the type scale stepping down one size — the composition is already single column.

Prueba en MeDo
EditorialMagazine Feature

Pull Quotes and Designed Pauses

Long features that read as designed objects: pull quotes breaking the column rhythm, generous section spacing, share actions that travel with the reader.

Create a magazine-feature article layout: a centered prose column at 68 characters with a 20px sans headline at 44px, a serif body, and an optional drop cap on the first paragraph. Every third section, render a pull quote from the text as a 32px italic line breaking the column at full width with 64px vertical breathing room. Images bleed to 960px — wider than the text but not the viewport — with rounded corners and captions in 13px zinc-500. A slim share rail sticks to the right of the column from lg up. After the body: author card, then a related grid of three. Keep section spacing at 64px so the page breathes like an edit, not a feed.

Prueba en MeDo
ReferenceDocs-Style Explainer

Numbered Steps With Persistent Orientation

For tutorials and how-tos readers keep open while working: numbered structure, persistent orientation, and a feedback escape hatch at the end.

Create a docs-style article layout: a left sticky table of contents 260px wide with numbered sections and current-section highlight, a prose column at 68 characters where each h2 renders with its section number, and callout boxes — Note, Warning — as tinted panels with icons. Code snippets get copy buttons that confirm with a check icon. Headings carry scroll-margin-top of 96px and copy-link anchors. At the end, a Was-this-helpful widget with yes and no buttons writing to console placeholders, then two related articles as compact rows. On mobile the TOC becomes a numbered disclosure above the body. Optimize the whole arrangement for a reader with one hand on the keyboard.

Prueba en MeDo

Cómo personalizar tu Article Content Layout

Set the measure once and defend it

Pick the reading width — 60-75 characters, roughly 680-720px — and make it a layout constant. Embedded elements may widen to the column: full-column code blocks, full-column quotes, full-column images. What they must never do is widen to the viewport, because every line past 75 characters measurably hurts return-sweep reading.

Treat anchor offsets as part of the heading

Every h2 and h3 that can be deep-linked needs scroll-margin-top matching the sticky header height, or every shared link lands with its heading hidden above the fold. Generate the heading slugs, the offset, and the table-of-contents links from the same source so they cannot disagree.

Give the table of contents a breakpoint plan

The sticky left rail earns its place from about 1,200 words or four h2 sections upward. Below that, or below xl screens, it collapses into a disclosure above the body. Mid-article highlight via IntersectionObserver is what turns it from a list of links into a map of where the reader is.

Choose related posts by the reader's next question

The related row is a routing decision, not a decoration: same category or tag first, recency as the tiebreak, three cards, done. Pulling from the whole corpus by date puts whatever was published last next to the reader's actual interest — the surest way to make the row invisible.

Quién usa el componente Article Content Layout

Engineering blog

Code blocks at full column width, a sticky section-tracking table of contents, and copy-link anchors on every heading — built for readers who arrive from search mid-article and need to orient in one glance.

Digital magazine feature

Pull quotes as typographic events, a reading-progress bar, a share rail, and a related grid at the end — the arrangement treats the piece as a designed object worth lingering on.

Founder essay

The minimal composition: one centered column, a progress bar, no table of contents, an author line at the end. Proof the pattern scales down when the prose carries everything.

Help center article

A reference-shaped variant: table of contents on the left, numbered steps in the body, a feedback widget and related articles at the end, all optimized for readers who want one answer fast.

Patrones de Article Content Layout para distintos sitios web

El mismo componente article content layout, adaptado al tipo de sitio donde se publica.

01 / 04

Engineering and Developer Blogs

Code-heavy bodies demand full-column code blocks, copy-link headings, and a TOC that survives deep links from search — the three-region arrangement exists for exactly this reader.

Estilos y variantes de Article Content Layout

Elige la variante que encaje con el resto de la página y genérala.

01 / 04

Centered Column

One prose column, max-width defended, everything else removed. The style that ages slowest and fails least — the right default unless a specific region earns its place.

Article Content Layout en React, Next.js, Vue y Svelte

React, Next.js, Vue 3, SvelteKit, Astro o HTML puro: el mismo article content layout, seis formas de integrarlo.

01 / 03

React Article Layout

The region scaffold as slots: TOC, body, and share rail are regions of one grid, the rails go sticky at their breakpoints, and the related row is a collection rendering inside the article.

src/components/ArticleLayout.tsx

export function ArticleLayout({ toc, share, related, children }) {
  return (
    <div className='mx-auto grid max-w-[1200px] grid-cols-1 gap-10 px-6
                    xl:grid-cols-[240px_minmax(0,1fr)_56px]'>
      <aside className='hidden xl:block'>
        <nav aria-label='On this page' className='sticky top-24 text-sm'>
          {toc}
        </nav>
      </aside>

      <article className='max-w-[68ch]'>
        {children}
        <AuthorBio />
      </article>

      <div className='sticky top-24 hidden h-fit lg:block'>{share}</div>

      <section aria-label='Related posts' className='xl:col-start-2'>
        {related}
      </section>
    </div>
  )
}

Cómo añadir tu Article Content Layout a un proyecto

Cuatro pasos, desde elegir una plantilla de article content layout hasta llevarlo a producción.

01~10min

Let the Content Declare Its Regions

Count the words and the h2 sections before prompting. Past 1,200 words the TOC rail earns its place; below it, the minimal composition is honest. Pull quotes need quotable paragraphs, so check the draft has them.

02~5min

Set the Typographic Constants

Fix the measure — 60-75 characters — the heading scale, and the scroll offset for anchors as three named decisions. These constants are what every region sizes itself against.

03~2min

Generate the Composition

Describe the regions and their breakpoints in one prompt. MeDo generates the grid, the sticky behavior, the progress bar, and the mobile reflow as one arrangement rather than four widgets to assemble.

04~5min

Test the Motion and the Reflow

Click a TOC link and confirm the heading clears the header, scroll and watch the highlight track sections, share to confirm the tooltip, then narrow to mobile and check the TOC disclosure. The composition is proven at its seams, not in the middle.

Preguntas frecuentes sobre Article Content Layout

What is the ideal reading width for a blog post?

60-75 characters per line, which lands around 680-720px at typical body sizes. Shorter lines force constant eye-tracking resets; longer ones make the eye's return sweep to the next line error-prone, and comprehension drops measurably past 75. Fix it as a max-width on the prose column and let every embedded element — code, quotes, images — size to that column, never to the viewport.

Does every article need a table of contents?

No — it starts paying for itself around 1,200 words or four h2 sections. Below that, a rail of five links is chrome without a job. The full treatment for short pieces is a single centered column with nothing but the prose and an author line at the end. Note the division of labor too: the table-of-contents page covers the widget itself; this pattern decides where it sits, when it appears, and how it reflows.

How is this different from a post collection?

This pattern composes the regions of one article — body, TOC, share rail, author block, related row — around a reading column. A post collection organizes many posts into an index or archive with filtering and pagination. They meet at the related-posts row: that row is a post collection rendering three cards inside an article layout, which is why generating both from the same card component keeps the site coherent.

Are social share buttons still worth the space?

In their current form, mostly no: row-of-six share bars see negligible clicks. What still works is the unglamorous subset — copy-link with a confirmation tooltip, native mobile share, and one or two networks your audience actually uses. Placement beats quantity: a quiet persistent rail beside the column outperforms a banner at the end, where the reader is already leaving.

How do heading anchor links avoid landing under the sticky header?

Every anchorable heading gets scroll-margin-top equal to the header's height, so the browser reserves that space when jumping to the hash. Generate it on all h2 and h3 elements from the start — retrofitting means hunting down every heading style — and keep the TOC links, the copy-link buttons, and the heading slugs generated from one source so a renamed section updates everywhere at once.

Should the author bio go at the top or the bottom of the article?

Both placements exist inside this layout and do different work: a compact byline row under the headline establishes credibility before reading — the convention for news and YMYL topics — while the fuller author card after the body converts a convinced reader into a follower. Many publications run both, generated from the same author record so the face and claims match. If you can only afford one, put the full card at the end, where curiosity about the source peaks.

Genera tu article content layout ahora.

Prueba cualquier prompt — gratis, sin registro.

Empieza gratisVer precios
T

Table of Contents

Describe the article and MeDo generates the wayfinding — a sticky rail or inline disclosure built from your headings, scroll-spy that highlights the section at the reading line, deep links that clear the header, and a mobile collapse that does not eat the viewport.

Componentes relacionados
S

Social Share

Describe your audience and MeDo generates the bar that catches the impulse — channel intent links with canonical URLs, copy link with real feedback, the native share sheet on phones — and the placement guidance to put it where conviction forms, not where templates default.

Componentes relacionados
A

Author Bio

Describe the writer and MeDo generates an author bio block — a face that matches the byline, a two-sentence case for their expertise on this specific subject, links a skeptical reader can verify, and a more-from-this-author entry at the end of every article you publish.

Componentes relacionados
P

Post Collection

A blog index, a category archive, and a tag page are one pattern wearing different arrangements. Describe your corpus and MeDo generates the whole collection — featured placement, card or list density, URL-driven filtering, pagination, and the loading and empty states in between.

Componentes relacionados