Image

Framed image with shape, fit, shadow, and dimension controls.

Always provide meaningful config.alt when the image conveys information. For circular profile photos use Avatar; for card hero regions use CardMedia.

Thumbnails, hero images, and content illustrations
Profile or product photos with shape and fit presets
Block-width images inside cards and article layouts

Set config.src and config.alt for accessible images.
Use config.shape for circular, rounded, or square corners.
Set config.fit to control object-fit within a bounded frame.
Enable config.shadow for elevated card-style imagery.

Default image

Square image with default fill fit — suitable for thumbnails and content blocks.

Rounded shape

Rounded corners suit cards and inline content thumbnails.

Shadow elevation

Shadow treatment adds depth for featured or card imagery.

Fit cover and contain

Object-fit presets control cropping within a fixed frame.

Block width

Block images span the full width of their container.

Theme border token

Image borders use stroke tokens from the Orbital theme provider.

Bounded frame

Explicit width and height constrain layout while fit controls cropping.