The Body of an Article

Everything you are reading on this page sits inside a single Article Content Module, running live while it explains itself. It keeps your content at a comfortable width: headings, paragraphs, lists, images and quotations all held to a line length that is easy to read.

The source

This is the whole module. Your article goes where the placeholder stands, written as plain headings, paragraphs, lists and figures:

<div class="module-article-content">
  [[article-content]]
</div>

The classes "page-width" and "full-width" are not part of this module. They are global classes you add to a single image inside your content when you want it to break out wider, which is why they are not in the block above.

What it is for

The Article Content Module holds your writing at a comfortable width, so a line of text never gets so long that it is hard to read.

Other modules have named slots to fill: a title here, an image there. This one is different – you write your article the normal way, and the module takes care of how wide it reads.

How to use it

Drop the block below into the body of your page and write your post inside it. You don’t touch any layout or styling, and you don’t add width classes to your text. In return you get two things:

the Article Content width on every element by itself, so paragraphs, headings and lists all line up;
the option to let a single image step out of that width when you want it wider, by adding one class to that image.

An image can take one of three widths. The rest of this page shows all three in a real flow of text, with the markup named beside each one.

An image at Article Content width

With no class on it, an image sits as wide as the text around it. This is the everyday case.

<img src="..." alt="...">

<figure>
  <img src="..." alt="...">
  <figcaption>A caption for the image.</figcaption>
</figure>

A lone figure on a rooftop above still floodwater — No class: the image keeps to the Article Content width.

An image at page width

Give the image the class "page-width" and it grows out to the site's page width, the normal content column. The caption underneath stays at the Article Content width, because a caption is text and belongs on the same line as the running text.

<img src="..." alt="..." class="page-width">

<figure class="page-width">
  <img src="..." alt="...">
  <figcaption>A caption for the image.</figcaption>
</figure>

The same rooftop view, shown as wide as the page — Page width: the image is wider, this caption is not.

An image across the full screen

Give the image the class "full-width" and it runs from one edge of the screen to the other. It only reaches the real screen edge when the module sits in a column that reaches the edge too, as it does on this page. As with page width, the caption stays at the Article Content width, because a caption is text.

<img src="..." alt="..." class="full-width">

<figure class="full-width">
  <img src="..." alt="...">
  <figcaption>A caption for the image.</figcaption>
</figure>

The same view stretched across the full width of the screen — Full width: the image reaches both edges of the screen.

Text picks up again

After a wide image the text goes back to the Article Content width, so the wide pictures read as a break in the column, not a change to it. A list does the same:

the list keeps to the Article Content width,
and so does the paragraph after it.

A quotation sits at the Article Content width too, because it carries no width class of its own.

The width has held through headings, images, a list and a quote, which is what this module is for.