Basket Item

Open in Figma View all renders

Basket Item with Icon

<div style="width: 300px">
    <div class="basket-item">
        <div class="basket-item__icon">
            <span class="material-symbols-rounded" aria-hidden="true">beach_access</span>
        </div>
        <div class="basket-item__info">
            <div class="flex flex--column flex-grow">
                <p class="copy copy--bold">Label</p>
                <p class="copy copy--xsmall">Additional info</p>
            </div>
            <div class="flex flex--column align-items-flex-end">
                <p class="copy copy--bold">£XXX.XX</p>
                <p class="copy copy--small">info</p>
            </div>
        </div>
    </div>
</div>

Variations and modifiers

Basket Item with Smaller Text

<div style="width: 300px">
    <div class="basket-item">
        <div class="basket-item__icon">
            <span class="material-symbols-rounded" aria-hidden="true">beach_access</span>
        </div>
        <div class="basket-item__info">
            <div class="flex flex--column flex-grow">
                <p class="copy copy--small copy--bold">Label</p>
                <p class="copy copy--xsmall">Additional info</p>
            </div>
            <div class="flex flex--column align-items-flex-end">
                <p class="copy copy--small copy--bold">£XXX.XX</p>
                <p class="copy copy--small">info</p>
            </div>
        </div>
    </div>
</div>

Basket Item without Icon

<div style="width: 300px">
    <div class="basket-item">
        <div class="basket-item__info">
            <div class="flex flex--column flex-grow">
                <p class="copy copy--bold">Label</p>
                <p class="copy copy--xsmall">Additional info</p>
            </div>
            <div class="flex flex--column align-items-flex-end">
                <p class="copy copy--bold">£XXX.XX</p>
                <p class="copy copy--small">info</p>
            </div>
        </div>
    </div>
</div>

Basket Item without Additional Text

<div style="width: 300px">
    <div class="basket-item">
        <div class="basket-item__icon">
            <span class="material-symbols-rounded" aria-hidden="true">beach_access</span>
        </div>
        <div class="basket-item__info align-items-center">
            <div class="flex flex--column flex-grow">
                <p class="copy copy--bold">Label</p>
            </div>
            <div class="flex flex--column align-items-flex-end">
                <p class="copy copy--bold">£XXX.XX</p>
            </div>
        </div>
    </div>
</div>