Image

Image display element with flexible sizing, positioning, and styling options for responsive visual content.

Live Preview

Default

Rounded with shadow

Code

1<!-- Basic Image -->
2<img
3  src="/path/to/image.jpg"
4  alt="Description of the image"
5  class="image"
6/>
7
8<!-- Image with Caption -->
9<figure class="image-figure">
10  <img
11    src="/path/to/image.jpg"
12    alt="Product showcase"
13    class="image"
14  />
15  <figcaption>Image caption text</figcaption>
16</figure>
17
18<!-- Responsive Image -->
19<img
20  src="/path/to/image.jpg"
21  srcset="
22    /small.jpg 400w,
23    /medium.jpg 800w,
24    /large.jpg 1200w
25  "
26  sizes="(max-width: 600px) 100vw, 50vw"
27  alt="Responsive product image"
28  class="image image--responsive"
29/>

Brand Properties

The following table maps CRAFT Image component properties to brand-specific values.

Property	Type	Brand Default	HoB Value	TAE Value
Image source	Dropdown	Image URL	Image URL	Image URL
URL	Text input	(empty)	(empty)	(empty)
Alt text	Text input	(empty)	(empty)	(empty)
Title text	Text input	(empty)	(empty)	(empty)
Aspect ratio	Toggle	Original	Original	Original
Image width	Slider	500px	500px	500px
Image Position	9-position grid	center	center	center
Margins	Input (px)	0	0	0
Padding	Input (px)	0	0	0
Corner Radius	Input (px)	0	0	0
Border Style	Dropdown	none	none	none
Border Width	Input	0px	0px	0px
Border Color	Color picker	rgb(0,0,0)	rgb(0,0,0)	rgb(0,0,0)
Opacity	Slider	100%	100%	100%
Shadow	Toggle	Off	Off (sm, md, lg available)	Off (sm, md, lg available)

Image Position Options

The 9-position grid allows precise control over image placement within its container:

top-left

top

top-right

left

center

right

bottom-left

bottom

bottom-right

Aspect Ratio Options

Original - Maintains the original image aspect ratio
Custom - Allows specifying a custom aspect ratio

Variants

Corner Styles

Square (0)

Small (4px)

Medium (8px)

Large (12px)

Circle

Shadow Variants

Off (default)

Small

Medium

Large

Object Fit Modes

fill

contain

cover

none

Unmapped Brand Values

The following brand-specific values are not directly mapped to CRAFT Image component properties but should be considered when implementing image-related functionality.

Brand	Property	Value	Notes
TAE	Logo Min Size	48px	Minimum dimension for logo images
TAE	Logo Placement	Top left corner	Default position for brand logos
HoB	Logo Min Size	50px height	Minimum dimension for logo images
HoB	Logo Placement	Top right corner	Fixed placement for visual consistency

Accessibility

Always provide alt text - Descriptive text for screen readers
Use empty alt (alt="") for decorative images
Avoid text in images when possible
Ensure sufficient color contrast for any overlaid text
Consider users with slow connections - use lazy loading for below-fold images
Provide text alternatives for complex images (charts, diagrams)

Do's and Don'ts

Do

Always include descriptive alt text
Use appropriate image formats (WebP, AVIF)
Optimize images for web delivery
Use lazy loading for images below the fold
Provide responsive images with srcset
Use brand-appropriate corner radius values

Don't

Skip alt text (accessibility requirement)
Use massive unoptimized images
Rely on images alone for critical information
Stretch images beyond their natural size
Use images when CSS/SVG would suffice
Use logos below the minimum size (48px for TAE)

Related Elements

Slideshow - For image carousels and galleries
Video - For video content
Icon - For small symbolic graphics