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

contents:


    panels

    Panels are used to define distinct areas of the page. Useful for displaying contextual information in a way that separates it from the rest of the page. Also intended for use in lists of products to visually separate each product.

    If you only need a single panel then a basic panel is fine. For multiple panels you should use a panel grid

    basic panels

    Intended for the presentation of ancillary information or functionality, panels are distinct from alerts in that alerts are used for feedback for an action that a user has performed whereas panels are permanent features.

    heading

    Interactively procrastinate high-payoff content without backward-compatible data. Quickly cultivate optimal processes and tactical architectures.

    more info
    <div class="panel">
        <div class="panel__body">
            <h2>heading</h2>
            <p>
                Interactively procrastinate high-payoff content without backward-compatible data. Quickly cultivate optimal processes and tactical architectures.
            </p>
            <a href="javascript:void(0);">more info</a>
        </div>
    </div>

    with header and footer

    optional header

    Interactively procraxstinate high-payoff content without backward-compatible data. Quickly cultivate optimal processes and tactical architectures.

    <div class="panel">
        <div class="panel__header">
            optional header
        </div>
        <div class="panel__body">
            <p>
                Interactively procraxstinate high-payoff content without backward-compatible data. Quickly cultivate optimal processes and tactical architectures.
            </p>
        </div>
        <div class="panel__footer">
            optional footer
        </div>
    </div>

    alternate colour

    heading

    Interactively procrastinate high-payoff content without backward-compatible data. Quickly cultivate optimal processes and tactical architectures.

    more info
    <div class="panel panel--alternate">
        <div class="panel__body">
            <h2>heading</h2>
            <p>
                Interactively procrastinate high-payoff content without backward-compatible data. Quickly cultivate optimal processes and tactical architectures.
            </p>
            <a href="javascript:void(0);">more info</a>
        </div>
    </div>

    feature panel

    Use a feature panel where you want the content to stand out. For example, to draw attention to an important section in a longer list of content.

    panel header

    Interactively procraxstinate high-payoff content without backward-compatible data. Quickly cultivate optimal processes and tactical architectures.

    <div class="panel panel--feature">
        <div class="panel__header">
            <h2>panel header</h2>
        </div>
        <div class="panel__body">
            <p>
                Interactively procraxstinate high-payoff content without backward-compatible data. Quickly cultivate optimal processes and tactical architectures.
            </p>
        </div>
        <div class="panel__footer">
            optional footer
        </div>
    </div>

    clickable basic panels

    Clickable panels are used to showcase content or individual products. The whole panel is a link and to signify that it is clickable, it has a shadow and hover/focus states.

    <a class="panel" href="#0">
        <div class="panel__body">
            <img src="/images/feature/half-honey.jpg" class="img-responsive">
            <p>
                Proactively envisioned multimedia based expertise and cross-media growth strategies.
            </p>
        </div>
    </a>

    with full width image

    <a class="panel" href="javascript:void(0);">
        <img src="/images/feature/half-smoothie.jpg" class="img-responsive panel__header-img">
        <div class="panel__body">
            <p>
                Objectively innovate empowered manufactured products whereas parallel platforms. Holisticly predominate extensible testing procedures for reliable supply chains.
            </p>
        </div>
    </a>

    with footer

    <a class="panel" href="#0">
        <img src="/images/feature/half-cashew.jpg" class="img-responsive panel__header-img">
        <div class="panel__body">
            <p>
                Proactively envisioned multimedia based expertise and cross-media growth strategies.
            </p>
        </div>
        <div class="panel__footer">
            £3.99
        </div>
    </a>

    panel grid introduction

    A panel grid with same height panels and other flexbox properties via the flexbox grid.

    Panel grids are appropriate for lists of products or other content, especially those with dynamic content as flexbox allows the grid to remain intact and aligned vertically regardless of how much content is present.

    panel grid for products (portrait)

    For page layout examples please refer to the product tiles full width and product tiles with side nav pages.

    • new

      cheese board

      (83 reviews)

      cheese flavoured cashews, cheddar cheese bruschetta and baked herb bites

    • most popular

      sesame garlic crunch

      (103 reviews)

      oat bran sesame sticks, garlic sesame sticks and multigrain soy rice cracker

    • sale

      hickory smoked bbq

      (44 reviews)

      hickory smoked cashews, BBQ flavoured peas and roasted corn

    • black pepper cashews

      (99 reviews)

      black pepper cashews, roasted unsalted cashews and redskin peanuts

    <ul class="grid">
        <li class="grid__col-xs-6 grid__col-sm-4 grid__col-md-3 grid__panel grid__panel--list-xxs">
            <div style="background-image:url(/images/products/subscription/lightly-toasted-pistachios.jpg);" class="grid__panel-header-img-bg"></div>
            <div class="grid__panel-body">
                <h2>landscape panel</h2>
                <p>text</p>
            </div>
            <div class="grid__panel-footer">
                <div class="grid__cell">
                    <a class="button button--secondary pull-right" href="#0">cta</a>
                    <span class="meta">
                        info
                    </span>
                </div>
            </div>
        </li>
    </ul>

    panel grid for products (landscape)

    For page layout examples please refer to the product tiles full width and product tiles with side nav pages.

    • new

      cheese board

      (83 reviews)

      cheese flavoured cashews, cheddar cheese bruschetta and baked herb bites

    • most popular

      sesame garlic crunch

      (103 reviews)

      oat bran sesame sticks, garlic sesame sticks and multigrain soy rice cracker

    • sale

      hickory smoked bbq

      (44 reviews)

      hickory smoked cashews, BBQ flavoured peas and roasted corn

    • black pepper cashews

      (99 reviews)

      black pepper cashews, roasted unsalted cashews and redskin peanuts

    <ul class="grid">
        <li class="grid__col-sm-12 grid__col-md-6 grid__panel grid__panel--list">
            <div style="background-image:url(/images/products/subscription/lightly-toasted-pistachios.jpg);" class="grid__panel-header-img-bg"></div>
            <div class="grid__panel-body">
                <h2>landscape panel</h2>
                <p>text</p>
            </div>
            <div class="grid__panel-footer">
                <div class="grid__cell">
                    <a class="button button--secondary pull-right" href="#0">cta</a>
                    <span class="meta">
                        info
                    </span>
                </div>
            </div>
        </li>
    </ul>

    panel grid for content (with cta)

    Some examples of the various layout options for content panels making use of the grid. In these examples the panels contain one or more calls to action (buttons or links).

    Panel grid usage with an inset image and the alternate background colour.

    Panel grid usage with a full width image as a link

    Panel grid where all content is centered vertically.

    call to action

    Panel grid where all content is centered vertically and horizontally.

    call to action
    <div class="grid">
        <div class="grid__col-xs-6 grid__col-sm-4 grid__col-md-3 grid__panel grid__panel--alternate">
            <div class="grid__panel-top">
                <img src="/images/feature/half-doodle.jpg" class="img-responsive">
                <p>
                    Panel grid usage with an inset image and the alternate background colour.
                </p>
            </div>
            <div class="grid__panel-footer">
                <div class="grid__cell">
                    <a class="button button--block" href="#0">call to action</a>
                </div>
            </div>
        </div>
        <div class="grid__col-xs-6 grid__col-sm-4 grid__col-md-3 grid__panel">
            <a href="#0" style="background-image:url(/images/feature/half-running.jpg);" class="grid__panel-header-img-bg link-img"></a>
            <div class="grid__panel-body">
                <p>
                    Panel grid usage with a full width image as a link
                </p>
            </div>
            <div class="grid__panel-footer">
                <div class="grid__cell">
                    <a class="button button--block" href="#0">call to action</a>
                </div>
            </div>
        </div>
        <div class="grid__col-xs-6 grid__col-sm-4 grid__col-md-3 grid__panel">
            <div class="grid__panel-center">
                <img src="/images/feature/half-cashew.jpg" class="img-responsive">
                <p>
                    Panel grid where all content is centered vertically.
                </p>
                <a class="button" href="#0">call to action</a>
            </div>
        </div>
        <div class="grid__col-xs-6 grid__col-sm-4 grid__col-md-3 grid__panel">
            <div class="grid__panel-center grid__panel-center--x">
                <span class="fa fa-3x fa-exclamation-circle"></span>
                <p>
                    Panel grid where all content is centered vertically and horizontally.
                </p>
                <a class="button" href="#0">call to action</a>
            </div>
        </div>
    </div>

    panel grid for content (as a link)

    The whole panel is a link and to signify that it is clickable, it has a shadow and hover/focus states.

    <div class="grid">
        <a href="#0" class="grid__col-xs-6 grid__col-sm-4 grid__col-md-3 grid__panel">
            <div class="grid__panel-center grid__panel-center--x">
                <span class="fa fa-3x fa-exclamation-circle"></span>
                <p>
                    Panel grid as a link where all content is centered vertically and horizontally.
                </p>
            </div>
        </a>
        <a href="#0" class="grid__col-xs-6 grid__col-sm-4 grid__col-md-3 grid__panel">
            <div class="grid__panel-center">
                <img src="/images/feature/half-doodle.jpg" class="img-responsive">
                <p>
                    Panel grid as a link with an inset image where all content is centered vertically.
                </p>
            </div>
        </a>
        <a href="#0" class="grid__col-xs-6 grid__col-sm-4 grid__col-md-3 grid__panel">
            <div class="grid__panel-center grid__panel-center--x">
                <img src="/images/feature/half-smoothie.jpg" class="img-responsive">
                <p>
                    Panel grid as a link with an inset image where all content is centered vertically and horizontally.
                </p>
            </div>
        </a>
        <a href="#0" class="grid__col-xs-6 grid__col-sm-4 grid__col-md-3 grid__panel">
            <div class="grid__panel-center grid__panel-center--x">
                <img src="/images/feature/square-honeycomb.jpg" class="img-responsive img-circle">
                <p>
                    Panel grid as a link with a circular inset image where all content is centered vertically and horizontally.
                </p>
            </div>
        </a>
    </div>