Cards — Media

Article, music, video, and gallery cards for media-rich UIs.

Media cards for articles, audio, video, and photo galleries. Images are small Unsplash photos, lazy-loaded and sized down to keep bandwidth low — swap each src for your own content.

Preview

Design 6 min read

A field guide to designing with tokens

How a small set of semantic variables can carry an entire product across light, dark and brand themes.

Leo Park · Mar 14

Paper Planes

The Offcuts

1:243:18

12:04

Building a themeable card system

Bosia TV · 24K views · 2d ago

+24

Studio shoot

28 photos · Apr 2

Install

Each card installs on its own:

bun x bosia@latest add block cards/article
bun x bosia@latest add block cards/music
bun x bosia@latest add block cards/video
bun x bosia@latest add block cards/gallery

Each pulls the @lucide/svelte npm package for icons.

Usage

<script lang="ts">
	import Music from "$lib/blocks/cards/music/block.svelte";
</script>

<Music />

The music card's play/pause is cosmetic local $state — connect it to your own audio element.