Image
The Image Component creates an img element. You'll use this Component to create images in your Templates.

Props

Prop Key
Type
Notes
source
String
Value used to updated the image URL within the Component.
borderColor
Object
Object must be structured to represent a valid RGBA value.
Example: { r: 229, g: 231, b: 235, a: 1 }
borderRadii
Array
Number
Four values in an array that map to top, right, bottom, and left values.
Example: [ 10, 10, 10, 10 ]
borderRadiusUnits
Array
String
Four values in an array that map to top, right, bottom, and left units.
Example: [ 'px', 'px', 'px', 'px' ]
Possible values (each array item can be different): px, %, em, rem, ch, vw, vh, auto.
borderStyle
String
Possible values: none, solid, dashed, dotted.
borderWidthUnits
Array
String
Four values in an array that map to top, right, bottom, and left units.
Example: [ 'px', 'px', 'px', 'px' ]
Possible values (each array item can be different): px, %, em, rem, ch, vw, vh, auto.
borderWidths
Array
Number
Four values in an array that map to top, right, bottom, and left values.
Example: [ 10, 10, 10, 10 ]
boxShadowColor
Object
Object must be structured to represent a valid RGBA value.
Example: { r: 229, g: 231, b: 235, a: 1 }
boxShadowEnabled
Boolean
Sets whether to enable box shadows.
boxShadowGroups
Array
Object
Array containing box shadow styles. This allows multiple box shadows to be added to a Component.
Example: [ { id: short.generate(), boxShadows: ['8', '8', '0', '0'], boxShadowUnits: ['px', 'px', 'px', 'px'], boxShadowColor: { r: 31, g: 41, b: 55, a: 1 }, }, ]
boxShadowUnits
Array
String
Four values in an array that map to top, right, bottom, and left units.
Example: [ 'px', 'px', 'px', 'px' ]
Possible values (each array item can be different): px, %, em, rem, ch, vw, vh, auto.
boxShadows
Array
Number
Four values in an array that map to top, right, bottom, and left values.
Example: [ 10, 10, 10, 10 ]
display
String
Possible values: block, inline, inline-block.
height
Number
heightUnit
String
Possible values: px, %, em, rem, ch, vw, vh, auto.
margin
Array
Number
Four values in an array that map to top, right, bottom, and left values.
Example: [ 10, 10, 10, 10 ]
marginUnits
Array
String
Four values in an array that map to top, right, bottom, and left units.
Example: [ 'px', 'px', 'px', 'px' ]
Possible values (each array item can be different): px, %, em, rem, ch, vw, vh, auto.
maxHeight
Number
maxHeightUnit
String
Possible values: px, %, em, rem, ch, vw, vh, none.
maxWidth
Number
maxWidthUnit
String
Possible values: px, %, em, rem, ch, vw, vh, none.
minHeight
Number
minHeightUnit
String
Possible values: px, %, em, rem, ch, vw, vh.
minWidth
Number
minWidthUnit
String
Possible values: px, %, em, rem, ch, vw, vh.
objectFit
String
Possible values: cover, fill, contain, scale-down, none.
objectPositionKeyword
String
Possible values: left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom.
objectPositionType
Sets whether to use objectPositions and objectPositionUnits or objectPositionKeyword.
Possible values: keyword, value.
objectPositionUnits
Four values in an array that map to top, right, bottom, and left units.
Example: [ 'px', 'px', 'px', 'px' ]
Possible values (each array item can be different): px, %, em, rem, ch, vw, vh, auto.
objectPositions
Four values in an array that map to top, right, bottom, and left values.
Example: [ 10, 10, 10, 10 ]
overflow
String
Possible values: hidden, visible.
padding
Array
Number
Four values in an array that map to top, right, bottom, and left values.
Example: [ 10, 10, 10, 10 ]
paddingUnits
Array
String
Four values in an array that map to top, right, bottom, and left units.
Example: [ 'px', 'px', 'px', 'px' ]
Possible values (each array item can be different): px, %, em, rem, ch, vw, vh, auto.
position
String
Possible values: static, relative, fixed, absolute.
If value is either static, fixed, or absolute then positions and positionUnits will be used to set the top, right, bottom, and left values.
positionUnits
Array
String
Four values in an array that map to top, right, bottom, and left units.
Example: [ 'px', 'px', 'px', 'px' ]
Possible values (each array item can be different): px, %, em, rem, ch, vw, vh, auto.
positions
Array
Number
Four values in an array that map to top, right, bottom, and left values.
Example: [ 10, 10, 10, 10 ]
width
Number
widthUnit
String
Possible values: px, %, em, rem, ch, vw, vh, auto.
zIndex
Number
Last modified 2mo ago
Copy link
Contents
Props