Hopp til hovedinnhold

Employee role card

Brukes til utlisting av ansatte og for å vise ansatt(e) i kontekst på en side. Kan brukes med og uten bilde. Kortet har fritekstfelt (ansvarområde), begrens tekstlengden her. Hvis teksten blir lengre enn bildet vil det blå feltet utvide seg. Eget bildeformat (portrett)for kort på desktop. Mobil bruker samme format som landingsside.

<article class="role--card role--has-image background--dark-2">
	<div class="row">
		<div class="xsmall-12 large-5 column">
			<figure class="figure figure--main-photo">
                <a class="role__photo-link link--no-underline" href="#">
                    <img src="https://via.placeholder.com/900x750" alt="" class="figure__image role__image role__image--mobile">
                    <img src="https://via.placeholder.com/320x400" alt="" class="figure__image role__image role__image--desktop">
                </a>
			</figure>
		</div>
		<div class="xsmall-12 large-7 column">
			<div class="role__info--card">
				<h2 class="role__title role__title--inverted text--inverted">
                    <a class="role__title-link role__title-link--inverted link--inverted" href="#">Knut Smedsrud</a>
                </h2>
				<dl class="role__structured-info structured-info text--inverted">
					<dt class="structured-info__key">Stilling</dt>
					<dd class="structured-info__value weight--light">Avdelingsdirektør</dd>
					<dt class="structured-info__key">Enhet</dt>
					<dd class="structured-info__value weight--light">Espen Politidistrikt</dd>
					<dt class="structured-info__key">Ansvarsområde</dt>
					<dd class="structured-info__value weight--light">Avdeling for politiberedskap og krisehåndtering </dd>
					<dt class="structured-info__key">E-post</dt>
					<dd class="structured-info__value weight--light"><a class="link--inverted" href="mailto:fornavn.etternavn@politet.no">fornavn.etternavn@politet.no</a></dd>
					<dt class="structured-info__key">Telefon</dt>
					<dd class="structured-info__value weight--light"><a class="link--inverted" href="tel:22334455">22 33 44 55</a></dd>
					<dt class="structured-info__key">Mobil</dt>
					<dd class="structured-info__value weight--light"><a class="link--inverted" href="tel:98765432">987 65 432</a></dd>
				</dl>
			</div>
		</div>
	</div>
</article>

Employee role card without photo

<article class="role--card background--dark-2">
	<div class="row">
		<div class="xsmall-12 column">
			<div class="role__info--card">
				<h2 class="role__title role__title--inverted text--inverted">
                    <a class="role__title-link role__title-link--inverted link--inverted" href="#">Knut Smedsrud</a>
                </h2>
				<dl class="role__structured-info structured-info text--inverted">
					<dt class="structured-info__key">Stilling</dt>
					<dd class="structured-info__value weight--light">Avdelingsdirektør</dd>
					<dt class="structured-info__key">Enhet</dt>
					<dd class="structured-info__value weight--light">Espen Politidistrikt</dd>
					<dt class="structured-info__key">Ansvarsområde</dt>
					<dd class="structured-info__value weight--light">Avdeling for politiberedskap og krisehåndtering </dd>
					<dt class="structured-info__key">E-post</dt>
					<dd class="structured-info__value weight--light"><a class="link--inverted" href="mailto:fornavn.etternavn@politet.no">fornavn.etternavn@politet.no</a></dd>
					<dt class="structured-info__key">Telefon</dt>
					<dd class="structured-info__value weight--light"><a class="link--inverted" href="tel:22334455">22 33 44 55</a></dd>
					<dt class="structured-info__key">Mobil</dt>
					<dd class="structured-info__value weight--light"><a class="link--inverted" href="tel:98765432">987 65 432</a></dd>
				</dl>
			</div>
		</div>
	</div>
</article>

Contact point role card

Brukes til å liste ut eller vise i kontekst. Fritekstfeltet Tilgjengelighet skal vise tekst som følger: Tilgjengelighet: Mandag–onsdag, 08:00–16:00 og fredag 09:00–14:00

<article class="role--card background--white-2">
    <div class="role__info--card">
        <h2 class="role__title">
            <a class="role__title-link" href="#">Agder politidistrikt &ndash; Pressekontakter</a>
        </h2>
        <h2 class="role__contact-point-resposibility">Straffesaker</h2>
        <dl class="role__structured-info structured-info">
			<dt class="structured-info__key">E-post</dt>
			<dd class="structured-info__value weight--light"><a href="mailto:fornavn.etternavn@politiet.no">fornavn.etternavn@politiet.no</a></dd>
			<dt class="structured-info__key">Telefon</dt>
			<dd class="structured-info__value weight--light"><a href="tel:22334455">22 33 44 55</a></dd>
			<dt class="structured-info__key">Mobil</dt>
			<dd class="structured-info__value weight--light"><a href="tel:98765432">987 65 432</a></dd>
			<dt class="structured-info__key">Tilgjengelighet</dt>
			<dd class="structured-info__value weight--light">Mandag-onsdag (0800-1600)</dd>
		</dl>
    </div>
</article>

Contact point card

<article class="role--card background--white-2">
    <div class="role__info--card">
        <h2 class="role__title">
            <a class="role__title-link" href="#">Operative hendelser</a>
        </h2>
        <dl class="role__structured-info structured-info">
			<dt class="structured-info__key">E-post</dt>
			<dd class="structured-info__value weight--light"><a href="mailto:fornavn.etternavn@politiet.no">fornavn.etternavn@politiet.no</a></dd>
			<dt class="structured-info__key">Telefon</dt>
			<dd class="structured-info__value weight--light"><a href="tel:22334455">22 33 44 55</a></dd>
			<dt class="structured-info__key">Mobil</dt>
			<dd class="structured-info__value weight--light"><a href="tel:98765432">987 65 432</a></dd>
			<dt class="structured-info__key">Tilgjengelighet</dt>
			<dd class="structured-info__value weight--light">Mandag-onsdag (0800-1600)</dd>
		</dl>
    </div>
</article>