Pleasance Styleguide

Offer CTA 

<aside class="offer bg-primary p-3 border rounded rounded-4 mt-4 d-flex flex-column gap-3">
    <div class="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>
        </div>
    </div>
    <div class="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>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>
    </div>
    <div class="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>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
</aside>
 
<aside class="offer bg-primary p-3 border rounded rounded-4 mt-4 d-flex flex-column gap-3">
  {% for item in items %}
    <div class="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>{{ item.copy | replace({"\n\n":'</p><p>'}) }}</p>
      </div>
    </div>
  {% endfor %}
</aside>
 
{
  "items": [
    {
      "copy": "Work in Progress Offer: 3 shows in the season for £12.00\n"
    },
    {
      "copy": "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.\n"
    },
    {
      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n\nUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\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.