Figures

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, 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

<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

<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

<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>

Takk!

Du får dessverre ikke svar på tilbakemeldingen din. Har du spørsmål eller trenger du hjelp? Kontakt politiet på telefon, e-post eller ved å møte opp.

Feil

Det har skjedd en feil. Vi har ikke fått tilbakemeldingen din. Prøv igjen.

Politiets tjenester

Råd og forebygging

Aktuelt, tall og fakta

Kontakt politiet

Om oss