Heros — Bags

Dark premium product hero with spec callouts and an edition badge.

bun x bosia@latest add block heros/bags

Dark premium product hero with spec callouts and an edition badge. A self-contained, full-width <section> built from semantic tokens only, so it restyles across all 18 themes — the brand colour maps to --primary.

Preview

B
Brand
The Carryall · Numbered run

A bag that outlives the trend.

Cut from a single hide of full-grain Italian leather and hand-stitched to last decades. It only looks better with the miles.

$385 or 4 × $96 interest-free
Full-grain leather
Tanned in Tuscany
Hand-stitched
1 of 200 made
Lifetime repairs
Free, forever
Ships in a day
Carbon-neutral
Leather bag
No. 137
Your edition
Stamped to order

Install

bun x bosia@latest add block heros/bags

Pulls the @lucide/svelte npm package for icons.

Usage

<script lang="ts">
	import Bags from "$lib/blocks/heros/bags/block.svelte";
</script>

<Bags />

Drop it at the top of a route. Any interactive bits (size / color / age pickers, address or email inputs) are cosmetic local $state — wire them to your own data. Edit block.svelte to swap copy and the Unsplash images.

Source

src/lib/blocks/heros/bags/block.svelte