Design System

Promo Card 

<div class="PromoCard Card Theme Theme--turquoise Theme__bg">
    <a class="Link Link--wrapper" href="https://new-ascend-dev.5thring.co.uk/contact">
        <h5 class="Card__title">
            Contact an Ascend Expert
        </h5>
        <img class="Image Card__image OneLinkHide" src="https://ascendmaterials-files.sfo2.digitaloceanspaces.com/transforms/Promos/_500x500_crop_center-center_none_ns/871/matt-chapman.webp" width="500" height="500">
        <img class="Image Card__image OneLinkShow_zh " src="https://ascendmaterials-files.sfo2.digitaloceanspaces.com/transforms/Promos/_500x500_crop_center-center_none_ns/874/Jason-Jiang-800x600.webp" width="500" height="500">
        <div class="Card__copy Theme__slant">
            <p class="Card__action">
                Contact
            </p>
        </div>
    </a>
</div>
 
<div class="PromoCard Card Theme Theme--turquoise Theme__bg">
	<a class="Link Link--wrapper" href="https://new-ascend-dev.5thring.co.uk/contact">
		<h5 class="Card__title">
			Contact an Ascend Expert
		</h5>
		<img class="Image Card__image OneLinkHide" src="https://ascendmaterials-files.sfo2.digitaloceanspaces.com/transforms/Promos/_500x500_crop_center-center_none_ns/871/matt-chapman.webp" width="500" height="500">
		<img class="Image Card__image OneLinkShow_zh " src="https://ascendmaterials-files.sfo2.digitaloceanspaces.com/transforms/Promos/_500x500_crop_center-center_none_ns/874/Jason-Jiang-800x600.webp" width="500" height="500">
		<div class="Card__copy Theme__slant">
			<p class="Card__action">
				Contact 
			</p>
		</div>
	</a>
</div>
 
{
  "company": "Ascend Performance Materials",
  "url": "https://www.ascendmaterials.com",
  "placeholders": {
    "copy": "Cozy lummox gives smart squid who asks for job pen"
  }
}
  • Content: 
    .PromoCard {
  @apply self-start
    rounded-md;
    
  .Card__title {
    @apply mb-0
      text-center;
  }

  .Card__title, .Card__action {
    @apply text-base 
      xl:text-lg
      py-5
      px-6;
  }

  .Card__action {
    @apply font-bold
  }

  .Theme__slant {
    &:before {
      @apply 
        top-0
        -left-[10%]
        right-[75px]
        bottom-0
        skew-x-[17deg];
    }
  }

  &:hover {
    .Theme__slant {
      &:before {
        @apply -right-[10%];
      }
    }
  }
}
  • URL: /components/raw/promo-card/promo-card.scss
  • Filesystem Path: src/components/01-elements/card/promo-card/promo-card.scss
  • Size: 505 Bytes

No notes defined.