<div class="cta-card w-full md:w-1/2 flex items-center">
    <div class="cta-card__content m-12 md:m-16 lg:m-24">
        <h2 class="heading text-white text-2xl md:text-3xl mb-8">Curated collections of works ready for purchase from iconic artists</h2>
        <a href="www.expandtheroom.com" class="button button--default">
        Buy now
      </a>

    </div>
</div>
<div class="cta-card w-full md:w-1/2 flex items-center">
  <div class="cta-card__content m-12 md:m-16 lg:m-24">
    <h2 class="heading text-white text-2xl md:text-3xl mb-8">{{heading}}</h2>
    {{> @button}}
  </div>
</div>
{
  "heading": "Curated collections of works ready for purchase from iconic artists",
  "text": "Buy now",
  "url": "www.expandtheroom.com",
  "showStates": null
}
  • Content:
    .cta-card {
        @apply .bg-primary-dark;
    
        &:nth-child(even){
          @apply .bg-primary-darker;
        }
    
        &:not(only-child) {
          &__content {
            max-width: 800px;
          }
        }
    
        @screen md {
          @apply w-1/2;
        }
    
        &:only-child {
          @apply w-full;
    
          @screen md {
            .cta-card__content {
    
                @apply text-center mx-auto;
    
            }
          }
        }
    
    }
    
  • URL: /components/raw/cta-card/cta-card.scss
  • Filesystem Path: components/05-layout-components/cta-card/cta-card.scss
  • Size: 391 Bytes

There are no notes for this item.