Design System

Brochure 

<div class="Brochure"></div>
 
<div class="Brochure"></div>
 
{
  "company": "Ascend Performance Materials",
  "url": "https://www.ascendmaterials.com",
  "placeholders": {
    "copy": "Cozy lummox gives smart squid who asks for job pen"
  }
}
  • Content: 
    .Brochure {
	@apply overflow-hidden 
		max-w-[500px]
		p-6
		sm:pr-4
		pb-2;

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

	&__action {
		@apply
			relative
			py-5
			pr-8
			xs:text-xl 
      bg-arrow-down-circle-white
      bg-[center_right]
			bg-[length:45px_45px]
      md:bg-[length:60px_60px]
      bg-no-repeat;
	}

	.Link {
		@apply relative;
	}

	.Image {
		@apply max-w-[325px]
			border
			border-gray-300;
	}
}
  • URL: /components/raw/brochure/brochure.scss
  • Filesystem Path: src/components/01-elements/brochure/brochure.scss
  • Size: 501 Bytes

No notes defined.