<li class="card">
  <h2 class="card__title">
    <a href="#">Some Awesome Article</a>
  </h2>
  <p class="card__blurb">Here's a description for this awesome article.</p>
  <small class="card__author">Chrome DevRel</small>
</li>

*,
*:after,
*:before {
	box-sizing: border-box;
}

body {
	display: grid;
	place-items: center;
	min-height: 100vh;
	font-family:  'Google Sans', sans-serif, system-ui;
}

.card {
	--color: var(--indigo-3-hsl);
	border-radius: var(--radius-2);
	background: var(--gray-0);
	padding: var(--size-fluid-2);
	box-shadow: var(--shadow-4);
	color: var(--gray-9);
	list-style-type: none;
	display: grid;
	grid-gap: var(--size-fluid-1);
	overflow: hidden;
	border-left: var(--size-2) solid hsl(var(--color));
}

.card ::selection {
	background-color:  hsl(var(--color) / 25%);
}

.card__title {
	line-height: 1;
	margin-bottom: var(--size-fluid-1);
}

.card a {
	color: var(--gray-9);
	padding: 0;
	margin: 0;
	text-decoration-color: hsl(var(--color) / 100%);
}