Fylgja Product Label

A product label is a badge pinned over a product image to flag a sale, a new arrival or a low stock warning. It is the badge and the card composed together, with no new component behind it.

Preview

A cat lounging in the sun Sale

Sunny Cat Wallpaper

€18.99

<article class="card max-w-full" style="--size-x: 320px">
	<div class="relative">
		<img
			src="/images/placeholders/cat.webp"
			alt="A cat lounging in the sun"
			width="500"
			height="300"
			loading="lazy"
		/>
		<span class="badge absolute" style="--inset-t: 1ch; --inset-e: 1ch">Sale</span>
	</div>
	<div class="card-content">
		<p class="lead"><strong>Sunny Cat Wallpaper</strong></p>
		<p class="font-bold">€18.99</p>
	</div>
</article>

Usage

  • Wrap the image in a relative container, and give the badge absolute with an inset, so the label anchors to the artwork rather than the card.
  • Position it with --inset-t and --inset-e. Use --inset-s to move it to the leading corner.
  • Recolor per status with --badge-bg and --badge-color.
  • Keep the label text short. It is a flag, not a description.

Anatomy

  • .card is the product itself.
  • .relative around the image is what the label is positioned against.
  • .badge.absolute is the label, offset by the inset variables.
  • .card-content holds the text, which is what lets the image sit flush to the card’s edges.

Accessibility

  • The label is real text, so it is read out in order with the product name.
  • Do not let color alone carry the meaning. “Sale” must say sale.
  • Check contrast against the image behind it. A busy photo can swallow a translucent label.

Examples

Drop the labelled card into Product Grid to build a full listing, since the grid handles the layout and this component only handles the label. For the pill on its own, including the notification count pinned to a button, see Badge.

FAQ

Why is the label inside its own wrapper instead of on the card?

The label is pinned to the image, not to the card, so the relative wrapper goes around the image. Putting it on the card would place the label against the card's padding rather than the artwork.

Can I drop the wrapper and use anchor positioning instead?

Yes, and it is worth knowing. Give the image an anchor-name, then point the badge at it with position-anchor and place it with position-area, and the relative wrapper is no longer needed. CSS anchor positioning is still at limited availability across browsers, so this example uses the wrapper for the widest support today.

How do I recolor a label per status?

Set --badge-bg and --badge-color on that badge. Keep contrast in mind, since a label sits on top of an image and has to stay readable.

Does the label need to be announced to screen readers?

It is plain text in the reading order, so it is announced already. Make sure it reads sensibly next to the product name, and never rely on its color alone to convey the meaning.