Country flags live

Flags are used to show the origin of a product.

Example

Example

  • Argentina
  • Australia
  • Austria
  • Bulgaria
  • Chile
  • England
  • France
  • Germany
  • Hungary
  • Ireland
  • Italy
  • Lebanon
  • New Zealand
  • Portugal
  • Russia
  • Scotland
  • South Africa
  • Sweden
  • UK
  • USA

HTML

                                    
<ul class="coop-u-list-bare coop-c-list-tags">
    <li class="coop-c-list-tags__icon  coop-c-icon">
        <img class="coop-c-list-tags__icon__left" src="https://www.coop.co.uk/products/assets/static/images/wine/countrys/argentina.svg" alt="" height="28" width="28">
        <span>Argentina</span>
    </li>
    <li class="coop-c-list-tags__icon coop-c-icon">
        <img class="coop-c-list-tags__icon__left" src="https://www.coop.co.uk/products/assets/static/images/wine/countrys/australia.svg" alt="" height="28" width="28">
        <span>Australia</span>
    </li>
    <li class="coop-c-list-tags__icon  coop-c-icon">
        <img class="coop-c-list-tags__icon__left" src="https://www.coop.co.uk/products/assets/static/images/wine/countrys/austria.svg" alt="" height="28" width="28">
        <span>Austria</span>
    </li>
    <li class="coop-c-list-tags__icon  coop-c-icon">
        <img class="coop-c-list-tags__icon__left" src="https://www.coop.co.uk/products/assets/static/images/wine/countrys/bulgaria.svg" alt="" height="28" width="28">
        <span>Bulgaria</span>
    </li>
    <li class="coop-c-list-tags__icon  coop-c-icon">
        <img class="coop-c-list-tags__icon__left" src="https://www.coop.co.uk/products/assets/static/images/wine/countrys/chile.svg" alt="" height="28" width="28">
        <span>Chile</span>
    </li>
    <li class="coop-c-list-tags__icon coop-c-icon">
        <img class="coop-c-list-tags__icon__left" src="https://www.coop.co.uk/products/assets/static/images/wine/countrys/england.svg" alt="" height="28" width="28">
        <span>England</span>
    </li>
    <li class="coop-c-list-tags__icon coop-c-icon">
        <img class="coop-c-list-tags__icon__left" src="https://www.coop.co.uk/products/assets/static/images/wine/countrys/france.svg" alt="" height="28" width="28">
        <span>France</span>
    </li>
    <li class="coop-c-list-tags__icon coop-c-icon">
        <img class="coop-c-list-tags__icon__left" src="https://www.coop.co.uk/products/assets/static/images/wine/countrys/germany.svg" alt="" height="28" width="28">
        <span>Germany</span>
    </li>
    <li class="coop-c-list-tags__icon coop-c-icon">
        <img class="coop-c-list-tags__icon__left" src="https://www.coop.co.uk/products/assets/static/images/wine/countrys/hungary.svg" alt="" height="28" width="28">
        <span>Hungary</span>
    </li>
    <li class="coop-c-list-tags__icon coop-c-icon">
        <img class="coop-c-list-tags__icon__left" src="https://www.coop.co.uk/products/assets/static/images/wine/countrys/ireland.svg" alt="" height="28" width="28">
        <span>Ireland</span>
    </li>
    <li class="coop-c-list-tags__icon coop-c-icon">
        <img class="coop-c-list-tags__icon__left" src="https://www.coop.co.uk/products/assets/static/images/wine/countrys/italy.svg" alt="" height="28" width="28">
        <span>Italy</span>
    </li>
    <li class="coop-c-list-tags__icon coop-c-icon">
        <img class="coop-c-list-tags__icon__left" src="https://www.coop.co.uk/products/assets/static/images/wine/countrys/lebanon.svg" alt="" height="28" width="28">
        <span>Lebanon</span>
    </li>
    <li class="coop-c-list-tags__icon coop-c-icon">
        <img class="coop-c-list-tags__icon__left" src="https://www.coop.co.uk/products/assets/static/images/wine/countrys/new-zealand.svg" alt="" height="28" width="28">
        <span>New Zealand</span>
    </li>
    <li class="coop-c-list-tags__icon coop-c-icon">
        <img class="coop-c-list-tags__icon__left" src="https://www.coop.co.uk/products/assets/static/images/wine/countrys/portugal.svg" alt="" height="28" width="28">
        <span>Portugal</span>
    </li>
    <li class="coop-c-list-tags__icon coop-c-icon">
        <img class="coop-c-list-tags__icon__left" src="https://www.coop.co.uk/products/assets/static/images/wine/countrys/russia.svg" alt="" height="28" width="28">
        <span>Russia</span>
    </li>
    <li class="coop-c-list-tags__icon coop-c-icon">
        <img class="coop-c-list-tags__icon__left" src="https://www.coop.co.uk/products/assets/static/images/wine/countrys/scotland.svg" alt="" height="28" width="28">
        <span>Scotland</span>
    </li>
    <li class="coop-c-list-tags__icon coop-c-icon">
        <img class="coop-c-list-tags__icon__left" src="https://www.coop.co.uk/products/assets/static/images/wine/countrys/south-africa.svg" alt="" height="28" width="28">
        <span>South Africa</span>
    </li>
    <li class="coop-c-list-tags__icon coop-c-icon">
        <img class="coop-c-list-tags__icon__left" src="https://www.coop.co.uk/products/assets/static/images/wine/countrys/sweden.svg" alt="" height="28" width="28">
        <span>Sweden</span>
    </li>
    <li class="coop-c-list-tags__icon coop-c-icon">
        <img class="coop-c-list-tags__icon__left" src="https://www.coop.co.uk/products/assets/static/images/wine/countrys/uk.svg" alt="" height="28" width="28">
        <span>UK</span>
    </li>
    <li class="coop-c-list-tags__icon coop-c-icon">
        <img class="coop-c-list-tags__icon__left" src="https://www.coop.co.uk/products/assets/static/images/wine/countrys/usa.svg" alt="" height="28" width="28">
        <span>USA</span>
    </li>
</ul>

                                    

Design and content

Flags on cards

Flags can be used on a product card - but if used should not be clickable, as cards can only contain one link.

Flags on pages

On a specific page flags 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 flags in use on coop.co.uk/products/wine.

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