Country flags

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/countries/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/countries/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/countries/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/countries/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/countries/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/countries/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/countries/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/countries/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/countries/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/countries/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/countries/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/countries/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/countries/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/countries/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/countries/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/countries/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/countries/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/countries/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/countries/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/countries/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.