Editorial card live

An editorial card contains a small piece of prose information on one subject that people can get more information about by tapping or clicking on the card.

Example

Example

HTML

                                    
<article class="coop-c-editorialcard">
    <a
        href="#"
        class="coop-c-editorialcard__link"
        data-contenttype=""
        data-contentparent=""
        data-linktext=""
    >
        <div class="coop-c-editorialcard__inner">
            <figure class="coop-c-editorialcard__media">
                <picture class="coop-c-editorialcard__image">
                    <!-- if browser supports webp image format, serve the webp format-->
                    <source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=webp&amp;q=60&amp;fit=thumb&amp;w=618&amp;h=346 1x" type="image/webp">
                    <source srcset="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=webp&amp;q=60&amp;fit=thumb&amp;w=618&amp;h=346 1x" type="image/webp">
                    <!-- if no webp supported then default to serve progressive jpeg -->
                    <source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=jpg&amp;q=60&amp;fit=thumb&amp;w=618&amp;h=346 1x" type="image/jpeg">
                    <source srcset="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=jpg&amp;q=60&amp;fit=thumb&amp;w=618&amp;h=346 1x" type="image/jpeg">
                    <!-- fallback -->
                    <img src="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=jpg&amp;q=60&amp;fit=thumb&amp;w=618&amp;h=346" width="618" height="346" alt="">
                 </picture>
            </figure>
            <div class="coop-c-editorialcard__content">
                <header class="coop-c-editorialcard__header">
                    <h3 class="coop-c-editorialcard__title">
                        <span>Find out the difference <span class="coop-u-nowrap">Co-op</span> makes as we celebrate 25 years of Fairtrade</span>
                    </h3>
                </header>
            </div>
        </div>
    </a>
</article>

<article class="coop-c-editorialcard">
    <a
        href="#"
        class="coop-c-editorialcard__link"
        data-contenttype=""
        data-contentparent=""
        data-linktext=""
    >
        <div class="coop-c-editorialcard__inner">
            <figure class="coop-c-editorialcard__media">
                <picture class="coop-c-editorialcard__image">
                    <!-- if browser supports webp image format, serve the webp format-->
                    <source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=webp&amp;q=60&amp;fit=thumb&amp;w=618&amp;h=346 1x" type="image/webp">
                    <source srcset="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=webp&amp;q=60&amp;fit=thumb&amp;w=618&amp;h=346 1x" type="image/webp">
                    <!-- if no webp supported then default to serve progressive jpeg -->
                    <source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=jpg&amp;q=60&amp;fit=thumb&amp;w=618&amp;h=346 1x" type="image/jpeg">
                    <source srcset="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=jpg&amp;q=60&amp;fit=thumb&amp;w=618&amp;h=346 1x" type="image/jpeg">
                    <!-- fallback -->
                    <img src="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=jpg&amp;q=60&amp;fit=thumb&amp;w=618&amp;h=346" width="618" height="346" alt="">
                 </picture>
            </figure>
            <div class="coop-c-editorialcard__content">
                <header class="coop-c-editorialcard__header">
                    <p class="coop-c-editorialcard__subtitle">Fairtrade</p>
                    <h3 class="coop-c-editorialcard__title">
                        <span>Find out the difference <span class="coop-u-nowrap">Co-op</span> makes as we celebrate 25 years of Fairtrade</span>
                    </h3>
                </header>
            </div>
        </div>
    </a>
</article>

<article class="coop-c-editorialcard">
    <a
        href="#"
        class="coop-c-editorialcard__link"
        data-contenttype=""
        data-contentparent=""
        data-linktext=""
    >
        <div class="coop-c-editorialcard__inner">
            <figure class="coop-c-editorialcard__media">
                <picture class="coop-c-editorialcard__image">
                    <!-- if browser supports webp image format, serve the webp format-->
                    <source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=webp&amp;q=60&amp;fit=thumb&amp;w=618&amp;h=346 1x" type="image/webp">
                    <source srcset="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=webp&amp;q=60&amp;fit=thumb&amp;w=618&amp;h=346 1x" type="image/webp">
                    <!-- if no webp supported then default to serve progressive jpeg -->
                    <source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=jpg&amp;q=60&amp;fit=thumb&amp;w=618&amp;h=346 1x" type="image/jpeg">
                    <source srcset="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=jpg&amp;q=60&amp;fit=thumb&amp;w=618&amp;h=346 1x" type="image/jpeg">
                    <!-- fallback -->
                    <img src="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=jpg&amp;q=60&amp;fit=thumb&amp;w=618&amp;h=346" width="618" height="346" alt="">
                 </picture>
            </figure>
            <div class="coop-c-editorialcard__content">
                <header class="coop-c-editorialcard__header">
                    <p class="coop-c-editorialcard__subtitle">Fairtrade</p>
                    <h3 class="coop-c-editorialcard__title">
                        <span>Find out the difference <span class="coop-u-nowrap">Co-op</span> makes as we celebrate 25 years of Fairtrade</span>
                    </h3>
                </header>
                <div class="coop-c-editorialcard__body">
                    <p>Join us in celebrating 25 years of Fairtrade by enjoying products that carry the Fairtrade Mark, or holding your own Fairtrade party.</p>
                </div>
            </div>
        </div>
    </a>
</article>

                                    

Design and content

An editorial card gives people enough information to make a considered decision whether to click or tap. It is a good way of presenting content consistently without overloading a page with information.

An editorial card displays an image and short title with options to include a supporting line or contextual title. It links to a single destination.

The editorial card can have an optional label to show a category or tag associated with the content or a paragraph if the title alone does not describe the content accurately.

Cards are responsive and adapt well to changing views, whether displaying few cards or many.

Editorial cards are ideal for presenting general, prose information on different subjects. If you are using cards to present a group of items that share common features or characteristics, for example data imported from a spreadsheet, consider using product cards instead.

See examples of the editorial card component in use on coop.co.uk.

Accessibility

Don’t use buttons or links to other destinations within a card as this may cause confusion or uncertainty for users.

The entirety of a card should be active, to create a large, easily clickable area.

For more information see our general guide on accessibility.

Suggest a pattern or change

Use this form to suggest a new pattern or a change to an existing one.

Suggest a new pattern or a change