V6 Clearleft Patterns

Training pricing card 

<div class="Training-pricing-card flow--s">
    <p class="h">
        <span>Group training from</span>
        <span class="Training-pricing-card__price">£400</span>
        <span>per attendee + VAT</span>
    </p>
    <p class="Training-pricing-card__text">
        Minimum session cost £3,000 + VAT. We offer discounts for larger groups, charities, not-for-profits, and educational institutions.
    </p>

    <a href="#pricing-slat" class="Button focus Button--large"><span>Book your training</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="Training-pricing-card flow--s">
  <p class="h">
    <span>{{ eyebrow is defined ? eyebrow }}</span>
    <span class="Training-pricing-card__price">{{ price is defined ? price }}</span>
    <span>{{ moustache is defined ? moustache }}</span>
  </p>
  {% if text is defined %}
    <p class="Training-pricing-card__text">
      {{ text|nl2br }}
    </p>
  {% endif %}

  {% include '@button' with {
    arrow: true,
    link: '#pricing-slat',
    text: cta_text ? cta_text : 'Book your training',
    style: 'large'
  } %}
</div>
 
{
  "eyebrow": "Group training from",
  "price": "£400",
  "moustache": "per attendee + VAT",
  "text": "Minimum session cost £3,000 + VAT. We offer discounts for larger groups, charities, not-for-profits, and educational institutions.",
  "cta_text": "Book your training"
}
  • Content: 
    .Training-pricing-card {
  background-color: var(--green-step-2);
  height: fit-content;
  padding: var(--space-m);

  span {
    display: block;
  }

  &__price {
    font-size: var(--step-2);
    margin-block-start: var(--space-s);
  }

  &__text {
    color: var(--grey);
    font-size: var(--step--1);
    line-height: 1.7;
  }
}
  • URL: /components/raw/training-pricing-card/training-pricing-card.css
  • Filesystem Path: src/templates/components/training-pricing-card/training-pricing-card.css
  • Size: 334 Bytes

No notes defined.