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


    page sections

    Page sections help break up pages and give content some much needed breathing space.

    heads up!

    Due to our styleguide layout, all examples are contained in a content area. Page sections should generally be used to cover the whole page width for maximum effect.


    hello Cat Stevens

    Check out our latest snacks!


    <div class="page-section page-section--alternate">
                        <div class="container">
                            <div class="row">
                                <div class="col-xs-12 page-section__content">
                                    <h2>hello Cat Stevens</h2>
                                    <p class="lead">Check out our latest snacks!</p>


    colour modifiers

    Page sections have a white background by default but you can use these classes to modify that.


    A transparent page section is useful for allowing the background of the page to be visible.

    Modifer: .page-section--transparent


    Brand colour sections should only be used to frame the page at top and bottom and never within a page.

    Modifer: .page-section--brand



    Alternate page sections are perfect for breaking up longer sections of a page by alternating between white sections.

    Modifer: .page-section--alternate


    The grey colour used in "hint" sections will only be visible on high quality screens and devices and therefore should only be used as a progressive enhancement on those devices. When it's important for page sections to be visible, hint is not appropriate.

    Modifer: .page-section--hint

    background images

    Modifer: .page-section--image


    Modifer: .page-section--inverse .page-section--image


    size modifiers

    Default padding size is 3em.

    Bleed: 0 .page-section--bleed

    Extra Small: .75em .page-section--xs

    Small: 1.5em .page-section--sm

    Large: 6em .page-section--lg