UI Components

Previous Order Card

The c-orderCard component is an optional mixin within Fozzie — if you'd like to use it in your project you can include it by adding @include orderCard(); into your SCSS dependencies file.

Order Card

Example

Pizza Loco

Pizza Loco

1 x Sushi Salmon, 3 x Tuna Sashimi, 1 x Coconut Water + 3 more
£45.00

Order again
Pizza Loco

Pizza Loco

1 x Sushi Salmon, 3 x Tuna Sashimi, 1 x Coconut Water + 1 more
£45.00

Order again
Pizza Loco

Pizza Loco

1 x Sushi Salmon, 3 x Tuna Sashimi, 1 x Coconut Water + 3 more
£45.00

Order again

 
<div class="l-innerContainer">
    <div class="c-overflowCarousel--withBlockElements">

<a href="#"
    class="c-orderCard c-overflowCarousel-item"
    href="#"
    title="Order this meal again"
>

    <div class="c-orderCard-image">
        <img src="/assets/img/examples/cuisines-widget.jpg" alt="Pizza Loco" class="c-orderCard-img">
    </div>

    <div class="c-orderCard-content">
        <h3 class="c-orderCard-title">Pizza Loco</h3>
        <time class="c-orderCard-date">01/12/2018</time>
        <div class="c-orderCard-summary-grid">
            <div class="c-orderCard-summary">
                1 x Sushi Salmon, 3 x Tuna Sashimi, 1 x Coconut Water
                <strong class="c-orderCard-showMore">+ 3 more</strong>
            </div>
            <strong class="c-orderCard-orderTotal">£45.00</strong>
        </div>

        <p class="c-orderCard-order">Order again</p>
    </div>
</a>
<a href="#"
    class="c-orderCard c-overflowCarousel-item"
    href="#"
    title="Order this meal again"
>

    <div class="c-orderCard-image">
        <img src="/assets/img/examples/cuisines-widget.jpg" alt="Pizza Loco" class="c-orderCard-img">
    </div>

    <div class="c-orderCard-content">
        <h3 class="c-orderCard-title">Pizza Loco</h3>
        <time class="c-orderCard-date">01/12/2018</time>
        <div class="c-orderCard-summary-grid">
            <div class="c-orderCard-summary">
                1 x Sushi Salmon, 3 x Tuna Sashimi, 1 x Coconut Water
                <strong class="c-orderCard-showMore">+ 1 more</strong>
            </div>
            <strong class="c-orderCard-orderTotal">£45.00</strong>
        </div>

        <p class="c-orderCard-order">Order again</p>
    </div>
</a>
<a href="#"
    class="c-orderCard c-overflowCarousel-item"
    href="#"
    title="Order this meal again"
>

    <div class="c-orderCard-image">
        <img src="/assets/img/examples/cuisines-widget.jpg" alt="Pizza Loco" class="c-orderCard-img">
    </div>

    <div class="c-orderCard-content">
        <h3 class="c-orderCard-title">Pizza Loco</h3>
        <time class="c-orderCard-date">01/12/2018</time>
        <div class="c-orderCard-summary-grid">
            <div class="c-orderCard-summary">
                1 x Sushi Salmon, 3 x Tuna Sashimi, 1 x Coconut Water
                <strong class="c-orderCard-showMore">+ 3 more</strong>
            </div>
            <strong class="c-orderCard-orderTotal">£45.00</strong>
        </div>

        <p class="c-orderCard-order">Order again</p>
    </div>
</a>
</div>
</div>