Pistachio the front end framework and pattern library for graze.com

contents:


    Health badges

    An important part of our brand, health badges are used to call out the nutritional benefits of a product. There are some geographical variations to take into account that are documented here.

    Health badge types

    calorie number

    This health badge must have a value specified for the amount of calories.

    only 130 calories

    <a href="#0" class="health-badge health-badge--calories">
        <span aria-hidden="true">130</span>
        <span class="sr-only">only 130 calories</span>
    </a>

    Low calorie

    150 calories and under

    <a href="#0" class="health-badge health-badge--lowcal">
        <span class="sr-only">150 calories and under</span>
    </a>

    Fibre

    UK

    high in fibre

    <a href="#0" class="health-badge health-badge--fibre-uk">
        <span class="sr-only">high in fibre</span>
    </a>

    USA

    high in fiber

    <a href="#0" class="health-badge health-badge--fibre-us">
        <span class="sr-only">high in fiber</span>
    </a>

    Fruit

    UK

    1 of your recommended 5 pieces of fruit and vegetables a day

    <a href="#0" class="health-badge health-badge--fruit-uk">
        <span class="sr-only">1 of your recommended 5 pieces of fruit and vegetables a day</span>
    </a>

    USA

    Half cup of fruit = 25% of the recommended daily amount

    <a href="#0" class="health-badge health-badge--fruit-us">
        <span class="sr-only">Half cup of fruit = 25% of the recommended daily amount</span>
    </a>

    Star

    UK

    health star

    <a href="#0" class="health-badge health-badge--star-uk">
        <span class="sr-only">health star</span>
    </a>

    USA

    Nutritionist pick

    <a href="#0" class="health-badge health-badge--star-us">
        <span class="sr-only">Nutritionist pick</span>
    </a>

    Protein

    A source of protein

    <a href="#0" class="health-badge health-badge--protein">
        <span class="sr-only">A source of protein</span>
    </a>

    Vitamins

    A source of at least two vitamins and minerals

    <a href="#0" class="health-badge health-badge--vitamins">
        <span class="sr-only">A source of at least two vitamins and minerals</span>
    </a>

    Wholegrain

    Contains wholegrain

    <a href="#0" class="health-badge health-badge--wholegrain">
        <span class="sr-only">Contains wholegrain</span>
    </a>

    Grouped health badges

    When two or more health badges are next to each other, they overlap slightly. There should be a maximum of 3 health badges per product.

    high in fibre A source of at least two vitamins and minerals A source of protein

    Usage without links

    Ideally health badges would be used as a navigation aid and on click would filter by health badge or direct users to a page that collects all products that contain that health badge. If this is not possible, use of a div element is appropriate.

    only 130 calories

    <div class="health-badge health-badge--calories">
        <span aria-hidden="true">130</span>
        <span class="sr-only">only 130 calories</span>
    </div>