<div class="container">
	<div class="card ink-primary">
		<h3><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.42 11.34l-1.86-2.12.26-2.81c.05-.5-.29-.96-.77-1.07l-2.76-.63-1.44-2.43c-.26-.43-.79-.61-1.25-.41L12 3 9.41 1.89c-.46-.2-1-.02-1.25.41L6.71 4.72l-2.75.62c-.49.11-.83.56-.78 1.07l.26 2.8-1.86 2.13c-.33.38-.33.94 0 1.32l1.86 2.12-.26 2.82c-.05.5.29.96.77 1.07l2.76.63 1.44 2.42c.26.43.79.61 1.26.41L12 21l2.59 1.11c.46.2 1 .02 1.25-.41l1.44-2.43 2.76-.63c.49-.11.82-.57.77-1.07l-.26-2.81 1.86-2.12c.34-.36.34-.92.01-1.3zM13 17h-2v-2h2v2zm-1-4c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1z"/></svg> Card A</h3>
		<p>Marshmallow gummi bears croissant chocolate bar powder dessert cotton candy candy. Cookie carrot cake lemon drops chocolate cake.</p>
		<a href="javascript:;">Learn More</a>
	</div>
	<div class="card ink-secondary">
		<h3><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.42 11.34l-1.86-2.12.26-2.81c.05-.5-.29-.96-.77-1.07l-2.76-.63-1.44-2.43c-.26-.43-.79-.61-1.25-.41L12 3 9.41 1.89c-.46-.2-1-.02-1.25.41L6.71 4.72l-2.75.62c-.49.11-.83.56-.78 1.07l.26 2.8-1.86 2.13c-.33.38-.33.94 0 1.32l1.86 2.12-.26 2.82c-.05.5.29.96.77 1.07l2.76.63 1.44 2.42c.26.43.79.61 1.26.41L12 21l2.59 1.11c.46.2 1 .02 1.25-.41l1.44-2.43 2.76-.63c.49-.11.82-.57.77-1.07l-.26-2.81 1.86-2.12c.34-.36.34-.92.01-1.3zM13 17h-2v-2h2v2zm-1-4c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1z"/></svg> Card B</h3>
		<p>Donut topping bear claw. Marshmallow croissant chocolate bar powder dessert cotton candy candy. Cookie carrot cake.</p>
		<a href="javascript:;">Learn More</a>
	</div>
	<div class="card ink-tertiary">
		<h3><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.42 11.34l-1.86-2.12.26-2.81c.05-.5-.29-.96-.77-1.07l-2.76-.63-1.44-2.43c-.26-.43-.79-.61-1.25-.41L12 3 9.41 1.89c-.46-.2-1-.02-1.25.41L6.71 4.72l-2.75.62c-.49.11-.83.56-.78 1.07l.26 2.8-1.86 2.13c-.33.38-.33.94 0 1.32l1.86 2.12-.26 2.82c-.05.5.29.96.77 1.07l2.76.63 1.44 2.42c.26.43.79.61 1.26.41L12 21l2.59 1.11c.46.2 1 .02 1.25-.41l1.44-2.43 2.76-.63c.49-.11.82-.57.77-1.07l-.26-2.81 1.86-2.12c.34-.36.34-.92.01-1.3zM13 17h-2v-2h2v2zm-1-4c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1z"/></svg> Card C</h3>
		<p>Gummi bears croissant chocolate bar powder. Cookie carrot cake lemon drops chocolate cake.</p>
		<a href="javascript:;">Learn More</a>
	</div>
</div>
// Learn how to use `currentColor` for DRY CSS and component color flexibility: 
// @link https://dev.to/5t3ph/use-currentcolor-to-keep-css-dry-and-component-colors-flexible-26p

$theme-colors: (
	"primary": #D73846,
	"secondary": #5D5DDE,
	"tertiary": #19965B
);

body {
	display: grid;
	place-items: center;
	min-height: calc(100vh - 4rem);
	padding: 1.5rem;
	line-height: 1.5;
}

@each $key, $value in $theme-colors {
	.ink-#{$key} {
		color: $value;
	}
}

.container {
	display: grid;
	grid-gap: 1.5rem;
	
	@media(min-width: 80ch) {
		grid-template-columns: repeat(3, minmax(auto, 40ch));
	}
}

.card {
	display: flex;
	flex-direction: column;
	position: relative;
	background: #fff;
	border-radius: 1rem 0;
	padding: 1.25rem 1.5rem;
	transition: box-shadow 80ms ease-in;
	
	// Set border to currentColor
	border: 2px solid currentColor;
	
	&:hover {
		// use currentColor for box-shadow
		box-shadow: 0 0 1px 2px currentColor;
		
		&:before {
			content: "";
			position: absolute;
			pointer-events: none;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			border-radius: inherit;
			
			// Use for background-color
			background-color: currentcolor;
			// Combine with opacity to use as a screen effect
			opacity: 0.08;
		}
	}
	
	h3 {
		font-size: 1.5rem;
		line-height: 1;
		margin: 0;
		
		svg {
			width: 1.15em;
			height: 1.15em;
			vertical-align: bottom;
			
			// Use currentColor for svg fill
			fill: currentColor;
		}
	}
	
	p {
		color: rgba(black, 0.54);
	}
	
	a {
		// Can either use currentColor or inherit
		color: currentColor;
		font-size: 1.125rem;
		font-weight: bold;
		margin-top: auto;
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.