Articles

Articles group long-form narratives—release notes, case studies, deep dives—into a structured, readable block. A clear header, thoughtful metadata, and predictable body styling keep readers oriented while letting the content take center stage.

Use the article pattern whenever a page needs its own title, byline, and supporting media. Pair text with figures, quotes, and tags only when they clarify the story, and keep semantics tight so assistive tech can follow the publication flow.

Structure

Article layout is built on semantic HTML: wrap the story in <article>, place the title and metadata in a <header>, and close with a <footer> for tags or related links. Nausikaä styles these parts when they are direct children of the article. When the markup can’t use an <article> element, the class article gives any element the same styling.

The princess and the stranger

Posted on May 12, 2019 by Homer

Nausicaä and her maidens bring Odysseus food and wine

On the shore of Scheria, the princess Nausicaä and her maidens have come to wash the royal clothes in the river. When their ball rolls into the water and they cry out, a stranger wakes in the bushes nearby: Odysseus, shipwrecked and exhausted after days at sea.

Her companions run, but Nausicaä stays. Odysseus speaks to her carefully from a distance, and she answers with kindness: he is given food, wine, clothing and a chance to bathe in the river before he goes on.

She tells him how to reach her father’s palace, and asks him to walk the last stretch on his own, so the townspeople will not gossip about the princess arriving with an unknown man. With her help, Odysseus reaches the court of the Phaeacians and finally finds a ship to take him home.

<article>
  <header>
    <h2>Article title</h2>
    <div class="meta">
      Posted on <time datetime="2019-05-12">May 12, 2019</time> by <a href="...">...</a>
    </div>
  </header>

  <p>...</p>

  <footer>...</footer>
</article>

Part	Styling
`<header>`	Separated from the text with a dotted line. Headings inside it lose their bottom margin, so the metadata sits directly below the title.
`.meta`	Muted text for the date, author and similar details. Links and dates inside it take on the same muted color.
`<footer>`	Muted text below a dotted line, for tags, categories or links to related articles.

Keep it navigable: include a descriptive alt on images, add a datetime attribute to <time> for machine-readable dates, and keep author links accessible with clear focus styles.

Sections

Split a long article into <section> elements, each with its own heading. Sections that are direct children of an article are separated by a solid line; the last one has no line, so the article footer isn’t doubled up. Use the class section on other elements for the same result.

Nausicaä in art

Three centuries of the same meeting

The Baroque

Seventeenth-century painters such as Pieter Lastman favoured the dramatic moment: the maidens scattering in fright while Odysseus kneels as a suppliant before the princess.

The nineteenth century

Later artists turned to quieter scenes. Frederic Leighton painted Nausicaä alone, leaning against a pillar, as if she were remembering the stranger after he had gone.

Beyond painting

The name travelled far beyond Greek myth, most famously to the heroine of Hayao Miyazaki’s Nausicaä of the Valley of the Wind.

<article>
  <header>...</header>

  <section>
    <h3>...</h3>
    <p>...</p>
  </section>

  <section>...</section>
</article>