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

contents:


    alerts

    Alerts are used to display important information or direct feedback for an action that a user has just performed. Examples of this include ordering a box, making changes to an order or updating their account.

    They should appear at the top of the page, just below the navigation. Messages and links should all be written in sentence case (links will be forced lower case with CSS). 'Undo' links should be displayed if a user changes or deletes something.

    success

    The action the user performed has been successful, including deleting something.

    <div class="alert alert--success" role="alert">
        <p>
            The default address has been updated.
        </p>
        <a href="#">undo</a>
    </div>

    info

    General important information, not always related to a performed action.

    <div class="alert alert--info" role="alert">
        <p>
            Due to the bank holiday we'll start preparing your boxes early.
        </p>
        <a href="#">view cut-off times</a>
    </div>

    warning

    Information that flags a potential problem, not always related to a performed action.

    <div class="alert alert--warning" role="alert">
        <p>
            We noticed you've got quite a lot of these snacks binned. Make sure you rate more snacks as <i>try</i>, <i>like</i> or <i>love</i>.
        </p>
    </div>

    danger

    The action the user performed has failed or there is a serious problem with their account.

    <div class="alert alert--danger" role="alert">
        <p>
            Oh no! There was a problem with your account.
        </p>
        <a href="#">help me to fix it</a>
    </div>