altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
358 lines (249 loc) • 10.1 kB
HTML
<!-- START: 02-organismer-70-Modal-innhold-_92-roller-tjenesteoversikt -->
<div class="modal-body a-modal-body">
<!-- START: 00-atomer-05-Ekspansjonsknapper-27-ekspanderbar-tittel JS doc: toggleFilter.js -->
<div class="a-collapse">
<div class="">
<div class="row">
<div class="col">
<h2 class="a-collapseHeader a-h3">
<a data-toggle="collapse" href="#" data-target="#departement-filter" aria-expanded="" aria-controls="departement-filter" class="a-collapse-title a-collapse-title--absolute no-decoration collapsed ">
<span class="a-dropdownArrow"></span> <span>Filtrer på etat</span> <span class="a-js-none"></span>
</a>
</h2>
</div>
</div>
</div>
</div>
<!-- END: 00-atomer-05-Ekspansjonsknapper-27-ekspanderbar-tittel -->
<div id="departement-filter" class="a-collapseContent collapse " aria-expanded="false">
<div class="text-sm-center">
<!-- START: 00-atomer-01-forms-03-valgknapp -->
<div class="a-switch ">
<input id="filterID01" class="sr-only" type="checkbox" name="filterID01" value="checkbutton-read">
<label for="filterID01" class="a-switch-label ">
Lorem
</label>
</div>
<div class="a-switch ">
<input id="filterID02" class="sr-only" type="checkbox" name="filterID02" value="checkbutton-read">
<label for="filterID02" class="a-switch-label ">
Ipsum
</label>
</div>
<div class="a-switch ">
<input id="filterID03" class="sr-only" type="checkbox" name="filterID03" value="checkbutton-read">
<label for="filterID03" class="a-switch-label ">
Dolores
</label>
</div>
<div class="a-switch ">
<input id="filterID04" class="sr-only" type="checkbox" name="filterID04" value="checkbutton-read">
<label for="filterID04" class="a-switch-label ">
Sit
</label>
</div>
<div class="a-switch ">
<input id="filterID05" class="sr-only" type="checkbox" name="filterID05" value="checkbutton-read">
<label for="filterID05" class="a-switch-label ">
Amet
</label>
</div>
<div class="a-switch ">
<input id="filterID06" class="sr-only" type="checkbox" name="filterID06" value="checkbutton-read">
<label for="filterID06" class="a-switch-label ">
Bacon
</label>
</div>
<!-- END: 00-atomer-01-forms-03-valgknapp -->
</div>
</div>
<hr class="a-hrSolidThick" />
<!-- START: 01-molekyler-02-navigasjon-20-hurtignavigasjon -->
<!-- START: 00-atomer-02-lenker-80-hurtignavigasjon-navbar -->
<nav class="a-inline-page-link">
<div class="row">
<div class="col-sm-12 col-md-6 list">
<a href="#A" class="nav-link " alt="Hopp til A">A</a>
<a href="#B" class="nav-link " alt="Hopp til B">B</a>
<a href="#C" class="nav-link " alt="Hopp til C">C</a>
<a href="#D" class="nav-link " alt="Hopp til D">D</a>
<a href="#E" class="nav-link " alt="Hopp til E">E</a>
<a href="#F" class="nav-link disabled " alt="Hopp til F">F</a>
<a href="#G" class="nav-link disabled " alt="Hopp til G">G</a>
<a href="#H" class="nav-link disabled " alt="Hopp til H">H</a>
<a href="#I" class="nav-link disabled " alt="Hopp til I">I</a>
<a href="#J" class="nav-link disabled " alt="Hopp til J">J</a>
<a href="#K" class="nav-link disabled " alt="Hopp til K">K</a>
<a href="#L" class="nav-link disabled " alt="Hopp til L">L</a>
<a href="#M" class="nav-link disabled " alt="Hopp til M">M</a>
<a href="#N" class="nav-link disabled " alt="Hopp til N">N</a>
<span class="d-none d-md-block"></span>
</div>
<div class="col-sm-12 col-md-6 list">
<a href="#O" class="nav-link disabled " alt="Hopp til O">O</a>
<a href="#P" class="nav-link disabled " alt="Hopp til P">P</a>
<a href="#Q" class="nav-link disabled " alt="Hopp til Q">Q</a>
<a href="#R" class="nav-link disabled " alt="Hopp til R">R</a>
<a href="#S" class="nav-link disabled " alt="Hopp til S">S</a>
<a href="#T" class="nav-link disabled " alt="Hopp til T">T</a>
<a href="#U" class="nav-link disabled " alt="Hopp til U">U</a>
<a href="#V" class="nav-link disabled " alt="Hopp til V">V</a>
<a href="#W" class="nav-link disabled " alt="Hopp til W">W</a>
<a href="#X" class="nav-link disabled " alt="Hopp til X">X</a>
<a href="#Y" class="nav-link disabled " alt="Hopp til Y">Y</a>
<a href="#Z" class="nav-link disabled " alt="Hopp til Z">Z</a>
<a href="#Æ" class="nav-link disabled " alt="Hopp til Æ">Æ</a>
<a href="#Ø" class="nav-link disabled " alt="Hopp til Ø">Ø</a>
<a href="#Å" class="nav-link disabled " alt="Hopp til Å">Å</a>
</div>
</div>
</nav>
<!-- END: 00-atomer-02-lenker-80-hurtignavigasjon-navbar -->
<div class="a-dotted a-page-nav-dest">
<h3 class="a-fontSizeXS mb-0">
<a name="A">A</a>
</h3>
</div>
<!-- START: 01-molekyler-05-lister-00-liste-unummerert JS doc: selectableCheckbox.js -->
<div class="a-list-container ">
<ul class="a-list ">
<li class="a-dotted a-list a-list-noIcon">
<div class="row ">
<div class="col-12">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
Lorem ipsum
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</li>
<li class="a-dotted a-list a-list-noIcon">
<div class="row ">
<div class="col-12">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
Dolores sit amet
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</li>
</ul>
</div>
<!-- END: 01-molekyler-05-lister-00-liste-unummerert -->
<div class="a-dotted a-page-nav-dest">
<h3 class="a-fontSizeXS mb-0">
<a name="B">B</a>
</h3>
</div>
<!-- START: 01-molekyler-05-lister-00-liste-unummerert JS doc: selectableCheckbox.js -->
<div class="a-list-container ">
<ul class="a-list ">
<li class="a-dotted a-list a-list-noIcon">
<div class="row ">
<div class="col-12">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
Lorem ipsum
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</li>
<li class="a-dotted a-list a-list-noIcon">
<div class="row ">
<div class="col-12">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
Dolores sit amet
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</li>
</ul>
</div>
<!-- END: 01-molekyler-05-lister-00-liste-unummerert -->
<div class="a-dotted a-page-nav-dest">
<h3 class="a-fontSizeXS mb-0">
<a name="C">C</a>
</h3>
</div>
<!-- START: 01-molekyler-05-lister-00-liste-unummerert JS doc: selectableCheckbox.js -->
<div class="a-list-container ">
<ul class="a-list ">
<li class="a-dotted a-list a-list-noIcon">
<div class="row ">
<div class="col-12">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
Lorem ipsum
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</li>
<li class="a-dotted a-list a-list-noIcon">
<div class="row ">
<div class="col-12">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
Dolores sit amet
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</li>
</ul>
</div>
<!-- END: 01-molekyler-05-lister-00-liste-unummerert -->
<div class="a-dotted a-page-nav-dest">
<h3 class="a-fontSizeXS mb-0">
<a name="D">D</a>
</h3>
</div>
<!-- START: 01-molekyler-05-lister-00-liste-unummerert JS doc: selectableCheckbox.js -->
<div class="a-list-container ">
<ul class="a-list ">
<li class="a-dotted a-list a-list-noIcon">
<div class="row ">
<div class="col-12">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
Lorem ipsum
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</li>
<li class="a-dotted a-list a-list-noIcon">
<div class="row ">
<div class="col-12">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
Dolores sit amet
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</li>
</ul>
</div>
<!-- END: 01-molekyler-05-lister-00-liste-unummerert -->
<div class="a-dotted a-page-nav-dest">
<h3 class="a-fontSizeXS mb-0">
<a name="E">E</a>
</h3>
</div>
<!-- START: 01-molekyler-05-lister-00-liste-unummerert JS doc: selectableCheckbox.js -->
<div class="a-list-container ">
<ul class="a-list ">
<li class="a-dotted a-list a-list-noIcon">
<div class="row ">
<div class="col-12">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
Lorem ipsum
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</li>
<li class="a-dotted a-list a-list-noIcon">
<div class="row ">
<div class="col-12">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
Dolores sit amet
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</li>
</ul>
</div>
<!-- END: 01-molekyler-05-lister-00-liste-unummerert -->
<!-- END: 01-molekyler-02-navigasjon-20-hurtignavigasjon -->
</div>
<!-- END: 02-organismer-70-Modal-innhold-_92-roller-tjenesteoversikt -->