arieare ds

components / main

home gallery

HomeGallery is the densest DS surface in the main package. It composes card variants, optional web-clip previews, and inline image-lightbox behavior into a single home-page storytelling strip.

field value
group main
import @arieare/ds-main/HomeGallery.astro
source packages/ds-main/src/HomeGallery.astro
packages/ds-main/src/home-gallery.ts
A layered archive drawer with pinned design scraps.

x / tweet

arie aulia nugraha @arieare

arie aulia nugraha

making tiny systems helps me think bigger about the work. every small constraint teaches the next move.

A warm sketchbook page beside an orange card.

play

playful systems

small experiments, tiny loops, and game-like thinking.

component tokens

token source description
--main-gallery-palette-* @arieare/ds-main/tokens.css Defines the art-directed color families used by image, text, and color cards.
--main-gallery-card-radius / --main-gallery-card-border @arieare/ds-main/tokens.css Controls card rounding and border treatment across gallery variants.
--main-gallery-title-font / --main-gallery-body-font / --main-gallery-meta-font @arieare/ds-main/tokens.css Maps gallery copy tiers back to the shared DS type contracts.

props

prop type default description
rows HomeGalleryRow[] — Authored gallery rows containing mixed card variants.
ariaLabel string "homepage gallery" Accessible label for the gallery region.
webClipEndpoint string | null "/api/unfurl" Endpoint used to resolve unresolved web-clip cards.
uniformRowHeight boolean false Locks every row to the same height token for a stricter strip layout.
class string "" Extra classes applied to the gallery root.