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



    Links should always use clear messaging and accurately convey the meaning of the link. Avoid using an icon alone in a link. Icons should be used to support a text description rather than replace it entirely.

    It's important to maintain consistency on elements that the user can interact with but there are also times where the default link style is not appropriate so we've created some link utility classes to help with this.


    Links inside a long text block should be left as default style and affect the most relevant part of the text. Avoid single word links where possible.

    You find out more about the history of world war 2 at our world war 2 wiki and if you have any further questions please get in touch via one of the methods on our contact page. Alternatively you can visit a nearby library.

    inverse links

    When a link is positioned over a dark background or a dark image you might need to invert the colours. Uses the .link-inverse class.

    transparent image links

    A link around a transparent image would be given the standard link background colour on focus. This might not always be appropriate and can be removed by using the .link-img class.

    aside links

    This is not intended to replace navigation but it can be appropriate to visually separate a single link from a body of text. Uses the .link-aside class.

    showing 1 to 50 of 243 snacks view all

    meta links

    Meta links are to be used when a link has low importance, is not a primary call to action and may detract from other nearby information if it uses the default link style. Suitable for use as a close or remove action. Uses the .link-meta class.

    Add to Pinterest

    fruit and seed summer mix

    non wrapping links

    Especially useful for when an icon is used in a standard link and you want to ensure the icon is always on the same line as the rest of the link. Uses the .link-nowrap class.

    without link-nowrap
    with link-nowrap