Images and figures

Guidance

The images and figures component allows you to add responsive images and figures to your website or application. This component includes various options for displaying and formatting images and figures, such as resizing, cropping, and adding captions. By default, all images are responsive to their parent containers.

The <img> element is used to display images, while the <figure> element is used to wrap image content along with a caption.

Images

The <img> element is a self-contained tag that is used to display a single image. It requires two attributes: src, which specifies the URL of the image, and alt, which provides a text description of the image for accessibility purposes.

<img src="../img/your-image.jpg" alt="Describe the image" />

Images with 16:9 aspect ratio

Using a consistent aspect ratio for images can help maintain a consistent visual aesthetic across your website or application. Cropping images to a 16:9 aspect ratio can help you to make the most of the available space on your website. This is the standard ratio used in visual media and allows you to display images in a larger size without taking up as much vertical space.

<div class="gnb-img-ratio">
	<img src="../img/your-image.jpg" alt="Describe the image" />
</div>

Figures

The <figure> element is used to group together an image along with a caption or legend that describes the content. The figure element uses <figcaption>to provide the caption.

<!-- Figure -->
<figure>
	<img src="../img/your-image.jpg" alt="Describe the image" />
	<figcaption>A caption for the image above.</figcaption>
</figure>

<!-- Figure image cropped with 16:9 aspect ratio -->
<figure>
	<div class="gnb-img-ratio">
		<img src="../img/your-image.jpg" alt="Describe the image" />
	</div>
	<figcaption>A caption for the image above.</figcaption>
</figure>