Corner ribbon component (.sf-ribbon)

[jackgranatowski]

Problem

No corner "ribbon"/banner element (e.g. "Sale", "New") — a recurring decorative pattern on promo/e-commerce pages.

Scope

• .sf-ribbon + position modifiers (top-left/top-right/…) and tokens (--sf-ribbon-bg/-text/-offset/-padding/-shadow).
• Pure CSS, respects reduced-motion if any animation.

Acceptance

• .sf-ribbon with position variants + tokens; documented