All examples

Building blocks > Custom properties
Financial data

This exercise has two cards with financial data.

One is in a bad, negative state, and we want to show it to the customer.

In the second card, make the border, icon, background, button and amount red, rather than blue.

Only change one line in CSS.

Example code

							<section class="dashboard">
	<article class="card">
		<div class="card__icon">↗</div>
		<h2>Revenue</h2>
		<strong>$24,800</strong>
		<button>View report</button>
	</article>

	<article class="card card--warning">
		<div class="card__icon">!</div>
		<h2>Failed payments</h2>
		<strong>23</strong>
		<button>Resolve</button>
	</article>
</section>

<style>
.dashboard {
	--hue: 215;
	--saturation: 80%;
}

.card {
	border: 2px solid var(--accent);
	color: var(--ink);
	background: var(--accent-soft);
	--accent: hsl(var(--hue) var(--saturation) 50%);
	--accent-soft: hsl(var(--hue) 80% 94%);
	--ink: hsl(var(--hue) 40% 18%);
}
.card--warning {
	/* */
}

.card__icon {
	background: var(--accent);
}

.card strong {
	color: var(--accent);
}

button {
	background: var(--accent);
}

/* for demo */
.dashboard {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	max-width: 650px;
	padding: 2rem;
}
.card {
	padding: 1.5rem;
	border-radius: 1rem;
}
	.card__icon {
		width: 3rem;
		height: 3rem;
		display: grid;
		place-items: center;
		border-radius: 50%;
		color: white;
		font-size: 1.5rem;
	}
	.card strong {
		display: block;
		margin: 1rem 0;
		font-size: 2rem;
	}
	button {
		border: 0;
		border-radius: 2em;
		padding: 0.7rem 1rem;
		color: white;
	}
</style>

Preview

Answer

Show answer

Example code

							<section class="dashboard">
	<article class="card">
		<div class="card__icon">↗</div>
		<h2>Revenue</h2>
		<strong>$24,800</strong>
		<button>View report</button>
	</article>

	<article class="card card--warning">
		<div class="card__icon">!</div>
		<h2>Failed payments</h2>
		<strong>23</strong>
		<button>Resolve</button>
	</article>
</section>

<style>
.dashboard {
	--hue: 215;
	--saturation: 80%;
}

.card {
	border: 2px solid var(--accent);
	color: var(--ink);
	background: var(--accent-soft);
	--accent: hsl(var(--hue) var(--saturation) 50%);
	--accent-soft: hsl(var(--hue) 80% 94%);
	--ink: hsl(var(--hue) 40% 18%);
}
.card--warning {
	--hue: 12;
}

.card__icon {
	background: var(--accent);
}

.card strong {
	color: var(--accent);
}

button {
	background: var(--accent);
}

/* for demo */
.dashboard {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	max-width: 650px;
	padding: 2rem;
}
.card {
	padding: 1.5rem;
	border-radius: 1rem;
}
	.card__icon {
		width: 3rem;
		height: 3rem;
		display: grid;
		place-items: center;
		border-radius: 50%;
		color: white;
		font-size: 1.5rem;
	}
	.card strong {
		display: block;
		margin: 1rem 0;
		font-size: 2rem;
	}
	button {
		border: 0;
		border-radius: 2em;
		padding: 0.7rem 1rem;
		color: white;
	}
</style>

Preview