Image Card

v0.2.2 (latest)
Draft

A card with an image on top and a title, subtitle and meta row below, for artwork lists, artist tiles and booking previews. It composes `atoms.card` with no padding, so fill, border and corners are Card's.

pnpm add @behivetech/molecules.image-card

Published to npm.pkg.github.com

  • v0.2.2 · current
  • v0.2.1
  • v0.2.0
  • v0.1.2
  • v0.1.1

Changelog

v0.2.2

Patch Changes

  • 8fe9fb4: Import icons from their own packages (@behivetech/icons.<name>), and the shared stylesheet and types from @behivetech/icons.base, instead of @behivetech/atoms.icon, which no longer exists.
  • 8fe9fb4: Declare "sideEffects": ["**/*.css"] so a bundler can drop the package when its exports are unused. Packages that build class names depend on @behivetech/get-class-name (a real dependency, kept external) instead of bundling their own copy of the helper, so an app loads it once.
  • Updated dependencies [8fe9fb4]
  • Updated dependencies [8fe9fb4]
  • Updated dependencies [8fe9fb4]
    • @behivetech/icons.base@0.4.0
    • @behivetech/icons.image@0.1.0
    • @behivetech/get-class-name@0.1.0
    • @behivetech/atoms.card@0.6.2
    • @behivetech/hooks.use-image-status@0.1.1

v0.2.1

Patch Changes

  • Updated dependencies [4d3c523]
    • @behivetech/atoms.card@0.6.1

v0.2.0

Minor Changes

  • 48c9e6b: Use the shared hooks.use-image-status, extract the media box as an inner BHT__ImageCardMedia block, switch the Grid Row example to repeat(auto-fill, minmax(10.5rem, 1fr)) and document that a wrapper or <picture> as media needs a key on the card.

    Class names changed, which breaks any app CSS that targets them:

    • BHT__ImageCard__media is now BHT__ImageCardMedia
    • BHT__ImageCard__fallback is now BHT__ImageCardMedia__fallback
    • BHT__ImageCard--aspect-* is now BHT__ImageCardMedia--aspect-*

Patch Changes

  • Updated dependencies [48c9e6b]
    • @behivetech/hooks.use-image-status@0.1.0

v0.1.2

Patch Changes

  • Updated dependencies [00e81c9]
  • Updated dependencies [6534e7a]
    • @behivetech/atoms.card@0.6.0
    • @behivetech/atoms.icon@0.3.8

v0.1.1

Patch Changes

  • Updated dependencies [5593d1c]
  • Updated dependencies [0e4857f]
    • @behivetech/atoms.card@0.5.0
    • @behivetech/atoms.icon@0.3.7

v0.1.0

Minor Changes

  • 057cd6c: New molecules.image-card: a media slot over an atoms.card body with title, subtitle and meta, an optional single link named by the title (href and linkComponent), aspectRatio of 4/5, 1/1 or 3/2, and an image icon fallback when the image fails to load.