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>

    sash sale

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

    sash new

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

    sash most popular

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

    sash recipe

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