Design System

Cards Block: Six Columns 

<div class="CardsBlock Block Theme--turquoise">
    <div class="container">
        <div class="Block__content">
            <h2 class="Block__title">Applications</h2>
            <div class="CardsBlock__cards md:grid-cols-6">
                <div class="ThemedCard Card Theme__bg">
                    <a class="Link Link--wrapper" href="https://ascendmaterials-new.ddev.site/products-brands/fibers/industrial-fiber/airbag-fiber" target="">
                        <div class="Card__text Theme__slant">
                            <h3 class="Card__title">
                                Airbags
                            </h3>
                        </div>
                    </a>
                </div>
                <div class="ThemedCard Card Theme__bg">
                    <a class="Link Link--wrapper" href="https://ascendmaterials-new.ddev.site/markets/automotive/cooling-systems" target="">
                        <div class="Card__text Theme__slant">
                            <h3 class="Card__title">
                                Cooling systems
                            </h3>
                        </div>
                    </a>
                </div>
                <div class="ThemedCard Card Theme__bg">
                    <a class="Link Link--wrapper" href="https://ascendmaterials-new.ddev.site/markets/automotive/exteriors" target="">
                        <div class="Card__text Theme__slant">
                            <h3 class="Card__title">
                                Exteriors
                            </h3>
                        </div>
                    </a>
                </div>
                <div class="ThemedCard Card Theme__bg">
                    <a class="Link Link--wrapper" href="https://ascendmaterials-new.ddev.site/markets/automotive/e-mobility" target="">
                        <div class="Card__text Theme__slant">
                            <h3 class="Card__title">
                                e-mobility
                            </h3>
                        </div>
                    </a>
                </div>
                <div class="ThemedCard Card Theme__bg">
                    <a class="Link Link--wrapper" href="https://ascendmaterials-new.ddev.site/markets/automotive/interiors" target="">
                        <div class="Card__text Theme__slant">
                            <h3 class="Card__title">
                                Interiors
                            </h3>
                        </div>
                    </a>
                </div>
                <div class="ThemedCard Card Theme__bg">
                    <a class="Link Link--wrapper" href="https://ascendmaterials-new.ddev.site/markets/automotive/powertrain" target="">
                        <div class="Card__text Theme__slant">
                            <h3 class="Card__title">
                                Powertrain
                            </h3>
                        </div>
                    </a>
                </div>
                <div class="ThemedCard Card Theme__bg">
                    <a class="Link Link--wrapper" href="https://ascendmaterials-new.ddev.site/markets/automotive/under-the-hood" target="">
                        <div class="Card__text Theme__slant">
                            <h3 class="Card__title">
                                Under the hood
                            </h3>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="CardsBlock Block Theme--{% if theme %}{% for item in theme %}{{ item }}{% endfor %}{% endif %}">
	<div class="container">
		<div class="Block__content">
			<h2 class="Block__title">Applications</h2>
			<div class="CardsBlock__cards md:grid-cols-{% if column %}{% for item in column %}{{ item }}{% endfor %}{% endif %}">
				<div class="ThemedCard Card Theme__bg">
					<a class="Link Link--wrapper" href="https://ascendmaterials-new.ddev.site/products-brands/fibers/industrial-fiber/airbag-fiber" target="">
						<div class="Card__text Theme__slant">
							<h3 class="Card__title">
								Airbags
							</h3>
						</div>
					</a>
				</div>
				<div class="ThemedCard Card Theme__bg">
					<a class="Link Link--wrapper" href="https://ascendmaterials-new.ddev.site/markets/automotive/cooling-systems" target="">
						<div class="Card__text Theme__slant">
							<h3 class="Card__title">
								Cooling systems
							</h3>
						</div>
					</a>
				</div>
				<div class="ThemedCard Card Theme__bg">
					<a class="Link Link--wrapper" href="https://ascendmaterials-new.ddev.site/markets/automotive/exteriors" target="">
						<div class="Card__text Theme__slant">
							<h3 class="Card__title">
								Exteriors
							</h3>
						</div>
					</a>
				</div>
				<div class="ThemedCard Card Theme__bg">
					<a class="Link Link--wrapper" href="https://ascendmaterials-new.ddev.site/markets/automotive/e-mobility" target="">
						<div class="Card__text Theme__slant">
							<h3 class="Card__title">
								e-mobility
							</h3>
						</div>
					</a>
				</div>
				<div class="ThemedCard Card Theme__bg">
					<a class="Link Link--wrapper" href="https://ascendmaterials-new.ddev.site/markets/automotive/interiors" target="">
						<div class="Card__text Theme__slant">
							<h3 class="Card__title">
								Interiors
							</h3>
						</div>
					</a>
				</div>
				<div class="ThemedCard Card Theme__bg">
					<a class="Link Link--wrapper" href="https://ascendmaterials-new.ddev.site/markets/automotive/powertrain" target="">
						<div class="Card__text Theme__slant">
							<h3 class="Card__title">
								Powertrain
							</h3>
						</div>
					</a>
				</div>
				<div class="ThemedCard Card Theme__bg">
					<a class="Link Link--wrapper" href="https://ascendmaterials-new.ddev.site/markets/automotive/under-the-hood" target="">
						<div class="Card__text Theme__slant">
							<h3 class="Card__title">
								Under the hood
							</h3>
						</div>
					</a>
				</div>
			</div>
		</div>
	</div>
</div>
 
{
  "company": "Ascend Performance Materials",
  "url": "https://www.ascendmaterials.com",
  "placeholders": {
    "copy": "Cozy lummox gives smart squid who asks for job pen"
  },
  "column": [
    "6"
  ],
  "theme": [
    "turquoise"
  ]
}
  • Content: 
    .CardsBlock {
	.Block__title {
		@apply mb-6;
	}

	.Block__copy {
		@apply mb-6
			md:mb-8
			xl:mb-10;
	}

	&__cards {
		@apply grid
			max-sm:grid-cols-1
			sm:max-md:grid-cols-2
			gap-4;
	}

	.md\:grid-cols-5, .md\:grid-cols-6 {
		@apply md:max-xl:grid-cols-3;
	}


	&.Theme--featured {
		.ThemedCard {
			@apply flex
				flex-col
				border-2
				border-gray-300
				hover:border-gray-400
				transition;

			.Card__text {
				@apply relative
					flex
					flex-col
					items-stretch
					flex-grow
					py-0
					border-t
					border-gray-300
					text-blue;
			}
		}

		.Link--wrapper {
			@apply flex
				flex-col
				flex-grow;

			.Card__title {
				@apply pr-12
					bg-none;
			}

			.Card__copy {
				@apply pr-12;
			}
		}

		.Card__image {
			@apply max-w-32 
				xl:max-w-40
				mx-auto
				px-4
				py-4
				xl:py-6
				2xl:py-12;
		}

		.Card__title {
			@apply flex
				items-center
				self-start
				flex-grow
				mb-0
				py-4;
		}

		.Card__copy {
			@apply self-start
				flex-grow
				font-bold;
		}

		.Card__icon {
			@apply absolute
				flex
				right-0
				items-center
				h-full
				p-2
				max-lg:px-4
				lg:p-2
				border-l
				border-gray-300;

			svg {
				@apply size-4
					text-gray-400;
			}
		}

		.columns--6 {
			.Card {
				@apply flex;
			}

			.Link--wrapper {
				@apply flex-grow;
			}

			.Card__image {
				@apply	p-0;
			}

			.Card__text {
				@apply flex-col
					px-0;
			}

			.Card__copy {
				@apply max-xl:mb-6
					xl:max-2xl:mb-2
					2xl:mb-8
					3xl:mb-12
					px-4
					3xl:px-5
					text-base
					lg:text-lg
					xl:max-2xl:leading-tight;
			}

			.Card__icon {
				@apply relative
					self-end
					h-auto
					p-4
					border-t
					rounded-tl-md;
			}
		}

		[class*=columns--]:not(.columns--6) {
			@apply md:max-lg:grid-cols-2;

			.Card__image {
				@apply py-10
					lg:max-2xl:py-5;
			}

			.Card__icon {
				@apply px-5
					3xl:px-8;
			}
		}
	}

	&.CardsBlock--news {
		.Block__title {
			@apply 2xl:text-5xl;
		}
		.CardsBlock__cards {
			@apply sm:grid-cols-2
				xl:grid-cols-3;
		}
	}
}

.Layout--sidebar {
	.CardsBlock {
		&.Theme--featured {
			@apply bg-transparent;

			.Card__image {
				@apply py-8;
			}
		}

		.CardsBlock__cards {
			@apply md:max-2xl:grid-cols-2;
		}

		.md\:grid-cols-5, .md\:grid-cols-6 {
			@apply 2xl:max-3xl:grid-cols-4;
		}
	}
}
  • URL: /components/raw/cards-block/cards-block.scss
  • Filesystem Path: src/components/02-blocks/block/cards-block/cards-block.scss
  • Size: 2.3 KB

No notes defined.