Expand Image View

Click anywhere to close this view.

Click image to expand this view.

Overview

This component is an interactable image container. Clicking on it expands the displayed image to original resolution.

Details

Criteria	Component Meets Criteria
Has hover styles	No
Has light and dark mode	Yes
Has brand theming	Yes

Component Props

Prop Name	Type	Description
altText	string	Alternative text if image does not render. Also relevant for accessibility.
imgSrc	object	The image source.

Example Code

import ImageViewExpand from '@site/src/elements/ImageViewExpand';
import Image from '@site/static/images/banners/greenField.png';

<div style={{marginBottom: '20px'}}>
	<ImageViewExpand altText={'Screenshot of the Console with the correct URL highlighted.'} imgSrc={Image} />
</div>