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

contents:


    stickers

    Stickers are used for promotional information such as discounts or to highlight a feature. Often they are positioned absolutely over an image or other element. They are suitable for use in feature blocks or page sections

    colours

    default

    try a free box
    <div class="sticker ">
        <div class="sticker__content">
            <span class="sticker__text">try a</span>
            <span class="sticker__text sticker__text--lg">free</span>
            <span class="sticker__text">box</span>
        </div>
    </div>

    inverse

    try a free box
    <div class="sticker sticker--inverse">
        <div class="sticker__content">
            <span class="sticker__text">try a</span>
            <span class="sticker__text sticker__text--lg">free</span>
            <span class="sticker__text">box</span>
        </div>
    </div>

    promo

    try a free box
    <div class="sticker sticker--promo">
        <div class="sticker__content">
            <span class="sticker__text">try a</span>
            <span class="sticker__text sticker__text--lg">free</span>
            <span class="sticker__text">box</span>
        </div>
    </div>

    promo inverse

    try a free box
    <div class="sticker sticker--promo-inverse">
        <div class="sticker__content">
            <span class="sticker__text">try a</span>
            <span class="sticker__text sticker__text--lg">free</span>
            <span class="sticker__text">box</span>
        </div>
    </div>

    sizes

    default

    try a free box
    <div class="sticker ">
        <div class="sticker__content">
            <span class="sticker__text">try a</span>
            <span class="sticker__text sticker__text--lg">free</span>
            <span class="sticker__text">box</span>
        </div>
    </div>

    small

    try a free box
    <div class="sticker sticker--sm">
        <div class="sticker__content">
            <span class="sticker__text">try a</span>
            <span class="sticker__text sticker__text--lg">free</span>
            <span class="sticker__text">box</span>
        </div>
    </div>

    large

    try a free box
    <div class="sticker sticker--lg">
        <div class="sticker__content">
            <span class="sticker__text">try a</span>
            <span class="sticker__text sticker__text--lg">free</span>
            <span class="sticker__text">box</span>
        </div>
    </div>

    extra large

    try a free box
    <div class="sticker sticker--xlg">
        <div class="sticker__content">
            <span class="sticker__text">try a</span>
            <span class="sticker__text sticker__text--lg">free</span>
            <span class="sticker__text">box</span>
        </div>
    </div>

    variations

    lowercase text

    just £5.99 a box delivered
    <div class="sticker">
        <div class="sticker__content">
            <span class="sticker__text">just</span>
            <span class="sticker__text sticker__text--lg">£5.99</span>
            <span class="sticker__text sticker__text--sm sticker__text--soft">a box delivered</span>
        </div>
    </div>

    two lines

    first box £5.99
    <div class="sticker">
        <div class="sticker__content">
            <span class="sticker__text sticker__text--sm sticker__text--soft">first box</span>
            <span class="sticker__text sticker__text--lg">£5.99</span>
        </div>
    </div>

    one line

    £5.99
    <div class="sticker">
        <div class="sticker__content">
            <span class="sticker__text sticker__text--lg">£5.99</span>
        </div>
    </div>

    position

    There are some basic positioning modifiers for stickers suitable for use in feature blocks or page sections. Please refer to the position mixin for creating bespoke positioning classes.

    top left outside

    <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>

    top left inside

    <a href="#0" class="feature feature--square" style="background-image:url('/images/feature/square-dippers.jpg');">
        <div class="sticker sticker--inside-left">
            <div class="sticker__content">
                <span class="sticker__text">try a</span>
                <span class="sticker__text sticker__text--lg">free</span>
                <span class="sticker__text">box</span>
            </div>
        </div>
        <p class="feature__footer">
            flapjacks
        </p>
    </a>

    top right outside

    <a href="#0" class="feature feature--square" style="background-image:url('/images/feature/square-dippers.jpg');">
        <div class="sticker sticker--outside-right">
            <div class="sticker__content">
                <span class="sticker__text">try a</span>
                <span class="sticker__text sticker__text--lg">free</span>
                <span class="sticker__text">box</span>
            </div>
        </div>
        <p class="feature__footer">
            flapjacks
        </p>
    </a>

    top right inside

    <a href="#0" class="feature feature--square" style="background-image:url('/images/feature/square-dippers.jpg');">
        <div class="sticker sticker--inside-right">
            <div class="sticker__content">
                <span class="sticker__text">try a</span>
                <span class="sticker__text sticker__text--lg">free</span>
                <span class="sticker__text">box</span>
            </div>
        </div>
        <p class="feature__footer">
            flapjacks
        </p>
    </a>