altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
1,136 lines (915 loc) • 83.2 kB
HTML
<!DOCTYPE html>
<html lang="no" class="">
<head>
<title>DESIGNSYSTEM PROTOTYPE - Altinn</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<meta name = "format-detection" content = "telephone=no">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="57x57" href="../../images/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="../../images/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="../../images/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="../../images/favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="../../images/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="../../images/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="../../images/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="../../images/favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="../../images/favicons/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="../../images/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="../../images/favicons/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="../../images/favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="../../images/favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="../../images/favicons/manifest.json">
<link rel="mask-icon" href="../../images/favicons/safari-pinned-tab.svg">
<meta name="apple-mobile-web-app-title" content="Altinn">
<meta name="application-name" content="Altinn">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- FortAwesome icons-->
<script src="https://use.fortawesome.com/ed31cded.js"></script>
<script src="https://use.fortawesome.com/df832575.js"></script>
<!-- Theme stylesheet -->
<link rel="stylesheet" href="../../css/style.prototype.altinn.css" type="text/css" media="screen">
<link rel="stylesheet" href="../../css/style.dist.brreg.css" type="text/css" media="screen">
<link rel="stylesheet" href="../../css/style.dist.altinnett.css" type="text/css" media="screen">
<script type="text/javascript">
if (self === top) {
var elm = document.getElementsByTagName("html")[0];
elm.style.display = "none";
}
</script>
<!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
<!-- never cache patterns -->
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<link rel="stylesheet" href="../../styleguide/css/styleguide.min.css?1535453459273" media="all">
<link rel="stylesheet" href="../../styleguide/css/prism-typeahead.min.css?1535453459273" media="all" />
<!-- End Pattern Lab -->
</head>
<body class="" id="top">
<div class="a-sg-content-preloader"><div class="a-sg-content-preloader-status"> </div></div>
<div class="sg-top">
<div class="container welcome-panel-altinn">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
<h1><span class="a-h4">PATTERN LAB</span><br>Levende designsystem og prototypeverktøy for Altinns webløsninger </h1>
<p class="a-leadText">Designsystemet er laget med Pattern Lab, basert på atomisk designmetodikk. Vi bruker dette systemet til å opprettholde frontend-kode og visuell konsistens på tvers av løsningene. Målet er å skape et felles sted for UI-mønstre og stilsett, som etterhvert skal benyttes av alle løsningene til Altinn.</p>
<div class="a-btn-group a-btn-group-exLinks">
<a href="https://altinn.github.io/designsystem-styleguide/" target="_blank">Les mer om designsystemet </a>
<a href="http://altinn.github.io/DesignSystem/public/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html?1498551267012" target="_blank">
Åpne prototype
</a>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4">
<span class="sg-atom d-none d-lg-block"></span>
</div>
</div>
</div>
<div class="container welcome-panel-brsys" style="display:none;">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
<h1><span class="a-h4">PATTERN LAB</span><br>Levende designsystem og prototypeverktøy for Brønnøysundregistrene webløsninger </h1>
<p class="a-leadText">Designsystemet er laget med Pattern Lab, basert på atomisk designmetodikk. Vi bruker dette systemet til å opprettholde frontend-kode og visuell konsistens på tvers av løsningene. Målet er å skape et felles sted for UI-mønstre og stilsett, som etterhvert kan benyttes av alle løsningene til Brønnøysundregistrene.</p>
<div class="a-btn-group a-btn-group-exLinks">
<a href="https://altinn.github.io/designsystem-styleguide/" target="_blank">Les mer om designsystemet </a>
<a href="https://confluence.brreg.no/display/BK/BRsys+%3A+Brukskvalitet" target="_blank">
Les mer om brukskvalitet i BRsys
</a>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4">
<div class="sg-atom-brsys d-none d-lg-block">
<span class="sg-orbit-brsys">
<span class="sg-core-brsys"></span>
<span class="sg-electron-brsys"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="sg-statesExplanation">
<div class="container">
<div class="sg-pattern-state specification">
<span class="sg-pattern-state-specification">UNDER SPESIFISERING (specification)</span> - komponenten er under spesifisering. <br />
</div>
<div class="sg-pattern-state inprogress">
<span class="sg-pattern-state-inprogress">ARBEID PÅGÅR (inprogress)</span> - komponenten er under utvikling, og blir jobbet på for øyeblikket. <br />
</div>
<div class="sg-pattern-state indesignreview">
<span class="sg-pattern-state-indesignreview">TIL DESIGN REVIEW (indesignreview)</span> - komponenten er klar for design gjennomgang/diskusjon, og venter på godkjenning. <br />
</div>
<div class="sg-pattern-state complete">
<span class="sg-pattern-state-complete">FERDIG (complete)</span> - komponenten anses som ferdig og klar for bruk.<br />
</div>
<div class="sg-pattern-state needsrevalidation">
<span class="sg-pattern-state-needsrevalidation">MÅ REVALIDERES (needsrevalidation)</span> - det er gjort endringer i rammeverk / platform som gjør at denne komponenten må revalideres. <br />
</div>
<div class="sg-pattern-state archived">
<span class="sg-pattern-state-archived">ARKIVERT</span> - komponenten er arkivert og blir ikke vedlikeholdt for øyeblikket.
<div class="custom-control custom-control-inline custom-checkbox a-custom-checkbox ml-1">
<input type="checkbox" class="custom-control-input a-sg-js-toggleArchived" id="check-archived">
<label class="custom-control-label" for="check-archived">Vis arkiverte komponenter</label>
</div>
</div>
<br />
<span class="sg-pattern-variations">
<span class="sg-pattern-state-variations">♺</span> VARIASJONER - En variasjon av en annen komponent
<a href="javascript:;" aria-label="info" tabindex="0" class="a-helpIconButton" role="button" data-toggle="popover" data-template='<div class="popover " role="tooltip"><div class="popover-arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' data-target="#myPopup3" data-placement="bottom" data-trigger="focus" title="Variasjoner" data-content="Variasjonskomponentene har samme HTML-struktur som sin hovedkomponent, men viser ulike variasjoner av stilsetting man kan oppnå ved å benytte ulike CSS-klasser etc.">
<i class="ai ai-info-circle"></i><span class="sr-only">Vis mer info om variasjonskomponentene</span>
</a>
</span>
</div>
</div>
<div class="container clearfix">
<!-- View All Patterns in a Pattern Sub-Type -->
<div class="sg-main" role="main">
<!-- Patterns -->
<div id="sg-patterns" class="clearfix">
<div id="viewall-molekyler-tekst" class="sg-pattern-category">
<h2 class="sg-pattern-category-title"><a href="../../patterns/01-molekyler-00-tekst\index.html" class="patternLink" data-patternpartial="viewall-molekyler-tekst">tekst</a></h2>
<div class="sg-pattern-category-body">
</div><!--end sg-pattern-category-body-->
</div><!--end sg-pattern-category-->
<div id="molekyler-person-privat" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-00-tekst-01-person-privat\01-molekyler-00-tekst-01-person-privat.html" class="patternLink" data-patternpartial="molekyler-person-privat" title="Link to Pattern">
Person Privat
<span class="sg-pattern-state complete altinn">complete altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-person-privat" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-person-privat" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-person-privat">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-00-tekst-01-person-privat -->
<div class="a-personRole">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-private ai-lg "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<div class="a-personRole-text " title="JAN PETTERSEN">
<span class="a-personRole-name">JAN PETTERSEN</span>
<span class="a-personRole-role"></span>
</div>
</div>
<!-- END: 01-molekyler-00-tekst-01-person-privat -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-person-privat" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-♺-person-privat-status" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-00-tekst-02-♺-person-privat-status\01-molekyler-00-tekst-02-♺-person-privat-status.html" class="patternLink" data-patternpartial="molekyler-♺-person-privat-status" title="Link to Pattern">
♺ Person Privat Status
<span class="sg-pattern-state complete altinn">complete altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-♺-person-privat-status" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-♺-person-privat-status" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-♺-person-privat-status">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-00-tekst-02-♺-person-privat-status -->
<!-- START: 01-molekyler-00-tekst-01-person-privat -->
<div class="a-personRole">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-private ai-lg "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-dot a-dot-red"></span>
<div class="a-personRole-text " title="JAN PETTERSEN">
<span class="a-personRole-name">JAN PETTERSEN</span>
<span class="a-personRole-role"></span>
</div>
</div>
<!-- END: 01-molekyler-00-tekst-01-person-privat -->
<!-- END: 01-molekyler-00-tekst-02-♺-person-privat-status -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-♺-person-privat-status" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-person-rolle" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-00-tekst-03-person-rolle\01-molekyler-00-tekst-03-person-rolle.html" class="patternLink" data-patternpartial="molekyler-person-rolle" title="Link to Pattern">
Person Rolle
<span class="sg-pattern-state complete altinn altinnett">complete altinn altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-person-rolle" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-person-rolle" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-person-rolle">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-00-tekst-03-person-rolle -->
<div class="a-personRole ">
<div class="d-none d-md-block">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-private ai-lg "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<div class="a-personRole-text" title="William Mjelde">
<span class="a-personRole-role">Styremedlem</span>
<span class="a-personRole-name">William Mjelde</span>
</div>
</div>
<!-- END: 01-molekyler-00-tekst-03-person-rolle -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-person-rolle" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-sammenligning-header" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-00-tekst-05-sammenligning-header\01-molekyler-00-tekst-05-sammenligning-header.html" class="patternLink" data-patternpartial="molekyler-sammenligning-header" title="Link to Pattern">
Sammenligning Header
<span class="sg-pattern-state archived altinn">archived altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-sammenligning-header" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-sammenligning-header" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-sammenligning-header">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-00-tekst-05-sammenligning-header -->
<div class="a-compare-header ">
<div class="row">
<div class="a-compare-container col-6">
<h2>Første sammenligningskategori</h2>
</div>
<div class="a-compare-container col-6">
<h2>Andre sammenligningskategori</h2>
</div>
</div>
</div>
<!-- END: 01-molekyler-00-tekst-05-sammenligning-header -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-sammenligning-header" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-sammenligningselement" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-00-tekst-06-sammenligningselement\01-molekyler-00-tekst-06-sammenligningselement.html" class="patternLink" data-patternpartial="molekyler-sammenligningselement" title="Link to Pattern">
Sammenligningselement
<span class="sg-pattern-state complete altinn altinnett">complete altinn altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-sammenligningselement" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-sammenligningselement" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-sammenligningselement">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-00-tekst-06-sammenligningselement -->
<div class="a-compare-element ">
<h3>Tittel på elementet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et fugiat tenetur quia exercitationem fuga ratione soluta, ex, recusandae blanditiis a quod nihil, explicabo doloremque nam doloribus dolorum enim accusamus dignissimos.</p>
<strong>
<!-- START: 00-atomer-02-lenker-00-link -->
<a
href="/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html"
class=" "
>
Les mer
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</strong>
</div>
<!-- END: 01-molekyler-00-tekst-06-sammenligningselement -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-sammenligningselement" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-lenketittel-med-forklaring" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-00-tekst-07-lenketittel-med-forklaring\01-molekyler-00-tekst-07-lenketittel-med-forklaring.html" class="patternLink" data-patternpartial="molekyler-lenketittel-med-forklaring" title="Link to Pattern">
Lenketittel Med Forklaring
<span class="sg-pattern-state complete altinn altinnett">complete altinn altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-lenketittel-med-forklaring" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-lenketittel-med-forklaring" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-lenketittel-med-forklaring">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-00-tekst-07-lenketittel-med-forklaring -->
<article class="a-linkArticle">
<h2>
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html" class="a-link-title ">
Klikkbar tittel
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et fugiat tenetur quia exercitationem fuga ratione soluta, ex, recusandae blanditiis a quod nihil, explicabo doloremque nam doloribus dolorum enim accusamus dignissimos.</p>
</article>
<!-- END: 01-molekyler-00-tekst-07-lenketittel-med-forklaring -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-lenketittel-med-forklaring" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-prosentbar-med-info" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-00-tekst-20-prosentbar-med-info\01-molekyler-00-tekst-20-prosentbar-med-info.html" class="patternLink" data-patternpartial="molekyler-prosentbar-med-info" title="Link to Pattern">
Prosentbar Med Info
<span class="sg-pattern-state archived altinn">archived altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-prosentbar-med-info" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-prosentbar-med-info" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-prosentbar-med-info">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-00-tekst-20-prosentbar-med-info -->
<div class="row">
<div class="col-sm-12 col-lg-12 my-2">
<div class="row mb-1" id="example-caption-6">
<div class="col-6 col-md-6 text-left">
42 000,— siste 12 mnd
</div>
<div class="col-6 text-right">
8 000,— til du når beløpsgrense for mva
</div>
</div>
<!-- START: 00-atomer-09-bilder-og-media-20-prosentbar -->
<div class="a-progress-bg">
<div class="progress a-progress" aria-describedby="example-caption-6">
<div class="progress-bar progress-info a-progress" role="progressbar" aria-valuenow="84" aria-valuemin="0" aria-valuemax="100" style="width: 84%;">
</div>
</div>
</div>
<!-- END: 00-atomer-09-bilder-og-media-20-prosentbar -->
<div class="row a-progress-numbers">
<div class="col">
<span class="a-progress-numbers-item">0</span>
</div>
<div class="col">
<span class="a-progress-numbers-item">10 000</span>
</div>
<div class="col">
<span class="a-progress-numbers-item">20 000</span>
</div>
<div class="col">
<span class="a-progress-numbers-item">30 000</span>
</div>
<div class="col">
<span class="a-progress-numbers-item">40 000</span>
</div>
<div class="col">
<span class="a-progress-numbers-item">50 000</span>
</div>
</div>
</div>
</div>
<!-- END: 01-molekyler-00-tekst-20-prosentbar-med-info -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-prosentbar-med-info" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-ikon-tekst" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-00-tekst-30-ikon-tekst\01-molekyler-00-tekst-30-ikon-tekst.html" class="patternLink" data-patternpartial="molekyler-ikon-tekst" title="Link to Pattern">
Ikon Tekst
<span class="sg-pattern-state complete altinn altinnett">complete altinn altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-ikon-tekst" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-ikon-tekst" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-ikon-tekst">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-00-tekst-30-ikon-tekst -->
<div class="a-iconText ">
<div class="a-iconText-icon ">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-server a-icon a-icon-circle "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<div class="a-iconText-text">
<span class="a-iconText-text-large">Stor tekst </span>
</div>
</div>
<!-- END: 01-molekyler-00-tekst-30-ikon-tekst -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-ikon-tekst" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-♺-ikon-tekst-ekstratittel" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-00-tekst-31-♺-ikon-tekst-ekstratittel\01-molekyler-00-tekst-31-♺-ikon-tekst-ekstratittel.html" class="patternLink" data-patternpartial="molekyler-♺-ikon-tekst-ekstratittel" title="Link to Pattern">
♺ Ikon Tekst Ekstratittel
<span class="sg-pattern-state complete altinn">complete altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-♺-ikon-tekst-ekstratittel" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-♺-ikon-tekst-ekstratittel" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-♺-ikon-tekst-ekstratittel">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-00-tekst-31-♺-ikon-tekst-ekstratittel -->
<!-- START: 01-molekyler-00-tekst-30-ikon-tekst -->
<div class="a-iconText ">
<div class="a-iconText-icon ">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-server a-icon a-icon-circle "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<div class="a-iconText-text">
<span class="a-iconText-text-small">Liten tekst</span>
<span class="a-iconText-text-large">Stor tekst </span>
</div>
</div>
<!-- END: 01-molekyler-00-tekst-30-ikon-tekst -->
<!-- END: 01-molekyler-00-tekst-31-♺-ikon-tekst-ekstratittel -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-♺-ikon-tekst-ekstratittel" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-♺-ikon-tekst-skygge" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-00-tekst-32-♺-ikon-tekst-skygge\01-molekyler-00-tekst-32-♺-ikon-tekst-skygge.html" class="patternLink" data-patternpartial="molekyler-♺-ikon-tekst-skygge" title="Link to Pattern">
♺ Ikon Tekst Skygge
<span class="sg-pattern-state complete altinn">complete altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-♺-ikon-tekst-skygge" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-♺-ikon-tekst-skygge" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-♺-ikon-tekst-skygge">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-00-tekst-32-♺-ikon-tekst-skygge -->
<!-- START: 01-molekyler-00-tekst-30-ikon-tekst -->
<div class="a-iconText a-iconText-shadow ">
<div class="a-iconText-icon ">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-server a-icon a-icon-circle "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<div class="a-iconText-text">
<span class="a-iconText-text-small">Liten tekst</span>
<span class="a-iconText-text-large">Stor tekst </span>
</div>
</div>
<!-- END: 01-molekyler-00-tekst-30-ikon-tekst -->
<!-- END: 01-molekyler-00-tekst-32-♺-ikon-tekst-skygge -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-♺-ikon-tekst-skygge" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-♺-ikon-tekst-bakgrunn" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-00-tekst-33-♺-ikon-tekst-bakgrunn\01-molekyler-00-tekst-33-♺-ikon-tekst-bakgrunn.html" class="patternLink" data-patternpartial="molekyler-♺-ikon-tekst-bakgrunn" title="Link to Pattern">
♺ Ikon Tekst Bakgrunn
<span class="sg-pattern-state complete altinn">complete altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-♺-ikon-tekst-bakgrunn" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-♺-ikon-tekst-bakgrunn" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-♺-ikon-tekst-bakgrunn">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-00-tekst-33-♺-ikon-tekst-bakgrunn -->
<!-- START: 01-molekyler-00-tekst-30-ikon-tekst -->
<div class="a-iconText a-iconText-background ">
<div class="a-iconText-icon ">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-server a-icon a-icon-circle "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<div class="a-iconText-text">
<span class="a-iconText-text-large">Stor tekst </span>
</div>
</div>
<!-- END: 01-molekyler-00-tekst-30-ikon-tekst -->
<!-- END: 01-molekyler-00-tekst-33-♺-ikon-tekst-bakgrunn -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-♺-ikon-tekst-bakgrunn" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-♺-ikon-tekst-bakgrunn-uten-sirkel" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-00-tekst-34-♺-ikon-tekst-bakgrunn-uten-sirkel\01-molekyler-00-tekst-34-♺-ikon-tekst-bakgrunn-uten-sirkel.html" class="patternLink" data-patternpartial="molekyler-♺-ikon-tekst-bakgrunn-uten-sirkel" title="Link to Pattern">
♺ Ikon Tekst Bakgrunn Uten Sirkel
<span class="sg-pattern-state complete altinn">complete altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-♺-ikon-tekst-bakgrunn-uten-sirkel" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-♺-ikon-tekst-bakgrunn-uten-sirkel" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-♺-ikon-tekst-bakgrunn-uten-sirkel">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-00-tekst-34-♺-ikon-tekst-bakgrunn-uten-sirkel -->
<!-- START: 01-molekyler-00-tekst-30-ikon-tekst -->
<div class="a-iconText a-iconText-background ">
<div class="a-iconText-icon ">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-aordningen ai-lg "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<div class="a-iconText-text">
<span class="a-iconText-text-small">Liten tekst</span>
<span class="a-iconText-text-large">Stor tekst </span>
</div>
</div>
<!-- END: 01-molekyler-00-tekst-30-ikon-tekst -->
<!-- END: 01-molekyler-00-tekst-34-♺-ikon-tekst-bakgrunn-uten-sirkel -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-♺-ikon-tekst-bakgrunn-uten-sirkel" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-ikon-tittel" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-00-tekst-36-ikon-tittel\01-molekyler-00-tekst-36-ikon-tittel.html" class="patternLink" data-patternpartial="molekyler-ikon-tittel" title="Link to Pattern">
Ikon Tittel
<span class="sg-pattern-state indesignreview altinn">indesignreview altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-ikon-tittel" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-ikon-tittel" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-ikon-tittel">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-00-tekst-36-ikon-tittel -->
<div class="a-iconText a-iconText-smallLink ">
<div class="a-iconText-icon">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-server a-icon "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<div class="a-iconText-text">
<!-- START: 00-atomer-07-tekst-09-sidetittel -->
<h1 class="a-fontBold a-pageTitle ">
Tittel på siden
</h1>
<!-- END: 00-atomer-07-tekst-09-sidetittel -->
<!-- START: 00-atomer-07-tekst-20-byline -->
<div class="a-byline">
Byline med
<a href="#" title="Vis alle skjemaene til Lenk">Lenk</a>
</div>
<!-- END: 00-atomer-07-tekst-20-byline -->
</div>
</div>
<!-- END: 01-molekyler-00-tekst-36-ikon-tittel -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-ikon-tittel" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-sidetittel-byline" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-00-tekst-38-sidetittel-byline\01-molekyler-00-tekst-38-sidetittel-byline.html" class="patternLink" data-patternpartial="molekyler-sidetittel-byline" title="Link to Pattern">
Sidetittel Byline
<span class="sg-pattern-state indesignreview altinn">indesignreview altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-sidetittel-byline" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-sidetittel-byline" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-sidetittel-byline">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-00-tekst-38-sidetittel-byline -->
<div class="">
<!-- START: 00-atomer-07-tekst-09-sidetittel -->
<h1 class="a-fontBold a-pageTitle ">
Tittel på siden
</h1>
<!-- END: 00-atomer-07-tekst-09-sidetittel -->
<!-- START: 00-atomer-07-tekst-20-byline -->
<div class="a-byline">
Sist oppdatert 11.10.2016
</div>
<!-- END: 00-atomer-07-tekst-20-byline -->
</div>
<!-- END: 01-molekyler-00-tekst-38-sidetittel-byline -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-sidetittel-byline" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-ikon-link" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-00-tekst-40-ikon-link\01-molekyler-00-tekst-40-ikon-link.html" class="patternLink" data-patternpartial="molekyler-ikon-link" title="Link to Pattern">
Ikon Link
<span class="sg-pattern-state complete altinn altinnett">complete altinn altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-ikon-link" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-ikon-link" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-ikon-link">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-00-tekst-40-ikon-link -->
<div class="a-iconText ">
<div class="a-iconText-icon ">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-aordningen a-icon "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<div class="a-iconText-text">
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html" class="false ">
Lenke som tar deg til en side eller skjema
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</div>
</div>
<!-- END: 01-molekyler-00-tekst-40-ikon-link -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-ikon-link" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-♺-ikon-link-ekstratittel" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-00-tekst-41-♺-ikon-link-ekstratittel\01-molekyler-00-tekst-41-♺-ikon-link-ekstratittel.html" class="patternLink" data-patternpartial="molekyler-♺-ikon-link-ekstratittel" title="Link to Pattern">
♺ Ikon Link Ekstratittel
<span class="sg-pattern-state complete altinn">complete altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-♺-ikon-link-ekstratittel" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-♺-ikon-link-ekstratittel" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-♺-ikon-link-ekstratittel">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-00-tekst-41-♺-ikon-link-ekstratittel -->
<!-- START: 01-molekyler-00-tekst-40-ikon-link -->
<div class="a-iconText ">
<div class="a-iconText-icon ">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-aordningen a-icon "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<div class="a-iconText-text">
<p class="a-iconText-text-small">Liten tekst</p>
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html" class="false ">
Lenke som tar deg til en side eller skjema
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</div>
</div>
<!-- END: 01-molekyler-00-tekst-40-ikon-link -->
<!-- END: 01-molekyler-00-tekst-41-♺-ikon-link-ekstratittel -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-♺-ikon-link-ekstratittel" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-♺-ikon-link-skygge" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-00-tekst-42-♺-ikon-link-skygge\01-molekyler-00-tekst-42-♺-ikon-link-skygge.html" class="patternLink" data-patternpartial="molekyler-♺-ikon-link-skygge" title="Link to Pattern">
♺ Ikon Link Skygge
<span class="sg-pattern-state complete altinn">complete altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-♺-ikon-link-skygge" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-♺-ikon-link-skygge" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-♺-ikon-link-skygge">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-00-tekst-42-♺-ikon-link-skygge -->
<!-- START: 01-molekyler-00-tekst-40-ikon-link -->
<div class="a-iconText a-iconText-shadow ">
<div class="a-iconText-icon ">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-write a-icon "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<div class="a-iconText-text">
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html" class="false ">
Lenke som tar deg til en side eller skjema
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</div>
</div>
<!-- END: 01-molekyler-00-tekst-40-ikon-link -->
<!-- END: 01-molekyler-00-tekst-42-♺-ikon-link-skygge -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-♺-ikon-link-skygge" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-♺-ikon-link-skygge-ekstratittel" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-00-tekst-43-♺-ikon-link-skygge-ekstratittel\01-molekyler-00-tekst-43-♺-ikon-link-skygge-ekstratittel.html" class="patternLink" data-patternpartial="molekyler-♺-ikon-link-skygge-ekstratittel" title="Link to Pattern">
♺ Ikon Link Skygge Ekstratittel
<span class="sg-pattern-state complete altinn">complete altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-♺-ikon-link-skygge-ekstratittel" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-♺-ikon-link-skygge-ekstratittel" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-♺-ikon-link-skygge-ekstratittel">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-00-tekst-43-♺-ikon-link-skygge-ekstratittel -->
<!-- START: 01-molekyler-00-tekst-40-ikon-link -->
<div class="a-iconText a-iconText-shadow ">
<div class="a-iconText-icon ">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-phone a-icon "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<div class="a-iconText-text">
<p class="a-iconText-text-small">Liten tekst</p>
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html" class="false ">
Lenke som tar deg til en side eller skjema
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</div>
</div>
<!-- END: 01-molekyler-00-tekst-40-ikon-link -->
<!-- END: 01-molekyler-00-tekst-43-♺-ikon-link-skygge-ekstratittel -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-♺-ikon-link-skygge-ekstratittel" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-♺-ikon-link-border" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-00-tekst-44-♺-ikon-link-border\01-molekyler-00-tekst-44-♺-ikon-link-border.html" class="patternLink" data-patternpartial="molekyler-♺-ikon-link-border" title="Link to Pattern">
♺ Ikon Link Border
<span class="sg-pattern-state complete altinn">complete altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-♺-ikon-link-border" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-♺-ikon-link-border" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-♺-ikon-link-border">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-00-tekst-44-♺-ikon-link-border -->
<!-- START: 01-molekyler-00-tekst-40-ikon-link -->
<div class="a-iconText a-iconText-border ">
<div class="a-iconText-icon ">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-closedmessage a-icon "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<div class="a-iconText-text">
<p class="a-iconText-text-small">Liten tekst</p>
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html" class="false ">
Lenke som tar deg til en side eller skjema
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</div>
</div>
<!-- END: 01-molekyler-00-tekst-40-ikon-link -->
<!-- END: 01-molekyler-00-tekst-44-♺-ikon-link-border -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-♺-ikon-link-border" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-tekstinnhold-beskrivelse" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-00-tekst-46-tekstinnhold-beskrivelse\01-molekyler-00-tekst-46-tekstinnhold-beskrivelse.html" class="patternLink" data-patternpartial="molekyler-tekstinnhold-beskrivelse" title="Link to Pattern">
Tekstinnhold Beskrivelse
<span class="sg-pattern-state inprogress altinn altinnett">inprogress altinn altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-tekstinnhold-beskrivelse" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-tekstinnhold-beskrivelse" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-tekstinnhold-beskrivelse">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-00-tekst-46-tekstinnhold-beskrivelse -->
<h2 class="a-h3 mb-1">Lorem ipsum</h2>
<span>Bacon ipsum dolor nullam</span>
<div class="mt-2">
<h3 class="a-fontReg mb-1"></h3>
<span class="a-fontBold"></span>
<p> </p>
</div>
<!-- END: 01-molekyler-00-tekst-46-tekstinnhold-beskrivelse -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-tekstinnhold-beskrivelse" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-innboks-header-innhold" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-00-tekst-60-innboks-header-innhold\01-molekyler-00-tekst-60-innboks-header-innhold.html" class="patternLink" data-patternpartial="molekyler-innboks-header-innhold" title="Link to Pattern">
Innboks Header Innhold
<span class="sg-pattern-state indesignreview altinn">indesignreview altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-innboks-header-innhold" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-innboks-header-innhold" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-innboks-header-innhold">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-00-tekst-60-innboks-header-innhold JS doc: setupTruncateLines.js, togglePanel.js -->
<div class="row a-inboxHeadingContent">
<div class="col-auto a-msgIconWrapper">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-openmessage reg-md-lg reg-nw " aria-hidden="true"></i>
<span class="sr-only">Melding lest</span>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<div class="col a-msgHeadingTextContainer">
<div class="d-inline-block">
<div class="col-auto d-md-none a-msgDuedate">
<span class="a-fontBold">frist: </span> 24.06.2017
</div>
<h3 class="mb-0 a-js-truncate-2-sm-down" title="Melding: Lorem ipsum dolor sit amet, dolores fabellas vim in, et eum tation legere deserunt, has decore tacimates at. Per ad erant nihil elaboraret, vide civibus offendit ut duo, saperet albucius patrioque mea ut.">
Melding:
<span class="a-msgTitle">Lorem ipsum dolor sit amet, dolores fabellas vim in, et eum tation legere deserunt, has decore tacimates at. Per ad erant nihil elaboraret, vide civibus offendit ut duo, saperet albucius patrioque mea ut.</span>
</h3>
<div class="a-fontSizeXXS">Liten tekst</div>
</div>
</div>
<div class="col-auto d-none d-md-flex a-msgDuedateIcon">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-circle-exclamation reg-sm "></i>
<span class="sr-only">Frist utløpt</span>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<div class="col-auto d-none d-md-flex a-msgDuedate">
<span class="a-fontBold">frist: </span> 24.06.2017
</div>
<div class="col-auto d-none d-md-flex a-msgShortcutsContainer">
<div class="a-btn a-btn-icon" role="button" tabindex="0" aria-label="Arkiv" title="Arkiv">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-archive reg-sm "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<div class="a-btn a-btn-icon" role="button" tabindex="0" aria-label="Slett" title="Slett">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-trash reg-sm "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
</div>
</div>
<!-- END: 01-molekyler-00-tekst-60-innboks-header-innhold -->
</div>
<script type="text/json" id="sg-pattern-data-molekyler-innboks-header-innhold" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="molekyler-♺-innboks-header-innhold-ulest" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/01-molekyler-00-tekst-61-♺-innboks-header-innhold-ulest\01-molekyler-00-tekst-61-♺-innboks-header-innhold-ulest.html" class="patternLink" data-patternpartial="molekyler-♺-innboks-header-innhold-ulest" title="Link to Pattern">
♺ Innboks Header Innhold Ulest
<span class="sg-pattern-state indesignreview altinn">indesignreview altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="molekyler-♺-innboks-header-innhold-ulest" title="View Pattern Info" id="sg-pattern-extra-toggle-molekyler-♺-innboks-header-innhold-ulest" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-molekyler-♺-innboks-header-innhold-ulest">
</div>
<div class="sg-pattern-example">
<!-- START: 01-molekyler-00-tekst-61-♺-innboks-header-innhold-ulest JS doc: togglePanel.js -->
<!-- START: 01-molekyler-00-tekst-60-innboks-header-innhold JS doc: setupTruncateLines.js, togglePanel.js -->
<div class="row a-inboxHeadingContent a-msgUnread">
<div class="col-auto a-msgIconWrapper">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="reg reg-closedmessage reg-md-lg reg-nw " aria-hidden="true"></i>
<span class="sr-only">Ulest melding</span>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<div class="col a-msgHeadingTextContainer">
<div class="d-inline-block">
<h3 class="mb-0 a-js-truncate-2-sm-down" title="Melding: Lorem ipsum dolor sit amet, dolores fabellas vim in, et eum tation legere deserunt, has decore tacimates at. Per ad erant nihil elaboraret, vide civibus offendit ut duo, saperet albucius patrioque mea ut.">
Melding:
<span class="a-msgTitle">Lorem ipsum dolor sit amet, dolores fabellas vim in, et eum tation legere deserunt, has decore tacimates at. Per ad erant nihil elaboraret, vide civibus offendit ut duo