Pleasance Styleguide

Offer CTA 

<aside class="offer bg-primary p-3 border rounded rounded-4 mt-4 d-flex">
    <div class="d-flex offer--icon p-0 me-3">
        <svg>
            <use xlink:href="#star"></use>
        </svg>
    </div>
    <div class="offer--copy border-start border-2 border-secondary ps-3">
        <p>Work in Progress Offer: 3 shows in the season for £12.00</p>
        <p>Group Tickets - Buy 6 tickets or more and save £5 per ticket - just enter the amount you want under this price band. Excludes preview performances.
        </p>
    </div>
</aside>
 
<aside class="offer bg-primary p-3 border rounded rounded-4 mt-4 d-flex">
  <div class="d-flex offer--icon p-0 me-3">
    <svg>
      <use xlink:href="#star"></use>
    </svg>
  </div>
  <div class="offer--copy border-start border-2 border-secondary ps-3">
    <p>{{ copy | replace({"\n\n":'</p><p>'}) }}</p>
  </div>
</aside>
 
{
  "copy": "Work in Progress Offer: 3 shows in the season for £12.00\n\nGroup Tickets - Buy 6 tickets or more and save £5 per ticket - just enter the amount you want under this price band. Excludes preview performances.\n"
}
  • Content: 
    .offer {
  --bs-border-color: var(--bs-gray-400);

  &--icon {
    width: 2rem;
    height: 2rem;

    svg {
      use {
        fill: $primary;
        stroke: $secondary;
      }
    }
  }

  &--copy {
    p {
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
  • URL: /components/raw/offer-cta/offer-cta.scss
  • Filesystem Path: src/components/02-structures/offer-cta/offer-cta.scss
  • Size: 278 Bytes

No notes defined.