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



    A good use of sashes is to call out extra information such as a discounted price, or a preferred choice. These sashes are intended for use with panels or feature blocks.


    A left or right modifier is a requirement for a working sash.

    sash left

    <div class="sash sash--left">
        <div class="sash__content">sash left</div>

    sash right

    <div class="sash sash--right">
        <div class="sash__content">sash right</div>


    The default sash is typically used to communicate promotional information e.g. a discount. The highlight variant is typically used to highlight a new or promoted item.

    sash highlight

    <div class="sash sash--left sash--highlight">
        <div class="sash__content">new</div>