Monthly Breakdown

Open in Figma View all renders

Monthly Breakdown

This example shows a monthly breakdown in horizontal direction. 

<div class="monthly-breakdown">
    <div class="monthly-breakdown__content heading">
        <p class="bold">£56.03</p>
        <p class="copy--small">today</p>
    </div>
    <div class="monthly-breakdown__circle-container copy--small">
        <span class="monthly-breakdown__circle-text">then</span>
    </div>
    <div class="monthly-breakdown__content heading">
        <p class="bold">£23.24</p>
        <p class="copy--small">x11 months</p>
    </div>
</div>

Monthly Breakdown - Stacked

This example shows a monthly breakdown in vertical direction. 

<div class="monthly-breakdown monthly-breakdown--stacked">
    <div class="monthly-breakdown__content heading">
        <p class="bold">£56.03</p>
        <p class="copy--small">today</p>
    </div>
    <div class="monthly-breakdown__circle-container copy--small">
        <span class="monthly-breakdown__circle-text">then</span>
    </div>
    <div class="monthly-breakdown__content heading">
        <p class="bold">£23.24</p>
        <p class="copy--small">x11 months</p>
    </div>
</div>