Tickster Styleguide

Appearance

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 content.

What it looks like ​

Code examples ​

html
<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 2022 - 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 2022<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>
html
<article class="c-article">
    <div class="c-article__body">
        <p><strong>Big Slap</strong> - Södra Sveriges Största Musikfestival, en 2 dagars festival i centrala Malmö, breddar nu med en dag av livemusik och en dag EDM.</p>
        <p>Den <strong>5 &amp; 6 augusti</strong> 2022 tar Big Slap XL över <strong>Nyhamnen</strong> i Malmö.</p>
        <p><strong>HEADLINER FREDAG</strong>:</p>
        <h2>JUSTIN BIEBER</h2>
        <p><strong>HEADLINER LÖRDAG</strong>:</p>
        <h2>MARTIN GARRIX</h2>
        <p>Full line up släpps den 1 December 2021</p>
        <p>Då vi inte träffats sedan 2023 vill vi nu arrangera det största evenemanget någonsin i Malmö. Under 2 dagar siktar vi på 80 000 besökare och breddar Big Slap till 13+ så att fler kan ta del av detta arrangemang.</p>
    </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.