Article

When to use it

The Article component is used as a wrapper around a headline, ingress and/or body text on e.g. event pages.

Variants

The modifier .c-article--center centers the text, title and paragraphs, places list markers inside list items, and adds --space-l below the body.

TIP

To override the default image border radius, set --media-radius to a different value.

The title uses --font-poster, has a maximum width of 25ch, and uses --space-s for its vertical margins. Its text uses balanced wrapping and automatic hyphenation where supported.

The body uses --font-body-large with --fw-thin. Paragraphs and lists (p, ul, ol and dl) directly inside .c-article__body have a maximum width of 65ch. This width limit applies to the list container rather than individual list items. .c-video anywhere inside the body also has a maximum width of 65ch. Nested text blocks and other elements keep their own width styles.

Inside .c-article__body, direct sibling headings, paragraphs, lists, blockquotes and code blocks share a vertical rhythm:

• Content followed by a heading gets --space-xxl to separate sections.
• A heading followed by content, or a paragraph introducing a list, gets --space-s to keep related content together.
• Consecutive headings, paragraphs and other supported blocks get --space-m.
• These blocks have no leading or trailing margins at the edges of the body. List indentation is preserved, and nested content keeps its existing spacing.

What it looks like

Code examples

With image

<article class="c-article c-article--center">
    <div class="c-article__image">
        <img src="https://dd16h7yl5aaam.cloudfront.net/7c/f9fcb4eb1b662f98ae633361fee3c06a36c77a" alt="" />
    </div>
    <h1 class="c-article__title">BIG SLAP XL 2026 - JUSTIN BIEBER / MARTIN GARRIX</h1>
    <div class="c-article__body u-margin-bottom--large u-text--center">
        <p class="u-font--mono u-font--small">5 augusti 2026<br />
            <a href="#">Nyhamnen</a> i <a href="#">Malmö</a>
        </p>
        <a href="#" class="c-button c-button--primary">Köp biljett</a>
    </div>
</article>

Only body

<article class="c-article">
    <div class="c-article__body">
        <h2>Before your visit</h2>
        <h3>What should I bring?</h3>
        <p>Have your ticket ready when you arrive.</p>
        <p>You can find the entrance on the map included with your ticket.</p>
        <h3>When should I arrive?</h3>
        <p>Arrive before the event starts to allow time for admission.</p>
        <blockquote><p>Check your ticket for the opening time.</p></blockquote>
        <h3>How do I enter?</h3>
        <ol>
            <li>Go to the entrance shown on your ticket.</li>
            <li>Show your ticket to the staff.</li>
        </ol>
    </div>
</article>

Accessibility notes

The .c-article class is a CSS component used to style the content within the <article> element (or, slightly less better, a <div>). It provides specific styling rules to ensure a consistent appearance across different articles on the site.

The <article> element is an HTML5 semantic element used to represent a self-contained composition in a document, page, or site, which is intended to be independently distributable or reusable. It is typically used for blog posts, news articles, or forum posts.

It is important to use both appropriately: the <article> element for semantic structure and the .c-article class for visual styling.

TIP

Each <article> should have a heading and, if necessary, a footer. This helps screen readers and other assistive technologies to navigate and understand the structure of the content.