Tags live

A tag shows a particular feature of an item such as a recipe or product, enabling users to quickly see important common properties, and make a choice. A tag may link to another page, for example a category page for vegan recipes, red wine, or Fair Trade.




<ul class="coop-c-list-tags">
    <li class="coop-c-tag coop-c-tag--gluten-free">
        <a href="#" class="coop-c-tag__link">Gluten Free</a>
    <li class="coop-c-tag coop-c-tag--vegan">
        <a href="#" class="coop-c-tag__link">Vegan</a>
    <li class="coop-c-tag coop-c-tag--vegetarian">
        <a href="#" class="coop-c-tag__link">Vegetarian</a>
    <li class="coop-c-tag coop-c-tag--co-op-irresistible">
        <a href="#" class="coop-c-tag__link">Irresistible</a>
    <li class="coop-c-tag">
        <a href="#" class="coop-c-tag__link">Nut Free</a>
    <li class="coop-c-tag ">
        <a href="#" class="coop-c-tag__link" >Ros&eacute;</a>
    <li class="coop-c-tag ">
        <a href="#" class="coop-c-tag__link" >Fairtrade</a>
    <li class="coop-c-tag ">
        <a href="#" class="coop-c-tag__link" >Award winning</a>


Design and content

Tags show the most distinctive common properties of an object such as a product. Tags don’t move or animate.

Tags on pages

On a specific page all relevant tags can be shown. Used in this context tags can be tappable or clickable to link to a page displaying other items that share the same property.

See examples of tags in use on coop.co.uk/recipes and coop.co.uk/products/wine.


Interactive tags show an underlined link within a lozenge shape. A tag must be large enough for people to activate it easily and the text within them be clear.

Multiple tags must have sufficient space between them, if they are placed too close to each other, they may be difficult for people to tap or click on.

For more information see our general guide on accessibility.

Related components

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