Average 

<section class="prices">
    <template class="js-price-item-template">
        <li class="price js-price" data-amount="">
            <div class="price__period js-price-period"></div>
            <div class="price__bar js-price-bar" style="width: 0%;"></div>
            <div class="price__amount">
                <span class="price__currency js-price-currency"></span>
                <div class="price__value js-price-amount"></div>
            </div>
        </li>
    </template>
    <template class="js-price-day-template">
        <div class="prices__day js-day unavailable"></div>
    </template>
    <div class="grid-x">
        <div class="cell medium-7">
            <h4 class="prices__title js-title">Average prices for flights</h4>
            <ul class="prices__list js-prices-list">
                <li class="price js-price" data-amount="35">
                    <div class="price__period js-price-period">Jan - Mar</div>
                    <div class="price__bar js-price-bar" style="width: 0%;"></div>
                    <div class="price__amount">
                        <span class="price__currency js-price-currency">$</span>
                        <div class="price__value js-price-amount">35</div>
                    </div>
                </li>
                <li class="price js-price" data-amount="39">
                    <div class="price__period js-price-period">Apr - Jun</div>
                    <div class="price__bar js-price-bar" style="width: 0%;"></div>
                    <div class="price__amount">
                        <span class="price__currency js-price-currency">$</span>
                        <div class="price__value js-price-amount">39</div>
                    </div>
                </li>
                <li class="price js-price" data-amount="47">
                    <div class="price__period js-price-period">Jul - Sep</div>
                    <div class="price__bar js-price-bar" style="width: 0%;"></div>
                    <div class="price__amount">
                        <span class="price__currency js-price-currency">$</span>
                        <div class="price__value js-price-amount">47</div>
                    </div>
                </li>
                <li class="price js-price" data-amount="38">
                    <div class="price__period js-price-period">Oct - Dec</div>
                    <div class="price__bar js-price-bar" style="width: 0%;"></div>
                    <div class="price__amount">
                        <span class="price__currency js-price-currency">$</span>
                        <div class="price__value js-price-amount">38</div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="cell medium-5">
            <h4 class="prices__title js-title">Flights available on:</h4>
            <div class="prices__days js-days">
                <div class="prices__day" title=""></div>
                <div class="prices__day" title="Monday">M</div>
                <div class="prices__day" title="Tuesday">T</div>
                <div class="prices__day" title="Wednesday">W</div>
                <div class="prices__day" title="Thursday">T</div>
                <div class="prices__day" title="Friday">F</div>
                <div class="prices__day prices__day--unavailable" title="Saturday">S</div>
                <div class="prices__day" title="Sunday">S</div>
            </div>
        </div>
    </div>
</section>
 
<section class="prices">
    <template class="js-price-item-template">
        {{> @cp-price-item}}
    </template>
    <template class="js-price-day-template">
        {{> @cp-price-day}}
    </template>
    <div class="grid-x">
        <div class="cell medium-7">
            <h4 class="prices__title js-title">{{pricesTitle}}</h4>
            <ul class="prices__list js-prices-list">
                {{#each prices}}
                    {{> @cp-price-item this}}
                {{/each}}
            </ul>
        </div>
        <div class="cell medium-5">
            <h4 class="prices__title js-title">{{daysTitle}}</h4>
            <div class="prices__days js-days">
                <div class="prices__day" title=""></div>
                {{#each days}}
                <div class="prices__day{{#unless available}} prices__day--unavailable{{/unless}}" {{#if this.full}}title="{{this.full}}"{{/if}}>{{this.day}}</div>
                {{/each}}
            </div>
        </div>
    </div>
</section>
 
{
  "pricesTitle": "Average prices for flights",
  "prices": [
    {
      "period": "Jan - Mar",
      "currency": "$",
      "amount": 35
    },
    {
      "period": "Apr - Jun",
      "currency": "$",
      "amount": 39
    },
    {
      "period": "Jul - Sep",
      "currency": "$",
      "amount": 47
    },
    {
      "period": "Oct - Dec",
      "currency": "$",
      "amount": 38
    }
  ],
  "daysTitle": "Flights available on:",
  "days": [
    {
      "day": "M",
      "full": "Monday",
      "available": true
    },
    {
      "day": "T",
      "full": "Tuesday",
      "available": true
    },
    {
      "day": "W",
      "full": "Wednesday",
      "available": true
    },
    {
      "day": "T",
      "full": "Thursday",
      "available": true
    },
    {
      "day": "F",
      "full": "Friday",
      "available": true
    },
    {
      "day": "S",
      "full": "Saturday",
      "available": false
    },
    {
      "day": "S",
      "full": "Sunday",
      "available": true
    }
  ]
}

There are no notes for this item.