Figures are used to represent images, graphics and other visual content with a caption.
Images used in articles should have a 16:9 aspect ratio. The caption should contain an image description and a credit to the photographer or content creator.

Standard

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla eget purus vitae dictum. Praesent auctor suscipit elit eu varius.
FotoFrode Fotografsen
<figure class="figure">
    <img src="https://dummyimage.com/360x202/ffda00/293346.png"
         alt="Lorem ipsum dolor sit amet"
         class="figure__image"
         srcset="https://dummyimage.com/360x202/ffda00/293346.png 360w,
                 https://dummyimage.com/480x270/ffda00/293346.png 480w,
                 https://dummyimage.com/640x360/ffda00/293346.png 640w,
                 https://dummyimage.com/720x405/ffda00/293346.png 720w,
                 https://dummyimage.com/768x432/ffda00/293346.png 768w,
                 https://dummyimage.com/960x540/ffda00/293346.png 960w,
                 https://dummyimage.com/1024x576/ffda00/293346.png 1024w,
                 https://dummyimage.com/1280x720/ffda00/293346.png 1280w,
                 https://dummyimage.com/1440x810/ffda00/293346.png 1440w">

    <figcaption class="figure__caption">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla eget purus vitae dictum. Praesent auctor suscipit elit eu varius.
        <div class="figure__photo-credit">
            <span class="figure__photo-label">Foto</span><span class="figure__photographer">Frode Fotografsen</span>
        </div>
    </figcaption>
</figure>

Alternative byline position

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla eget purus vitae dictum. Praesent auctor suscipit elit eu varius.
FotoFrode Fotografsen
<figure class="figure">
    <img src="https://dummyimage.com/360x202/ffda00/293346.png"
         alt="Lorem ipsum dolor sit amet"
         class="figure__image figure__image--half-width"
         srcset="https://dummyimage.com/360x202/ffda00/293346.png 360w,
                 https://dummyimage.com/480x270/ffda00/293346.png 480w,
                 https://dummyimage.com/640x360/ffda00/293346.png 640w,
                 https://dummyimage.com/720x405/ffda00/293346.png 720w,
                 https://dummyimage.com/768x432/ffda00/293346.png 768w,
                 https://dummyimage.com/960x540/ffda00/293346.png 960w,
                 https://dummyimage.com/1024x576/ffda00/293346.png 1024w,
                 https://dummyimage.com/1280x720/ffda00/293346.png 1280w,
                 https://dummyimage.com/1440x810/ffda00/293346.png 1440w">

    <figcaption class="figure__caption figure__caption--beside">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla eget purus vitae dictum. Praesent auctor suscipit elit eu varius.
        <div class="figure__photo-credit">
            <span class="figure__photo-label">Foto</span><span class="figure__photographer">Frode Fotografsen</span>
        </div>
    </figcaption>
</figure>

Magnifiable

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla eget purus vitae dictum. Praesent auctor suscipit elit eu varius.
FotoFrode Fotografsen
<figure class="figure">
	<span class="figure__magnifiable-container">
		<a href="https://dummyimage.com/1280x720/293346/ffda00.png" class="figure__magnifiable-link image-modal">Expand as modal</a>
		<img src="https://dummyimage.com/360x202/293346/ffda00.png"
			alt="Lorem ipsum dolor sit amet"
			class="figure__image"
			srcset="https://dummyimage.com/360x202/293346/ffda00.png 360w,
                    https://dummyimage.com/480x270/293346/ffda00.png 480w,
                    https://dummyimage.com/640x360/293346/ffda00.png 640w,
                    https://dummyimage.com/720x405/293346/ffda00.png 720w,
                    https://dummyimage.com/768x432/293346/ffda00.png 768w,
                    https://dummyimage.com/960x540/293346/ffda00.png 960w,
                    https://dummyimage.com/1024x576/293346/ffda00.png 1024w,
                    https://dummyimage.com/1280x720/293346/ffda00.png 1280w,
                    https://dummyimage.com/1440x810/293346/ffda00.png 1440w">
	</span>
	<figcaption class="figure__caption">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla eget purus vitae dictum. Praesent auctor suscipit elit eu varius.
		<div class="figure__photo-credit">
			<span class="figure__photo-label">Foto</span><span class="figure__photographer">Frode Fotografsen</span>
		</div>
	</figcaption>
</figure>

Linked images

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla eget purus vitae dictum. Praesent auctor suscipit elit eu varius.
FotoFrode Fotografsen
<figure class="figure">
    <a class="figure__image-link" href="#" title="Lenketittel">
        <img src="https://dummyimage.com/360x202/ffda00/293346.png"
	    alt="Lorem ipsum dolor sit amet"
	    class="figure__image figure__image--linked"
	    srcset="https://dummyimage.com/360x202/ffda00/293346.png 1x,
                https://dummyimage.com/480x270/ffda00/293346.png 2x,
                https://dummyimage.com/640x360/ffda00/293346.png 3x,
                https://dummyimage.com/720x405/ffda00/293346.png 4x">
    </a>
    <figcaption class="figure__caption">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla eget purus vitae dictum. Praesent auctor suscipit elit eu varius.
        <div class="figure__photo-credit">
            <span class="figure__photo-label">Foto</span><span class="figure__photographer">Frode Fotografsen</span>
        </div>
    </figcaption>
</figure>