ImagePlaceholder

The shared foundation for a fixed-size image-with-fallback box.

Project members

Ana Beltrán

Design

Luis Medina

Platform

Priya Raman

Support

Everyone on the project

PR+7

Luis’ avatar points at a file nothing serves, so his initials take over once the load fails — the case only a script can notice.

View code

<Header>Project members</Header>

{MEMBERS.map((member) => (
	<Item key={member.id}>
		<Item.Media>
			<ImagePlaceholder>
				<ImagePlaceholder.Image
					src={member.src}
					alt={member.name}
					mix={[imageFallback()]}
				/>
				<ImagePlaceholder.Fallback>{member.initials}</ImagePlaceholder.Fallback>
				{member.online ? <ImagePlaceholder.Badge /> : null}
			</ImagePlaceholder>
		</Item.Media>
		<Item.Content>
			<Item.Title>{member.name}</Item.Title>
			<Item.Description>{member.role}</Item.Description>
		</Item.Content>
	</Item>
))}

<Header>Everyone on the project</Header>
<ImagePlaceholder.Group>
	{MEMBERS.map((member) => (
		<ImagePlaceholder key={member.id} size="sm">
			<ImagePlaceholder.Image src={member.src} alt={member.name} mix={[imageFallback()]} />
			<ImagePlaceholder.Fallback>{member.initials}</ImagePlaceholder.Fallback>
		</ImagePlaceholder>
	))}
	<ImagePlaceholder.GroupCount>+7</ImagePlaceholder.GroupCount>
</ImagePlaceholder.Group>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { ImagePlaceholder } from "@sdxc/ui";

Renders the placeholder host: a fixed-size, centered box whose data-shape attribute styles it, its image, and its fallback together, leaving room for ImagePlaceholder.Badge to sit unclipped on the corner.

Composition

The parts the component publishes, each a static property of the host.

ImagePlaceholder
ImagePlaceholder.ImageRenders the placeholder's image layer: an <img> cropped with object-fit: cover, clipped to ImagePlaceholder's data-shape.
ImagePlaceholder.FallbackRenders the placeholder's fallback layer: a <span> centering a consumer's content in uppercase text.
ImagePlaceholder.BadgeRenders a small status dot pinned to the host's block-end/inline-end corner, always fully rounded regardless of ImagePlaceholder's own shape, and ringed to read as cut from whatever sits beneath it.
ImagePlaceholder.GroupRenders a row of overlapping placeholders: a flex container that pulls each child back over the previous one and rings each in the neutral tint background, so the overlap reads as stacked cutouts.
ImagePlaceholder.GroupCountRenders the "+N" overflow indicator trailing ImagePlaceholder.Group: a fixed medium-size box matching ImagePlaceholder's dimensions and ring treatment, taking its own shape prop to match the sibling placeholders.

Examples

<ImagePlaceholder size="lg" shape="square">
	<ImagePlaceholder.Image src={org.logoUrl} alt={org.name} />
	<ImagePlaceholder.Badge />
</ImagePlaceholder>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Description
`size?`	`"sm" \| "md" \| "lg"`	Size variant. Defaults to DEFAULT_SIZE.
`shape?`	`"circle" \| "square"`	Shape variant. Defaults to DEFAULT_SHAPE.
`children`	`RemixNode`	The host's compound parts: ImagePlaceholder.Image, ImagePlaceholder.Fallback, and an optional ImagePlaceholder.Badge.

Also accepts everything in TagProps<"span">.