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

contents:


    features

    Feature banners and tiles can be used to showcase a product, category, or a link to related content such as blog posts. Please visit the example feature page for a demo.

    All images should be saved from photoshop via the "save for web" option at a suggested jpg quality size of 30.

    feature tiles

    Feature tiles have various options for layout and can be used in isolation or more usually as part of a feature tile grid of which you can find several examples further down this page.

    feature tile - square

    Feature squares are designed to work with a square image and should be used in one of the suggested layouts below such as square feature tile trio with text.

    • <a href="#0" class="feature feature--square" style="background-image:url('/images/feature/square-fudge.jpg');">
      </a>

    feature tile - half

    Half feature tiles are designed to work with a 2:1 ratio rectangle image and should be used in one of the suggested layouts below such as half feature tile trio with heading

    • <a href="#0" class="feature feature--half" style="background-image:url('/images/feature/half-cashew.jpg');">
      </a>

    feature tile - footer

    Add a .feature__footer to a feature tile.

    • <a href="#0" class="feature feature--square" style="background-image:url('/images/feature/square-fudge.jpg');">
          <p class="feature__footer">
              salted fudge and peanut cookie
          </p>
      </a>

    feature tile - heading

    Add a .feature__heading to a feature tile. Image choice is important here and this style works best with simple images that lack detail or are textured.

    • the running collection

    • <a href="#0" class="feature feature--square" style="background-image:url('/images/feature/half-doodle.jpg');">
          <h2 class="feature__heading">
              the running collection
          </h2>
      </a>

    feature tile with sash

    You can add a sash to a feature tile.

    • sash left
    • <a href="#0" class="feature feature--square" style="background-image:url('/images/feature/square-fudge.jpg');">
          <div class="sash sash--left">
              <div class="sash__content">sash left</div>
          </div>
          <p class="feature__footer">
              salted fudge and peanut cookie
          </p>
      </a>

    feature tile with stickers

    You can add a sticker to a feature tile.

    • new recipe
    • <a href="#0" class="feature feature--square" style="background-image:url('/images/feature/square-dippers.jpg');">
          <div class="sticker sticker--outside-left">
              <div class="sticker__content">
                  <span class="sticker__text sticker__text--lg">new</span>
                  <span class="sticker__text">recipe</span>
              </div>
          </div>
          <p class="feature__footer">
              salted fudge and peanut cookie
          </p>
      </a>

    feature tile layouts

    Feature tiles have various suggested layouts as shown here.

    square feature tile trio with text

    image size: 450px x 450px

    <ul class="grid">
        <li class="grid__col-xs-6 grid__col-sm-4">
            <a href="#0" class="feature feature--square" style="background-image:url('/images/feature/square-ppnuts.jpg');"></a>
            <p>Our punchy protein nuts are the tastiest way to enjoy more protein.</p>
            <div class="grid__cell-footer">
                <a href="#0">punchy protein nuts <span class="fa fa-angle-right"></span></a>
            </div>
        </li>
        <li class="grid__col-xs-6 grid__col-sm-4">
            <a href="#0" class="feature feature--square" style="background-image:url('/images/feature/square-blackboard.jpg');">
            </a>
            <p>Take a look at our taste expert Ellie’s favourite snacks.</p>
            <div class="grid__cell-footer">
                <a href="#0">view snacks <span class="fa fa-angle-right"></span></a>
            </div>
        </li>
        <li class="grid__col-xs-6 grid__col-sm-4">
            <a href="#0" class="feature feature--square" style="background-image:url('/images/feature/square-fudge.jpg');">
            </a>
            <p>We have over 50 new recipes including our salted fudge and peanut cookie.</p>
            <div class="grid__cell-footer">
                <a href="#0">view all new recipes <span class="fa fa-angle-right"></span></a>
            </div>
        </li>
    </ul>

    square feature tile trio with footer

    image size: 450px x 450px

    <ul class="grid">
        <li class="grid__col-xs-6 grid__col-sm-4">
            <a href="#0" class="feature feature--square" style="background-image:url('/images/feature/square-honeycomb.jpg');">
                <p class="feature__footer">honeycomb flapjack</p>
            </a>
        </li>
        <li class="grid__col-xs-6 grid__col-sm-4">
            <a href="#0" class="feature feature--square" style="background-image:url('/images/feature/square-popsicle.jpg');">
                <p class="feature__footer">strawberries &amp; cream popsicles</p>
            </a>
        </li>
        <li class="grid__col-xs-6 grid__col-sm-4">
            <a href="#0" class="feature feature--square" style="background-image:url('/images/feature/square-fudge.jpg');">
    
                <p class="feature__footer">salted fudge and peanut cookie</p>
            </a>
        </li>
    </ul>

    square feature tile quartet with footer

    image size: 450px x 450px

    <ul class="grid">
        <li class="grid__col-xs-6 grid__col-sm-3">
            <a href="#0" class="feature feature--square" style="background-image:url('/images/feature/square-honeycomb.jpg');">
                <p class="feature__footer">honeycomb flapjack</p>
            </a>
        </li>
        <li class="grid__col-xs-6 grid__col-sm-3">
            <a href="#0" class="feature feature--square" style="background-image:url('/images/feature/square-popsicle.jpg');">
                <p class="feature__footer">strawberries &amp; cream popsicles</p>
            </a>
        </li>
        <li class="grid__col-xs-6 grid__col-sm-3">
            <a href="#0" class="feature feature--square" style="background-image:url('/images/feature/square-fudge.jpg');">
                <p class="feature__footer">salted fudge and peanut cookie</p>
            </a>
        </li>
        <li class="grid__col-xs-6 grid__col-sm-3">
            <a href="#0" class="feature feature--square" style="background-image:url('/images/feature/square-dippers.jpg');">
                <p class="feature__footer">dippers colection</p>
            </a>
        </li>
    </ul>

    half feature tile trio with heading

    image size: 450px x 225px

    <ul class="grid">
        <li class="grid__col-xs-4">
            <a href="#0" class="feature feature--half" style="background-image:url('/images/feature/half-honey.jpg');">
                <h2 class="feature__heading">
                    homemade honeycomb
                </h2>
            </a>
        </li>
        <li class="grid__col-xs-4">
            <a href="#0" class="feature feature--half" style="background-image:url('/images/feature/half-cashew.jpg');">
                <h2 class="feature__heading">
                    benefits of cashews
                </h2>
            </a>
        </li>
        <li class="grid__col-xs-4">
            <a href="#0" class="feature feature--half" style="background-image:url('/images/feature/half-smoothie.jpg');">
                <h2 class="feature__heading">
                    smoothie bowl recipes
                </h2>
            </a>
        </li>
    </ul>

    2:1 tiles with heading

    image size: 750px x 375px and 450px x 450px

    <ul class="grid">
        <li class="grid__col-12 grid__col-xs-8">
            <a href="#0" class="feature feature--half" style="background-image:url('/images/feature/half-running.jpg');">
                <h2 class="feature__heading">
                    the running collection: fuel your feet
                </h2>
            </a>
        </li>
        <li class="grid__col-12 grid__col-xs-4">
            <a href="#0" class="feature feature--square" style="background-image:url('/images/feature/square-dippers.jpg');">
                <h2 class="feature__heading">
                    dips &amp; dippers collection
                </h2>
            </a>
        </li>
    </ul>
    <ul class="grid">
        <li class="grid__col-12 grid__col-xs-4">
            <a href="#0" class="feature feature--square" style="background-image:url('/images/feature/square-dippers.jpg');">
                <h2 class="feature__heading">
                    dips &amp; dippers collection
                </h2>
            </a>
        </li>
        <li class="grid__col-12 grid__col-xs-8">
            <a href="#0" class="feature feature--half" style="background-image:url('/images/feature/half-running.jpg');">
                <h2 class="feature__heading">
                    the running collection: fuel your feet
                </h2>
            </a>
        </li>
    </ul>

    Feature banner

    image size: 1200px x 300px

    Feature banners are designed to work with an image that is 1200px wide and 300px high. For art direction you should consider two thirds of the image as the focus as demonstrated below. The content can be aligned left or right.



    with fade

    Faded banner content will work for the vast majority of images and should be considered the default.

    good just got exciting

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum.

    get started
    <div class="feature-banner" style="background-image:url('/images/banners/banner-berry.jpg');">
        <div class="feature-banner__content feature-banner__content--fade">
            <h2>good just got exciting</h2>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum.</p>
            <a href="#0" class="button button--primary button--continue button--lg button--block-xs">get started</a>
        </div>
    </div>

    good just got exciting

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum.

    get started
    <div class="feature-banner feature-banner--right" style="background-image:url('/images/banners/banner-berry-right.jpg');">
        <div class="feature-banner__content feature-banner__content--fade feature-banner__content--right">
            <h2>good just got exciting</h2>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum.</p>
            <a href="#0" class="button button--primary button--continue button--lg button--block-xs">get started</a>
        </div>
    </div>

    with no fade

    Some images are not suitable for use with the fade but there is an option without fade.

    good just got exciting

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum.

    get started
    <div class="feature-banner" style="background-image:url('/images/banners/banner-cashews.jpg');">
        <div class="feature-banner__content">
            <h2>good just got exciting</h2>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum.</p>
            <a href="#0" class="button button--primary button--continue button--lg button--block-xs">get started</a>
        </div>
    </div>

    good just got exciting

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum.

    get started
    <div class="feature-banner feature-banner--right" style="background-image:url('/images/banners/banner-cashews-right.jpg');">
        <div class="feature-banner__content feature-banner__content--right">
            <h2>good just got exciting</h2>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum.</p>
            <a href="#0" class="button button--primary button--continue button--lg button--block-xs">get started</a>
        </div>
    </div>

    with a dark background

    Images with a dark background colour are suitable for use with white text with a shadow.

    good just got exciting

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum.

    get started
    <div class="feature-banner" style="background-image:url('/images/banners/banner-yoga.jpg');">
        <div class="feature-banner__content feature-banner__content--dark">
            <h2>good just got exciting</h2>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum.</p>
            <a href="#0" class="button button--primary button--continue button--lg button--block-xs">get started</a>
        </div>
    </div>

    good just got exciting

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum.

    get started
    <div class="feature-banner feature-banner--right" style="background-image:url('/images/banners/banner-yoga-right.jpg');">
        <div class="feature-banner__content feature-banner__content--dark feature-banner__content--right">
            <h2>good just got exciting</h2>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum.</p>
            <a href="#0" class="button button--primary button--continue button--lg button--block-xs">get started</a>
        </div>
    </div>

    Below 992 pixel viewport width all banners will respond by collapsing the text content below the banner image. Resize your browser to see how it works (if you need to).

    Feature strip

    image size: 1200px x 300px

    For art direction you should consider the central section of the image as the focus. At different viewport sizes more of the surrounding photo will be visible but the center section is always visible.


    as a link

    Visit the graze blog for thousands of exciting recipes

    <a href="#0" class="feature-strip" style="background-image:url('/images/banners/banner-berry.jpg');">
        <div class="feature-strip__content feature-strip__content--fade">
            <p>Visit the graze blog for thousands of exciting recipes</p>
        </div>
    </a>

    With a call to action

    Vegan, gluten-free, and no refined sugars - it's our chocolate pumpkin brownie recipe!

    <div class="feature-strip" style="background-image:url('/images/banners/banner-halloween.jpg');">
        <div class="feature-strip__content feature-strip__content--fade">
            <p>Vegan, gluten-free, and no refined sugars - it's our chocolate pumpkin brownie recipe!</p>
            <button class="button">read more</button>
        </div>
    </div>

    With a call to action and a dark background

    The life changing properties of yoga

    <div class="feature-strip" style="background-image:url('/images/banners/banner-yoga.jpg');">
        <div class="feature-strip__content feature-strip__content--dark">
            <p>The life changing properties of yoga</p>
            <button class="button">learn more</button>
        </div>
    </div>

    Feature full width banner

    image size: 1600px x 400px

    Full width feature banners are designed to work with an image that is 1600px wide and 400px high. For art direction you should consider half of the image as the focus as demonstrated below. The red section will always be visible on all viewport sizes while the green section is sometimes visible depending on viewport size.



    With a content panel

    good just got exciting

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum.

    get started
    <div class="feature-full" style="background-image:url('/images/banners/banner-berry-full-right.jpg');">
        <div class="feature-full__container">
            <div class="feature-full__content">
                <h2>good just got exciting</h2>
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum.</p>
                <a href="#0" class="button button--primary button--continue button--lg button--block-xs">get started</a>
            </div>
        </div>
    </div>

    With a content panel aligned right

    good just got exciting

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis purus ligula, dictum at augue feugiat, facilisis aliquam eros.

    get started
    <div class="feature-full feature-full--right" style="background-image:url('/images/banners/banner-berry-full-left.jpg');">
        <div class="feature-full__container">
            <div class="feature-full__content feature-full__content--right">
                <h2>good just got exciting</h2>
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis purus ligula, dictum at augue feugiat, facilisis aliquam eros.</p>
                <a href="#0" class="button button--primary button--continue button--lg button--block-xs">get started</a>
            </div>
        </div>
    </div>

    With a dark background

    good just got exciting

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum.

    get started
    <div class="feature-full" style="background-image:url('/images/banners/banner-full-left-xmaspud.jpg');">
        <div class="feature-full__container">
            <div class="feature-full__content feature-full__content--dark">
                <h2>good just got exciting</h2>
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum.</p>
                <a href="#0" class="button button--primary button--continue button--lg button--block-xs">get started</a>
            </div>
        </div>
    </div>

    With a dark background aligned right

    good just got exciting

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum.

    get started
    <div class="feature-full feature-full--right" style="background-image:url('/images/banners/banner-full-right-xmaspud.jpg');">
        <div class="feature-full__container">
            <div class="feature-full__content feature-full__content--dark feature-full__content--right">
                <h2>good just got exciting</h2>
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum.</p>
                <a href="#0" class="button button--primary button--continue button--lg button--block-xs">get started</a>
            </div>
        </div>
    </div>

    With a content panel aligned center

    image size: 1600px x 800px

    There is a unique image size for full width banners. For art direction you should be aware that the red section will always be visible on all viewport sizes while the entire image is visible at smaller viewport sizes.


    good just got exciting

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis purus ligula, dictum at augue feugiat, facilisis aliquam eros.

    get started
    <div class="feature-full feature-full--center" style="background-image:url('/images/banners/banner-full-center.jpg');">
        <div class="feature-full__container">
            <div class="feature-full__content feature-full__content--center">
                <h1>good just got exciting</h1>
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis purus ligula, dictum at augue feugiat, facilisis aliquam eros.</p>
                <a href="#0" class="button button--primary button--continue button--lg button--block-xs">get started</a>
            </div>
        </div>
    </div>

    Feature images

    image size: 1200px x (100 - 500px)

    image only

    Featured images can be used as headers for pages and should always include an alt property.

    give the gift of graze this christmas
    <img class="img-bleed" src="/images/feature/header-image.jpg" alt="give the gift of graze this christmas">

    image as a link

    give the gift of graze this christmas
    <a href="#0" class="link-img">
        <img class="img-bleed" src="/images/feature/header-image.jpg" alt="give the gift of graze this christmas">
    </a>

    Full width image only

    image size: 1600px x (100 - 500px)

    Full width feature images should always include an alt property.

    give the gift of graze this christmas
    <div class="feature-full">
        <img class="img-bleed" src="/images/feature/header-image-full.jpg" alt="give the gift of graze this christmas">
    </div>