Badge

Staff Pick

primary #266038 dark

Staff Pick

secondary #217E52 dark

Staff Pick

tertiary #1A1E1A dark

Staff Pick

dark #0A0A0A dark

Staff Pick

light #FFFFFF light

Staff Pick

accent #217E52 dark

<span class="badge badge--pick">Staff Pick</span>

.badge {
display: inline-block;
			font-size: 10px;
			font-weight: var(--fw-bold);
			text-transform: uppercase;
			padding: var(--space-1) var(--space-2);
			border-radius: var(--radius-sm);
			position: absolute;
			top: var(--space-4);
}

.badge--pick {
left: var(--space-4);
			background-color: var(--nw-green-light);
			color: var(--text-on-dark);
}

.badge--new {
right: var(--space-4);
			background-color: var(--accent-yellow);
			color: var(--near-black);
}

.badge--sale {
right: var(--space-4);
			background-color: var(--accent-red);
			color: var(--text-on-dark);
}

Origin

Tokens Used