Pricing Slat

<div id="pricing-slat" class="pricing-slat">
  <div class="grid grid--of-two">
    <div class="flow--l">
      <div class="body flow--xs">
        <h2>{{ title }}</h2>
        <p>{{ text }}</p>
      </div>
      {% include '@button' with {
        arrow: true,
        link: cta.link,
        text: cta.text ? cta.text : 'Book your training',
        style: 'large'
      } %}
    </div>
    <div class="pricing-slat__info flow--s">
      <h3 class="h h-5">Pricing</h3>
      <div role="region" aria-labelledby="pricing-table-{{ entry.id }}" tabindex="0">
        <table class="pricing-slat__table">
          <caption id="pricing-table-{{ entry.id }}" class="vh">Pricing for Clearleft's {{ entry.title }} workshop</caption>
          {% if show_table_head is defined and show_table_head == true %}
          <thead>
            <tr>
              <th scope="col">Group size</th>
              <th class="align-right" scope="col">Price per person + VAT</th>
            </tr>
          </thead>
          {% endif %}
          <tbody>
            {% switch entry.type %}
              {% case 'product' %}
                {% for row in pricing_table %}
                  <tr>
                    <td data-title="{{ row.key }}">{{ row.key }}</td>
                    <td data-title="{{ row.value }}" class="align-right"><strong>{{ row.value }}</strong></td>
                  </tr>
                {% endfor %}

              {% default %}
                {% for row in pricing_table %}
                  <tr>
                    <td data-title="Group size">{{ row.groupSize }}</td>
                    <td data-title="Price per person + VAT" class="align-right">{{ row.pricePerPersonVat }}</td>
                  </tr>
                {% endfor %}

            {% endswitch %}
          </tbody>
        </table>
      </div>
      <p class="caption">{{ note }}</p>
    </div>
  </div>
</div>