V6 Clearleft Patterns

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></h2>
                <p></p>
            </div>

            <a href="mailto:info@clearleft.com?subject=New training enquiry: " class="Button focus Button--large"><span></span><svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right  Icon--s">
                    <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
                </svg></a>
        </div>
        <div class="pricing-slat__info flow--s">
            <h3 class="h h-5">Pricing</h3>
            <div role="region" aria-labelledby="pricing-table-" tabindex="0">
                <table class="pricing-slat__table">
                    <caption id="pricing-table-" class="vh">Pricing for Clearleft's workshop</caption>
                    <thead>
                        <tr>
                            <th scope="col">Group size</th>
                            <th class="align-right" scope="col">Price per person + VAT</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <p class="caption"></p>
        </div>
    </div>
</div>
 
<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: 'mailto:info@clearleft.com?subject=New training enquiry: ' ~ entry.title,
        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>
          <thead>
            <tr>
              <th scope="col">Group size</th>
              <th class="align-right" scope="col">Price per person + VAT</th>
            </tr>
          </thead>
          <tbody>
            {% 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 %}
          </tbody>
        </table>
      </div>
      <p class="caption">{{ note }}</p>
    </div>
  </div>
</div>
 
/* No context defined. */
  • Content: 
    .pricing-slat {
  background-color: var(--green-step-2);
  padding: var(--space-s-l);

  &__info {
    background-color: var(--white);
    height: fit-content;
    padding: var(--space-s);
  }
}

.pricing-slat > .grid {
  align-items: center;
}

.pricing-slat__table {
  border-collapse: collapse;
  width: 100%;
}
.pricing-slat__table tr {
  border-block-end: 1px solid var(--grey-step-2);
}
.pricing-slat__table th {
  font-weight: 700;
  padding-bottom: var(--space-2xs);
}
.pricing-slat__table td {
  padding-block: var(--space-2xs);
}
.pricing-slat__table th,
.pricing-slat__table td {
  line-height: 1.7;
  padding-right: var(--space-2xs);
  text-align: left;
  text-wrap: nowrap;
}
.pricing-slat__table th.align-right,
.pricing-slat__table td.align-right {
  text-align: right;
}

[role="region"][aria-labelledby][tabindex] {
  /* Allow overflow of applicable divs while prevent horizontal scrolling of whole page. */
  overflow: auto;

  /* Scrolling visual cue */
  background: linear-gradient(to right, var(--white) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(255, 255, 255, 0), var(--white) 70%) 0 100%,
    radial-gradient(
      farthest-side at 0% 50%,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ),
    radial-gradient(
        farthest-side at 100% 50%,
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0)
      )
      0 100%;
  background-repeat: no-repeat;
  background-color: var(--white);
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-position: 0 0, 100%, 0 0, 100%;
  background-attachment: local, local, scroll, scroll;
}

[role="region"][aria-labelledby][tabindex]:focus {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
  • URL: /components/raw/pricing-slat/pricing-slat.css
  • Filesystem Path: src/templates/components/pricing-slat/pricing-slat.css
  • Size: 1.7 KB

No notes defined.