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.
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. Use paragraphs for the main narrative, sprinkle in figures or quotes for emphasis, and keep metadata concise with clear time stamps and author links.
Article header
Article sample content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis dui nec imperdiet tincidunt. Quisque luctus enim nunc, congue venenatis felis auctor in. Ut ut rutrum ipsum. Sed tempor, dolor id dignissim rhoncus, elit purus vestibulum mi, semper vehicula ante ipsum non lectus. Ut eu viverra neque. Mauris congue efficitur mauris, quis efficitur ante placerat et. Maecenas facilisis molestie massa sit amet sodales. Phasellus rutrum justo quis nulla vestibulum, eget mattis sapien blandit. Cras vitae risus nulla.
Sed dictum sem non eros suscipit pharetra. Aliquam posuere turpis at enim sodales, eu malesuada nibh vehicula. Cras dignissim nec lectus et aliquet. Duis sed nulla vitae nisi maximus consequat id a eros. Pellentesque sollicitudin libero at erat maximus, nec ullamcorper mi posuere.
Etiam ultrices placerat ligula sed bibendum. Fusce urna metus, sollicitudin at odio vitae, rutrum tincidunt orci. Praesent ultricies justo mi, at vehicula diam posuere eget. Maecenas gravida id nisi quis tempus. Fusce consectetur mauris non ligula aliquam, et fermentum est imperdiet. Cras vitae tortor sed dui mollis blandit. Maecenas aliquet purus ut egestas placerat. Vestibulum pharetra rhoncus nisi. Nunc dictum luctus metus. Donec placerat blandit urna, quis mollis erat fringilla eget.
Aliquam scelerisque viverra mi. Aenean eu fringilla dolor. In tristique tincidunt metus vitae interdum. Aliquam eu ante sit amet risus rhoncus finibus non quis lacus. Integer in semper nisl, vitae fringilla nisl. Integer non consectetur risus, fringilla facilisis justo. Donec lacinia id erat at imperdiet. Mauris mattis nunc orci, nec pharetra urna aliquam in.
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.
<article>
<header>
<h2>Article title</h2>
<div class="meta">...</div>
</header>
...
<footer>...</footer>
</article>