UspBar

The selling points in the bar above the header. A point with an icon or a second line draws its icon, a bold title and the line muted below it; a plain point sits behind a check mark. A linked point follows its link the way a footer link does. Renders nothing without points. Server-renderable.

import { UspBar } from "@evolve-storefront/layout/usp-bar";

Preview

DefaultOpen in Storybook ↗

Usage

Three points from the site entry: one with an icon and a second line, one with an icon linked to the returns page, and a plain one behind a check mark.

const { site } = await fetcher(LayoutGetSite, { version });

<UspBar
  items={siteUspBarItems(site?.usps, (link) => resolveResourceLink(link))}
  renderLink={renderLink}
/>;

Props

Prop	Type	Description
items	readonly UspBarItem[]
renderLink?	FooterLinkRenderer	Follows a routed link with the site's router; without it every link is a plain anchor.
icons?	Partial<Record<UspBarIcon, ReactNode>>	The site's own glyph for an icon key; a key left out draws the storefront icon.

Any other props go to the root element, like on a plain HTML element.

Examples

VariantsEvery icon key, each drawn with the storefront's icon, and a long point that wraps onto a second line instead of being cut off.

<UspBar
  items={usps}
  renderLink={renderLink}
  // A key left out draws the storefront icon.
  icons={{ LEAF: <BrandLeaf className="size-5" /> }}
/>;

Open in Storybook ↗

EmptyA site entry without selling points: the bar renders nothing.

<UspBar items={[]} />;

Open in Storybook ↗