C15 Image asset
The Image Asset component displays a single image that spans the full width of its container while maintaining its original dimensions. If the image exceeds the container size, it will shrink to fit while preserving its aspect ratio.
Component requirements
Required:
- Image asset: Following formats are allowed: WebP/JPG/PNG/GIF.
- Image alignment: Left/Center/Right: Default: Right.
- Image border On: Checkbox. Default: unchecked (no border).
Optional:
-
Image CTA link: Text field along with associated link type (internal/external/anchor/email/phone)
- Image caption: Rich text field. Allows user to add a caption which will be positioned below the image.
- Mobile image: Allows to override the image on mobile. Following formats are allowed: WebP/JPG/PNG/GIF.
Additional component notes:
- Image will inherit its default size (if it's larger than container it will shrink to fit within it.
- When possible, images should be optimized under 300kB
- On a mobile device, the image will maintain its original size. It will not fill the container, but if it exceeds the container’s dimensions, it will automatically shrink to fit.
Content guidelines
Lorem ipsum.
Lorem ipsum.
ADA requirements
Ensure that the image has a descriptive alt text for screen readers.
Component examples
Example #1: Small image (300x300, webp), image caption is disabled, image aligned to the left.
Example #2: Wide image (500x250, webp), image caption is enabled, image aligned to the center.
Caption on images is optional
Example #3: Wide image (250x400, webp), image caption is disabled, image aligned to the right.
