Pattern library for regjeringen.no

This is a resource for people working with the Government website regjeringen.no. It aims to provide an overview of typical elements and components in the user interface of the website.

The pattern library can be used to maintain modular frontend code and to ensure a visual consistency on the website of the government.

Atoms

Headings

H1 heading is mostly used in combination with a the <header> element:

							
								<header class="content-col-3 header">
									<h1>Karbonnøytral innen 2030</h1>
								</header>
							
						

Bedre lønnsomhet for gårdsbruk i Nord-Norge

Bedre lønnsomhet for gårdsbruk i Nord-Norge

Bedre lønnsomhet for gårdsbruk i Nord-Norge

Bedre lønnsomhet for gårdsbruk i Nord-Norge

Bedre lønnsomhet for gårdsbruk i Nord-Norge
Bedre lønnsomhet for gårdsbruk i Nord-Norge

Paragraph

Lorem ipsum Dolore non sunt fugiat aute Duis laborum officia ut minim in et elit ad culpa sed velit occaecat magna enim.

Blockquote

Lorem ipsum Dolore non sunt fugiat aute Duis laborum officia ut minim in et elit ad culpa sed velit occaecat magna enim.

- Tordenskiold

Inline Elements

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

This text is deleted and This text is inserted

This text has a strikethrough

Superscript®

Subscript for things like H2O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variable element, such as x = y

Hr (horisontal ruler)


Read more

Optional classes: .left | .right (default is right-aligned)

							
								<p class="read-more">
									<a href="">Alle dokumenter om Klima</a>
								</p>
							
						

Unordered list

  • This is a list item in an unordered list
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
  • Lists can be nested inside of each other
    • This is a nested list item
    • This is another nested list item in an unordered list
  • This is the last list item

Ordered list

  1. This is a list item in an ordered list
  2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
  3. Lists can be nested inside of each other
    1. This is a nested list item
    2. This is another nested list item in an ordered list
  4. This is the last list item

Description list

Definition List
A number of connected items or names written or printed consecutively, typically one below the other.
This is a term.
This is the definition of that term, which both live in a dl.
Here is another term.
And it gets a definition too, which is this line.
Here is term that shares a definition with the term below.
And it gets a definition too, which is this line.

Input Fields

Add class base-form on parent element:

							
								<div class="base-form">
									...
								</div>
							
						








Select Menu – See also Custom Select Menu

Checkboxes

Choose something

Checkboxes [Custom]

Wrap each set of input + label's in a div.custom-checkbox – optional class .horizontal:

							
								<div class="custom-checkbox">
									<input id="checkbox1a" name="checkbox" type="checkbox" checked="checked">
									<label for="checkbox1a">Choice A</label>
								</div>

								<div class="custom-checkbox horizontal">
									<input id="checkbox1b" name="checkbox" type="checkbox" checked="checked">
									<label for="checkbox1b">Choice A</label>
								</div>
							
						
Choose something
Choose something

Radio Buttons

Choose one

Radio Buttons [Custom]

Each input + label set is wrapped in a div.custom-radio:

							
								<div class="custom-radio">
									<input id="radio1a" name="radio" type="radio" checked="checked">
									<label for="radio1a">Choice A</label>
								</div>
							
						
Choose one

Button

Button styling will work on both a and button elements

Optional classes .btn-no-icon .btn-cta .btn-wide

							
								<a href="" class="btn btn-no-icon">Knapp</a>
								<a href="" class="btn btn-cta">Call-to-action knapp</a>
								<a href="" class="btn btn-warning">Varselsknapp</a>
								<a href="" class="btn btn-wide">Full-bredde knapp</a>
							
						

class .btn

Knapp

class .btn.btn-no-icon

class .btn.btn-cta

class .btn.btn-warning

class .btn.btn-wide

Table – See also Table-wrapper plugin

Lorem Ipsum Consectetur
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque perferendis pariatur recusandae? Animi ratione dolores ex, quaerat ea, ullam dolorem. Ipsam iure molestias excepturi nihil quam. Officiis ipsum quidem repellendus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque perferendis pariatur recusandae? Animi ratione dolores ex, quaerat ea, ullam dolorem, ipsam iure molestias excepturi nihil quam. Officiis ipsum quidem repellendus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque perferendis pariatur recusandae? Animi ratione dolores ex, quaerat ea, ullam dolorem, ipsam iure molestias excepturi nihil quam. Officiis ipsum quidem repellendus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque perferendis pariatur recusandae? Animi ratione dolores ex, quaerat ea, ullam dolorem, ipsam iure molestias excepturi nihil quam. Officiis ipsum quidem repellendus.

Icons

  • icon-rss
  • icon-print
  • icon-previous
  • icon-next
  • icon-download
  • icon-share
  • icon-menu
  • icon-search
  • icon-love
  • icon-times
  • icon-tick
  • icon-plus
  • icon-minus
  • icon-arrow-right
  • icon-arrow-down
  • icon-arrow-up
  • icon-arrow-left
  • icon-world
  • icon-social-twitter
  • icon-social-facebook
  • icon-media-stop
  • icon-media-record

Portrait

Statsminister Erna Solberg

Favicon

Landscape 4x3

4x3 image

Landscape 16x9

16x9 image

Square

1x1 image

Molecules

Base grid, 3 columns

Sample code where .content-row and .content-col-n have variating utility and styling classes:

							
								<div class="content-row header-row">
									<div class="content-col-3 content-header">
										..
									</div>
								</div>

								<div class="content-row ingress-row">
									<div class="content-col-3 content-header">
										..
									</div>
								</div>

								<div class="content-row border-top">
									<div class="content-col-3 content-section content-useful-links">
										..
									</div>
								</div>

								<div class="content-row">
									<div class="content-col-1 content-section content-current">
										..
									</div>
									<div class="content-col-1 content-section content-current">
										..
									</div>
									<div class="content-col-1 content-section content-current">
										..
									</div>
								</div>

								<div class="content-row">
									<div class="content-col-2 content-section content-current">
										..
									</div>
									<div class="content-col-1 content-section content-current">
										..
									</div>
								</div>

								<div class="content-row">
									<div class="content-col-3 content-intro-topics">
										..
									</div>
								</div>
							
						
[content-col-3]

[content-col-2]
[content-col-1]

[content-col-1]
[content-col-2]

[content-col-1]
[content-col-1]
[content-col-1]

.department-contact

							
								<div class="department-contact content-col-1">
									<h2 class="title">Kontakt for Miljø</h2>

									<p><a href="">Klima- og miljødepartementet</a><br>
										<a href="">Send e-post</a><br>
										Telefon: 22 24 58 03<br>
										<br>
										<strong>Adresse:</strong><br>
										Klima- og miljødepartementet<br>
										P.B. 8013 Dep<br>
										0030 Oslo</p>
								</div>
							
						

Kontakt for Miljø

Klima- og miljødepartementet
Send e-post
Telefon: 22 24 58 03

Adresse:
Klima- og miljødepartementet
P.B. 8013 Dep
0030 Oslo

.content-section

							
								<div class="content-section content-col-1 content-current">
									<h2 class="title"><a href="">Økning under 2°C</a></h2>
									<p>Norge vil jobbe for at den globale temperaturøkningen skal holdes under 2°C sammenlignet med førindustrielt nivå.</p>
								</div>
							
						

Økning under 2°C

Norge vil jobbe for at den globale temperaturøkningen skal holdes under 2°C sammenlignet med førindustrielt nivå.

.content-owner-dep

							
								<div class="content-owner-dep content-col-1">
									<a href="">KLD | Klima- og miljødepartementet</a>
								</div>
							
						

Content header subtitle

Note that for semantic reasons (structural order) a visual sub-heading "Tema" is hidden with aria-hidden and a non-visual like is added for screen-readers etc.

							
								<div class="content-header content-col-3">
									<p class="content-header-subtitle" aria-hidden="true">Tema</p>
									<h1>Klima og miljø</h1>
									<p class="content-header-subtitle visuallyhidden">Tema</p>
								</div>
							
						

Klima og miljø

Tema

Article info

							
								<p class="article-info">Artikkel | Sist oppdatert: 10.03.2014</p>
							
						

Ingress

							
								<div class="ingress">
									<p>Klima- og miljødepartementet har hovedansvaret for å ivareta helheten i regjeringens klima- og miljøpolitikk.</p>
								</div>
							
						

Klima- og miljødepartementet har hovedansvaret for å ivareta helheten i regjeringens klima- og miljøpolitikk.

Custom Select Menu

							
								<div class="custom-selector">
									<label for="dokumenttype" data-custom-selector-label="1">Innholdstype</label>
									<select id="dokumenttype" data-custom-selector-id="1">
										<option value="/no/dokument/id2000006/?documenttype=" class="group-header first-in-group">Alle innholdstyper</option>
										<option value="/no/dokument/id2000006/?documenttype=dokumenter/anbud" class="group-header first-in-group">Anbud (92)</option>
										<option value="/no/dokument/id2000006/?documenttype=dokumenter/arbeidsnotater" class="group-header first-in-group">Arbeidsnotater (7)</option>
										...
										<option value="/no/dokument/id2000006/?documenttype=dokumenter/loverogregler/Forskrift">Forskrifter (2138)</option>
										<option value="/no/dokument/id2000006/?documenttype=dokumenter/loverogregler/Kongeligresolusjon">Kongeleg resolusjon (194)</option>
										<option value="/no/dokument/id2000006/?documenttype=dokumenter/loverogregler/Lov">Lover (394)</option>
									</select>
								</div>
							
						

The custom select module depends on script select-module.js (jQuery dependent) which should be included at bottom of page:

							
								<script src="/Static/js/select-module.js"></script>
							
						

Table-wrapper plugin

The table-wrapper plugin wraps a table which is too wide for its surrounding container (parent-element). The plugin depends on script jquery.tablewrapper.js (jQuery dependent) which should be included at bottom of page:

							
								<script src="/Static/js/vendor/jquery.tablewrapper.js"></script>
								<script>
									$("article table").tablewrapper({
										textclosed: 'Vis tabellen i full bredde',
										textopen: 'Skjul overflytende tabell innhold'
									});
								</script>
							
						
Lorem Ipsum Consectetur Eaque perferendis Lorem Ipsum Consectetur
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque perferendis pariatur recusandae? Animi ratione dolores ex, quaerat ea, ullam dolorem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque perferendis pariatur recusandae? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione dolores ex, excepturi nihil quam. Officiis ipsum quidem repellendus quaerat ea, ullam dolorem. Ipsam iure molestias excepturi nihil quam. Officiis ipsum quidem repellendus. Eaque perferendis pariatur recusandae? Animi ratione dolores ex, quaerat ea, ullam dolorem.
Pariatur ratione dolores ex, quaerat ea, ullam dolorem excepturi nihil quam. Officiis ipsum quidem repellendus. Consectetur adipisicing elit. Animi ratione dolores ex, quaerat ea, ullam dolorem, ipsam iure molestias. Excepturi nihil quam ipsum quidem repellendus quaerat ea, ullam dolorem. Eaque perferendis pariatur recusandae? Animi ratione dolores ex, quaerat ea, ullam dolorem. Ipsam iure molestias excepturi nihil quam. Officiis ipsum quidem repellendus. Eaque perferendis pariatur recusandae? Animi ratione dolores ex, quaerat ea, ullam dolorem. Lorem ipsum dolor sit amenimi ratione dolores ex, quaerat ea, ullam dolorem, ipsam iure molestias.

.topiclist

							<ul class="topiclist">
								<li>
									<a href="klima/">Klima</a>
								</li>
								<li>
									<a href="">Forurensing</a>
								</li>
								<li>
									<a href="">Planter</a>
								</li>
								<li>
									<a href="">Friluftsliv</a>
								</li>
								<li>
									<a href="">Miljøvennlig transport</a>
								</li>
								<li>
									<a href="">Hav- og kystmiljø</a>
								</li>
							</ul>
						

.link-list

							
								<ul class="link-list">
									<li>
										<a href="/no/aktuelt/oljeprisen-er-viktig/id731500/">Oljeprisen er viktig</a>
									</li>
									<li>
										<a href="/no/aktuelt/arbeid-trygger-velferden/id714178/">Arbeid trygger velferden</a>
									</li>
									...
								</ul>
							
						

.useful-linklist-new

							
								<ul class="useful-linklist-new grid">
									<li>
										<a href="/no/aktuelt/offisielt-fra-statsrad/offisielt-fra-statsrad1/id30297/">
											<span class="text">
												<b>Offisielt frå statsrådet</b>
												<small></small>
											</span>
										</a>
									</li>
									<li>
										<a href="/no/tema/okonomi-og-budsjett/statsbudsjettet/id1437/">
											<span class="text">
												<b>Statsbudsjettet</b>
												<small></small>
											</span>
										</a>
									</li>
									...
								</ul>
							
						

Organisms

Global tools menu

Javascript plugin, requires language-selector.js

							
								<nav class="hygieneMenu" aria-labelledby="hygiene-menu-label" data-hygiene-menu>
									<h2 id="hygiene-menu-label" class="nav-title">Globale verktøy</h2>
									<ul>
										<li class="rssLink">
											<a href="/nb/system/epostvarsling-og-rss/id2000104/">E-postvarsling/RSS</a>
										</li>

										<li class="fontsize">
											<button type="button" id="fontsize_note_label" aria-controls="fontsize_note" aria-expanded="false" data-fontsize-btn>Skriftstørrelse</button>

											<div tabindex="-1" id="fontsize_note" aria-labelledby="fontsize_note_label" data-fontsize-note>
												<p>For å endre tekststørrelsen, hold Ctrl-tasten nede (Cmd-tasten på Mac) og trykk på + for å forstørre eller - for å forminske.</p>
											</div>
										</li>

										<li class="language">
											<form action="./">
												<fieldset>
													<label for="selectLanguage" class="off-screen" data-select-language-label>Velg språk</label>
													<select name="selectLanguage" id="selectLanguage" data-select-language>
														<option value="/nb/id4/"
															data-language-label-after="Norsk"
															data-language-flag="norwegian"
															class="selected" selected="selected">Vis denne siden på norsk
														</option>
														<option value="/se/id4/"
															data-language-label-after="Sámegiella"
															data-language-flag="sami"
															disabled="disabled">Čájet dán siiddu sámegillii
														</option>
														<option value="/en/id4/"
															data-language-label-after="English"
															data-language-flag="english"
															data-language-last-in-group="true">Show this page in English
														</option>
														<option value="/nb/id4/"
															data-language-label-after="Norsk"
															data-language-flag="norwegian">Norsk forside
														</option>
														<option value="/se/id4/"
															data-language-label-after="Sámegiella"
															data-language-flag="sami">Sámegiel álgosiidui
														</option>
														<option value="/en/id4/"
															data-language-label-after="English"
															data-language-flag="english">English home page</option>
													</select>
													<input type="submit" value="Endre språk" class="submit-select-language">
												</fieldset>
											</form>
										</li>
									</ul>
								</nav>
							
						

Main menu with mega-dropdowns

							
								<nav class="megaMenu" role="navigation" aria-labelledby="mega-menu-label">
									<h2 id="mega-menu-label" class="nav-title">Hovedmeny</h2>

									<ul>
										<li class="megaMenuItem">
											<a href="tema.html" class="primaryMenuItem hasDropdown" id="megamenupanel_tema_label" role="button" aria-controls="megamenupanel_tema">
												Tema
											</a>

											<div class="megamenupanel_listing" id="megamenupanel_tema" aria-labelledby="megamenupanel_tema_label" aria-expanded="false" data-megamenu-target>
												<div class="megamenuInner">
													<div class="border-frame">
														<p class="toSection"><a href="tema.html">Alle tema</a></p>

														<div class="section">
															<ul class="columnize">
																<li><a href="tema.html">Arbeid og velferd</a></li>
																<li><a href="tema.html">Bolig og eiendom</a></li>
																<li><a href="tema.html">Energi</a></li>
																<li><a href="tema.html">Familie og oppvekst</a></li>
																<li><a href="tema.html">Forbruker</a></li>
																<li><a href="tema.html">Forsvars- og sikkerhetspolitikk</a></li>
																<li><a href="tema.html">Helse og omsorg</a></li>
																<li><a href="tema.html">Innvandring og inkludering</a></li>
																<li><a href="tema.html">Internasjonalt</a></li>
																<li><a href="tema.html">Kommuner og distrikter</a></li>
																<li><a href="tema.html">Kultur, fritid og livssyn</a></li>
																<li><a href="tema.html">Likestilling</a></li>
																<li><a href="tema.html">Lov og rett</a></li>
																<li><a href="tema.html">Mat, fiskeri og landbruk</a></li>
																<li><a href="tema.html">Miljø</a></li>
																<li><a href="tema.html">Næringsliv</a></li>
																<li><a href="tema.html">Offentlig forvaltning</a></li>
																<li><a href="tema.html">Samfunnssikkerhet</a></li>
																<li><a href="tema.html">Transport og kommunikasjon</a></li>
																<li><a href="tema.html">Urfolk og minoriteter</a></li>
																<li><a href="tema.html">Utdanning og forskning</a></li>
																<li><a href="tema.html">Økonomi</a></li>
															</ul>
														</div>
													</div>

													<button type="button" class="closeButton" data-close-megamenu>
														<span class="visuallyhidden">Lukk meny</span>
													</button>
												</div>
											</div>
										</li>

										<li class="megaMenuItem">
											...
										</li>
										...
									</ul>
								</nav>
							
						

Search

							
								<div class="topNavigationSearch">
									<form id="topNavigationSearchForm" action="./" method="get">
										<div class="topNavigationSearchWrap">
											<label for="quickSearch" class="visuallyhidden">Søk</label>
											<input type="search" name="term" placeholder="Søk" class="quickSearch autocomplete" id="quickSearch" data-form-id="topNavigationSearchForm" accesskey="2">
											<button class="searchSubmit">Søk</button>
										</div>
									</form>
								</div>
							
						

Breadcrumbs

							
								<div class="breadcrumbsWrapper">
									<nav class="breadcrumbs">
										<h2 id="breadcrumbs-label" class="breadcrumbs-label">Du er her:</h2>
										<ul aria-labelledby="breadcrumbs-label">
											<li class="crumbItem">
												<a href="/nb/id4/" role="button" aria-controls="crumb_1">regjeringen.no</a>

												<ul id="crumb_1" aria-expanded="false">
													<li>
														<a href="/nb/tema/id208/">Tema</a>
													</li>
													<li>
														<a href="/nb/dokument/id2000006/">Dokument</a>
													</li>
													<li>
														<a href="/nb/aktuelt/id1150/">Aktuelt</a>
													</li>
													...
												</ul>
											</li>
											<li class="crumbItem">
												<a href="/nb/dep/id933/" role="button" aria-controls="crumb_4">Departementene</a>

												<ul id="crumb_4" aria-expanded="false">
													<li>
														<a href="/nb/dep/smk/id875/">Statsministerens kontor</a>
													</li>
													<li>
														<a href="/nb/dep/asd/id165/">Arbeids- og sosialdepartementet</a>
													</li>
													<li>
														<a href="/nb/dep/bld/id298/">Barne-, likestillings- og inkluderingsdepartementet</a>
													</li>
													...
												</ul>
											</li>
											<li class="crumbItem">
												<a href="/nb/dep/kud/id545/" role="button" aria-controls="crumb_933">Kulturdepartementet</a>

												<ul id="crumb_933" aria-expanded="false">
													<li>
														<a href="/nb/dep/kud/dep/id550/">Ansvarsområder for Kulturdepartementet</a>
													</li>
													<li>
														<a href="/nb/dep/kud/org/id569/">Organisering og ledelse</a>
													</li>
													...
												</ul>
											</li>
											<li>Kontakt</li>
										</ul>
									</nav>
								</div>
							
						

Find document

Pagination

Sharing

							
								<ul class="sharePrint">
									<li class="sharing">
										<label id="sharing_label" for="sharing_toggler" class="sharing-toggle" data-sharing-label="">Del/tips</label>
										<input type="checkbox" id="sharing_toggler" class="sharing-toggle-checkbox" data-toggle="[data-sharing-panel]" data-sharing-toggler="" aria-controls="sharing_panel">

										<div id="sharing_panel" class="sharing-panel" data-sharing-panel="" aria-labelledby="sharing_label">
											<p class="sharing-title">Tips en venn</p>
											<ul class="socialmedia_linklist">
												<li><a href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fwww.regjeringen.no%2Fno%2F_SIDE_" class="Facebook">Facebook</a></li>
												<li><a href="https://twitter.com/share?url=https%3A%2F%2Fwww.regjeringen.no%2Fno%2F_SIDE_" class="Twitter">Twitter</a></li>
												<li><a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.regjeringen.no%2Fno%2F_SIDE_" class="Linkedin">LinkedIn</a></li>
												<li><a href="mailto:?subject=Tips%20fra%20regjeringen.no%3A%20_SIDETITTEL_&body=https%3A%2F%2Fwww.regjeringen.no%2Fno%2F_SIDE_" class="email">Epost</a></li>
											</ul>
											<button title="Lukk" class="closeButton" data-toggle="[data-sharing-panel]" data-set-focus="[data-sharing-toggler]"></button>
										</div>
									</li>
									<li class="print">
										<button class="print-page" data-print-page="">Skriv ut</button>
									</li>
								</ul>
							
						

Global footer

							
								<footer class="page-footer" role="contentinfo">footer class="page-footer" role="contentinfo">
									<div class="wrapper">
										<div class="clearfix">
											<div class="col">
												<div class="logo">
													<a href="/">
														Regjeringen.no<span></span>
													</a>
												</div>
											</div>

											<div class="col">
												<ul>
													<li>
														<h2 class="title">
															<a href="/nb/Om-nettstedet/strategi-organisering-og-historikk-/id450433/">Om nettstedet</a>
														</h2>

														<ul>
															<li>
																<a href="/nb/Om-nettstedet/strategi-organisering-og-historikk-/id450433/">Formål, organisering og historikk </a>
															</li>
															<li>
																<a href="/nb/Om-nettstedet/innholdsstrategi/id2076583/">Innholdsstrategi for regjeringen.no</a>
															</li>
															<li>
																<a href="/nb/Om-nettstedet/statistikk/besoksstatistikk-for-2014/id748936/">Besøksstatistikk for 2014</a>
															</li>
															<li>
																<a href="/nb/Om-nettstedet/tilgjengelighet/id450484/">Tilgjengelighet</a>
															</li>
															<li>
																<a href="/nb/Om-nettstedet/personvernpolicy/id650340/">Personvernpolitikk</a>
															</li>
														</ul>
													</li>
												</ul>
											</div>

											<div class="col">
												<p>Departementenes sikkerhets- og serviceorganisasjon,</p>
												<p>Postboks 8129 Dep, 0032 OSLO <br />Tlf: 22 24 90 90</p>
												<p><span>E-post: </span><a href="mailto:redaksjonen@dss.dep.no">redaksjonen@dss.dep.no</a><span> </span></p>
												<p>Ansatte i departementene (ikke FD), SMK, DSS: <a title="Ansatte i dep. og SMK" href="https://depkatalog.no/">Depkatalog</a></p>
												<p>Org.nr. 974 761 424</p>
											</div>
										</div>
									</div>
								</footer>
							
						

Nett-TV

Nett-TV Direkte nå Pressekonferanse om handlingsplan mot radikalisering og voldeling ekstremisme

Se opptaket her

Image carousel

The image carousel depends on script carousel.js (jQuery dependent):

							
								<script src="/Static/js/carousel.js"></script>
							
						

The data-carousel-id value must be unique.

The data-carousel-wrapper takes values landscape or portrait.

  • Images sizes for landscape mode: 316px × 177px
  • Images sizes for portrait mode: 165px × 220px
							
								<div class="carousel-wrapper clearfix" data-carousel-wrapper="landscape" data-carousel-id="1">
									<div class="carousel" data-carousel>
										<ul class="clearfix">
											<li data-carousel-item="1">
												<img src="//placehold.it/316x177" alt="Alternativ bildetekst" data-carousel-image>
												<div class="info">
													<h3 class="name"><a href="https://www.regjeringen.no/">Integrering</a></h3>
													<p class="position">Subtittel</p>
													<p class="description">Hovudmålet for integreringspolitikken er at innvandrarar og borna deira skal få bruke ressursane sine og bidra til fellesskapet. Nøklane til integrering i det norske samfunnet ligg i å delta i arbeidslivet og ha gode norskkunnskapar.</p>
													<blockquote class="quote"><p>Sitatblokk</p></blockquote>
												</div>
											</li>
											<li data-carousel-item="2">
												<img src="//placehold.it/316x177" alt="Alternativ bildetekst" data-carousel-image>
												<div class="info">
													<h3 class="name"><a href="https://www.regjeringen.no/">Stortingsmelding om humaniora</a></h3>
													<p class="position"></p>
													<p class="description">Regjeringen starter nå arbeidet med en egen melding til Stortinget om humanistisk forskning og utdanning og tar sikte på å legge den frem i 2017.</p>
													<blockquote class="quote"><p>Sitatblokk</p></blockquote>
												</div>
											</li>
											...
										</ul>

										<span class="swipe-icon"></span>
									</div>

									<button type="button" class="carousel-prev" title="Forrige" data-carousel-prev></button>
									<button type="button" class="carousel-next" title="Neste" data-carousel-next></button>

									<div class="carousel-info clearfix" data-carousel-info aria-live="assertive" aria-relevant="all" aria-atomic="true">
										<div data-carousel-info-content></div>
										<span class="carousel-info-pointer" data-carousel-info-pointer></span>
									</div>
								</div>
							
						

Article

.article-body

H2 overskrift

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt rutrum justo eget dignissim. In tincidunt rutrum justo eget dignissim.

H3 overskrift

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt rutrum justo eget dignissim. In tincidunt rutrum justo eget dignissim.

H4 overskrift

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt rutrum justo eget dignissim. In tincidunt rutrum justo eget dignissim.

H5 overskrift

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt rutrum justo eget dignissim. In tincidunt rutrum justo eget dignissim.

  • Curabitur ut ornare leo
  • Morbi eget risus quis sem venenatis interdum
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt rutrum justo eget dignissim. Curabitur ut ornare leo.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam nostrum eius eum perspiciatis ipsa inventore dolorum consectetur nesciunt sunt magnam qui, eligendi rem molestiae suscipit recusandae necessitatibus veniam praesentium fugiat.
  • Beatae numquam dicta voluptas molestiae incidunt debitis consequatur quibusdam saepe illum est, blanditiis eaque et temporibus fugiat omnis obcaecati molestias error praesentium quia. Ipsum deserunt dolorum odit excepturi libero fugiat.
  • Veritatis iusto quaerat, illum quibusdam quia architecto itaque doloremque, recusandae asperiores porro! Et amet doloribus ipsa, similique necessitatibus natus, illo non dignissimos facilis. Ipsum sit vel error dolorum temporibus labore.

In tincidunt rutrum justo eget dignissim. Curabitur ut ornare leo. Morbi eget risus quis sem venenatis interdum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto vitae fugiat dignissimos enim repellendus recusandae consectetur nobis beatae earum modi vero, maxime consequatur provident esse soluta, quae neque praesentium adipisci.

  1. Curabitur ut ornare leo
  2. Morbi eget risus quis sem venenatis interdum
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt rutrum justo eget dignissim. Curabitur ut ornare leo.

In tincidunt rutrum justo eget dignissim. Curabitur ut ornare leo. Morbi eget risus quis sem venenatis interdum

Table caption morbi eget risus quis sem venenatis interdum
Curabitur ut ornare In tincidunt rutrum Venenatis interdum Curabitur ut ornare In tincidunt rutrum Curabitur ut ornare In tincidunt rutrum
Morbi semper ante at sapien placerat, sit amet tempor dolor fringilla. In tincidunt rutrum justo eget dignissim. Curabitur ut ornare leo. Curabitur ut ornare leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi semper ante at sapien placerat, sit amet tempor dolor fringilla. In tincidunt rutrum justo eget dignissim. Curabitur ut ornare leo. Morbi semper ante at sapien placerat, sit amet tempor dolor fringilla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt rutrum justo eget dignissim.

Alternativ bildetekst
Her er en bildetekst.

Templates

HTML mockups

Organisms (examples in framework)

Historisk arkiv, dokumenter og nyhetsbrev

Høringssvar

Fonts & colors

Fonts

Primary font: 'Open Sans', sans-serif;

Primary font italic: 'Open Sans', sans-serif;

Primary font bold: 'Open Sans', sans-serif;

Colors

#333
$darkGray
#545454
$mediumGray4
#666
$darkGray2
#6e6e6e
$mediumGray
#767676
$mediumGray3
#d7d3d3
$lightGray3
#e4e0e0
$lightGray4
#eae6e6
$lightGray2
#f4f1f0
$lightGray
#002e5e
$darkBlue
#144696
$darkBlue2
#1a5ebd
$blue2
#3867c8
$blue
#6eaaf0
$lightBlue
#c32d41
$red2
#d94a5e
$red
#ff6875
$lightRed
#007662
$darkGreen
#009d6f
$green
#fbd036
$yellow2
#fce782
$yellow
#44638d
$dustBlue
#5a6e82
$dustBlueDark
#e9e4df
$mediumBeige