Docs

Back to component list

FloatingImage

Renders an image next to the given content.

The image will span from the edge of the screen to the content center.

The content will span from the content center to the edge of the content column.

The image might be cut off by default. You can change this with the fit attribute.

NameDefault
children
noderequired
imageId
stringrequired

Id of the image to be floating next to the content

reverse
boolfalse

Reverse the order of image and content

fit
string'cover'

Set how the image should be fit into the container

Possible options:

  • fill
  • contain
  • cover
  • none
  • scale-down

Live demo and more details: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit



Back to component list