11.12.1

Image

A responsive image component.

Default


picture of a misty forest
picture of a misty forest
picture of a misty forest
picture of a misty forest
picture of a misty forest
picture of a misty forest
Rounded






Error Handling

Handle when an image fails to load or a broken link is passed. This is not neccessary most of the time.


Alter the display when the image fails to load:
This is the alt text!

Give it an error class:
This is the alt text!

Or hide it completely:
This is the alt text!
Transition

picture of a misty forest

To add a transition, simply use the transition prop and one of the three string options "fade", "blur", or "scale".


UI Samples using Image Kit

Get the full picture. See how this kit is used in our samples.

Available Props

  • classname
  • dark
  • margin
  • margin_bottom
  • margin_left
  • margin_right
  • margin_top
  • margin_x
  • margin_y
  • max_width
  • padding
  • padding_bottom
  • padding_left
  • padding_right
  • padding_top
  • padding_x
  • padding_y
  • z_index
  • number_spacing
  • shadow
  • line_height
  • display
  • cursor
  • flex_direction
  • flex_wrap
  • justify_content
  • justify_self
  • align_items
  • align_content
  • align_self
  • flex
  • flex_grow
  • flex_shrink
  • order
  • id
  • data
  • aria
  • children
  • alt
  • on_error
  • rounded
  • size
  • transition
  • url