Skip to main content

Expand Image View

Screenshot of the Console with the correct URL highlighted.
Click anywhere to close this view.
Screenshot of the Console with the correct URL highlighted.
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

CriteriaComponent Meets Criteria
Has hover stylesNo
Has light and dark modeYes
Has brand themingYes

Component Props

Prop NameTypeDescription
altTextstringAlternative text if image does not render. Also relevant for accessibility.
imgSrcobjectThe 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>