DiscountBadge
"−20%" or "Save $10" as a small label, in tones, solid, soft or outline, or pinned to an image's corner.
Demo
−20%Save $10Save €5Save 7,50 €2 for 1Clearance
−30%−30%−30%Save $15
−40%Last one
Get it
It needs theme.qwe, as every component does, and price.qwe; or take the whole kit, quillo-ui.qwe. Each component brings its own styles to the pages that show it.
$ curl -O https://quillolang.org/components/ui/theme.qwe$ curl -O https://quillolang.org/components/ui/price.qwe$ curl -O https://quillolang.org/components/ui/discount_badge.qwemain.qwe
import ui/theme.qwe use theme_cssuse ui/discount_badge.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>Example
The code of the preview above.
demos/discount_badge.qwe
view DiscountBadgeDemo() = <div.demo-stack> <div.demo-row> <DiscountBadge percent={20}/> <DiscountBadge amount={10}/> <DiscountBadge amount="€5" tone="success"/> <DiscountBadge amount={7.5} currency="EUR" locale="de-DE" tone="accent"/> <DiscountBadge label="2 for 1" tone="warning"/> <DiscountBadge label="Clearance" tone="neutral"/> </div> <div.demo-row> <DiscountBadge percent={30} variant="soft"/> <DiscountBadge percent={30} variant="outline"/> <DiscountBadge percent={30} size="sm"/> <DiscountBadge amount={15} variant="soft" tone="success" size="sm"/> </div> <div style="position: relative; width: 160px; height: 100px; border-radius: var(--ui-radius); background: var(--ui-subtle)"> <DiscountBadge percent={40} corner="top-left"/> <DiscountBadge label="Last one" tone="neutral" variant="outline" corner="bottom-right" size="sm"/> </div> </div>Source
ui/discount_badge.qwe
// DiscountBadge: how much is off, as a small label on a product or a plan:// "−20%", "Save $10", "2 for 1".//// <DiscountBadge percent={20}/>// <DiscountBadge amount={10}/> Save $10// <DiscountBadge amount="€5" tone="success"/> Save €5// <DiscountBadge label="2 for 1" tone="accent" variant="outline"/>//// percent: the percentage off, shown as "−20%". amount: the money off, a number// (written for currency and locale, as Price does, a whole one without ".00";// this file needs price.qwe) or text, shown as "Save $10". label: any other// text, shown as it is. One of the// three. tone: "danger" (default, as shops do), "accent", "success", "warning" or// "neutral". variant: "solid" (default), "soft" or "outline". size: "sm" or "md"// (default). corner: "top-left", "top-right", "bottom-left" or "bottom-right"// pins it to that corner of a parent with position: relative (an image).import ui/price.qwe use price_textimport ui/theme.qwe use ui_clslet discount_badge_css = css`.ui-discount { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 1px solid transparent; border-radius: var(--ui-radius-sm); font: 700 12px/1 var(--ui-font); letter-spacing: .01em; white-space: nowrap; font-variant-numeric: tabular-nums; --t: var(--ui-danger); --ts: var(--ui-danger-soft);}.ui-discount-accent { --t: var(--ui-accent); --ts: var(--ui-accent-soft); }.ui-discount-success { --t: var(--ui-success); --ts: var(--ui-success-soft); }.ui-discount-warning { --t: var(--ui-warning); --ts: var(--ui-warning-soft); }.ui-discount-neutral { --t: var(--ui-fg); --ts: var(--ui-subtle); }.ui-discount-solid { background: var(--t); color: var(--ui-bg); }.ui-discount-soft { background: var(--ts); color: var(--t); }.ui-discount-outline { border-color: var(--t); color: var(--t); background: var(--ui-surface); }.ui-discount-sm { height: 20px; padding: 0 7px; font-size: 11px; }.ui-discount-corner { position: absolute; z-index: 1; }.ui-discount-top-left { top: 8px; left: 8px; }.ui-discount-top-right { top: 8px; right: 8px; }.ui-discount-bottom-left { bottom: 8px; left: 8px; }.ui-discount-bottom-right { bottom: 8px; right: 8px; }`view DiscountBadge(percent: num? = null, amount = null, label: str? = null, currency: str = "USD", locale: str? = null, tone: str = "danger", variant: str = "solid", size: str = "md", corner: str? = null, class: str? = null) { style global discount_badge_css let text = label ?? (percent != null ? `−${percent}%` : amount != null ? `Save ${price_text(amount, currency, locale, false)}` : "") let spoken = label ?? (percent != null ? `${percent}% off` : amount != null ? `Save ${price_text(amount, currency, locale, false)}` : "") <span class={ui_cls(["ui-discount", `ui-discount-${tone}`, `ui-discount-${variant}`, size == "sm" && "ui-discount-sm", corner != null && "ui-discount-corner", corner != null && `ui-discount-${corner}`, class])} aria-label={spoken != text ? spoken : null}>{text}</span>}Related
CartItemOne line of a cart: picture, name and options, a quantity control, the line's total and Remove, as inputs a form sends.6 views · 6 downloadsCartSummarySubtotal, shipping, tax, a discount and the total added up, with a Checkout button as a link, a form or a callback.6 views · 7 downloadsOrderHistoryPast orders with number, date, status and total, each opening on <details> to show its items and links.6 views · 5 downloadsOrderTrackerOrdered → shipped → out for delivery → delivered, with when each happened, the expected date and the tracking link.5 views · 6 downloadsPlanToggleMonthly or yearly billing as a pill of two radios, with the saving shown on the yearly side.6 views · 4 downloadsPriceAn amount written in its currency, with the old price struck through and the discount worked out.6 views · 5 downloads
Thread
Thread 0 posts
On DiscountBadge: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.