altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
346 lines (197 loc) • 10.3 kB
HTML
<!-- START: 03-maler-altinnett-innlogging-utlistning-alle-i-din-organisasjon -->
<div class="modal-content">
<div class="modal-header a-modal-header">
<div class="a-iconText a-iconText-background a-iconText-large">
<div class="a-iconText-icon">
<i class="ai a-icon" aria-hidden="true"></i>
</div>
<h1 class="a-iconText-text mb-0">
<span class="a-iconText-text-large">Alle i din organisasjon</span>
</h1>
</div>
</div>
<div class="modal-body a-modal-body">
<p class="mb-4">Her finner du en oversikt over alle i din organsisasjon med tilganger i altinndigital. Vær obs på at dette ikke viser tilganger til TUL. <a href='#'>Disse tilgangene finner du her.</a></p>
<div class="col-12 col-md-9 col-lg-6 px-0">
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js, searchWithMultipleSelectInAutoComplete.js brukes via klassen a-js-autocomplete på form-control-class gir autocomplete med mulighet for å velge flere elementer fra resultatlista. -->
<div class="form-group a-form-group ">
<label class="a-form-label sr-only " for="search-id">Søk etter aktør</label>
<div class="a-form-group-items input-group ">
<span class="input-group-prepend d-none d-md-block"><!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-others " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</span>
<input class="form-control a-hasIcon
" type="search" placeholder="Søk etter aktør" name="input-field" data-val="true" id="search-id">
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</div>
</div>
<div class="mb-5">
<!-- START: 01-molekyler-05-lister-00-liste-unummerert JS doc: selectableCheckbox.js -->
<div class="a-list-container ">
<div class="">
<div class="row">
</div>
</div>
<ul class="a-list a-list-large ">
<li class="">
<a href="#" class="a-list-rowLink a-fontSizeXS py-1" data-toggle="altinn-modal" data-action="next" data-url="../../patterns/03-maler-altinnett-innlogging-skjema-endre-og-fjerne-bruker/03-maler-altinnett-innlogging-skjema-endre-og-fjerne-bruker.markup-only.html"
data-target="#modal">
<div class="row ">
<div class="a-w-7 text-center d-none d-md-block">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-private "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
<div class="col">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<span class="a-fontBold">
Knut Røssland
</span>
<span class="a-fontReg a-redDarkText"> inaktiv siste 6 mnd</span>
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</a>
</li>
<li class="">
<a href="#" class="a-list-rowLink a-fontSizeXS py-1" data-toggle="altinn-modal" data-action="next" data-url="../../patterns/03-maler-altinnett-innlogging-skjema-endre-og-fjerne-bruker/03-maler-altinnett-innlogging-skjema-endre-og-fjerne-bruker.markup-only.html"
data-target="#modal">
<div class="row ">
<div class="a-w-7 text-center d-none d-md-block">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-private "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
<div class="col">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<span class="a-fontBold">
Dag Dale
</span>
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
<div class="col-sm-3 text-right pr-md-5">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
ADMINISTRATOR
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</a>
</li>
<li class="">
<a href="#" class="a-list-rowLink a-fontSizeXS py-1" data-toggle="altinn-modal" data-action="next" data-url="../../patterns/03-maler-altinnett-innlogging-skjema-endre-og-fjerne-bruker/03-maler-altinnett-innlogging-skjema-endre-og-fjerne-bruker.markup-only.html"
data-target="#modal">
<div class="row ">
<div class="a-w-7 text-center d-none d-md-block">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-private "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
<div class="col">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<span class="a-fontBold">
Kari Jensen
</span>
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</a>
</li>
<li class="">
<a href="#" class="a-list-rowLink a-fontSizeXS py-1" data-toggle="altinn-modal" data-action="next" data-url="../../patterns/03-maler-altinnett-innlogging-skjema-endre-og-fjerne-bruker/03-maler-altinnett-innlogging-skjema-endre-og-fjerne-bruker.markup-only.html"
data-target="#modal">
<div class="row ">
<div class="a-w-7 text-center d-none d-md-block">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-private "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
<div class="col">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<span class="a-fontBold">
Dag Knudsen
</span>
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</a>
</li>
<li class="">
<a href="#" class="a-list-rowLink a-fontSizeXS py-1" data-toggle="altinn-modal" data-action="next" data-url="../../patterns/03-maler-altinnett-innlogging-skjema-endre-og-fjerne-bruker/03-maler-altinnett-innlogging-skjema-endre-og-fjerne-bruker.markup-only.html"
data-target="#modal">
<div class="row ">
<div class="a-w-7 text-center d-none d-md-block">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-private "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
<div class="col">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<span class="a-fontBold">
Anne Bruun
</span>
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</a>
</li>
<li class="">
<a href="#" class="a-list-rowLink a-fontSizeXS py-1" data-toggle="altinn-modal" data-action="next" data-url="../../patterns/03-maler-altinnett-innlogging-skjema-endre-og-fjerne-bruker/03-maler-altinnett-innlogging-skjema-endre-og-fjerne-bruker.markup-only.html"
data-target="#modal">
<div class="row ">
<div class="a-w-7 text-center d-none d-md-block">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-private "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
<div class="col">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<span class="a-fontBold">
Inge Danielsen
</span>
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</a>
</li>
<li class="">
<a href="#" class="a-list-rowLink a-fontSizeXS py-1" data-toggle="altinn-modal" data-action="next" data-url="../../patterns/03-maler-altinnett-innlogging-skjema-endre-og-fjerne-bruker/03-maler-altinnett-innlogging-skjema-endre-og-fjerne-bruker.markup-only.html"
data-target="#modal">
<div class="row ">
<div class="a-w-7 text-center d-none d-md-block">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-private "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
<div class="col">
<!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
<span class="a-fontBold">
Roy Dahl
</span>
<!-- END: 01-molekyler-05-lister-_00-liste-innhold -->
</div>
</div>
</a>
</li>
</ul>
</div>
<!-- END: 01-molekyler-05-lister-00-liste-unummerert -->
</div>
</div>
<!-- END: 03-maler-altinnett-innlogging-utlistning-alle-i-din-organisasjon -->