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>

</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 %}

  {% if cta is defined %}
    {% include '@button' with {
      arrow: true,
      link: cta.link ? cta.link : '#pricing-slat',
      text: cta.text ? cta.text : 'Book your training',
      style: 'large'
    } %}
  {% endif %}
</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.