altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
479 lines (299 loc) • 13.3 kB
HTML
<!-- START: 02-organismer-70-Modal-innhold-_30-starte-enk -->
<!-- Modal -->
<span class="a-scene a-page">
<div class="a-modal " id="" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Modal Header -->
<!-- START: 01-molekyler-20-modalelementer-05-modal-header -->
<div class="a-modal-top">
<!-- START: 00-atomer-09-bilder-og-media-01-logo -->
<img src="../../images/a-logo-black.svg" alt="Altinn logo" class="a-logo a-modal-top-logo ">
<!-- END: 00-atomer-09-bilder-og-media-01-logo -->
<div class="a-modal-top-user">
<!-- START: 00-atomer-07-tekst-40-innlogget -->
<div class="a-personSwitcher " title="JAN PETTERSEN ">
<span
class="a-personSwitcher-name">
<span class="d-block">JAN PETTERSEN</span>
<span class="d-block"></span>
</span>
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-private-circle-big a-personSwitcher-icon "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<!-- END: 00-atomer-07-tekst-40-innlogget -->
</div>
</div>
<!-- END: 01-molekyler-20-modalelementer-05-modal-header -->
<!-- END Modal Header -->
</div>
</div>
<div class="row">
<div class="col-xl-10 offset-xl-1">
<!-- Modal NavBar -->
<!-- START: 01-molekyler-20-modalelementer-10-modal-navbar -->
<div class="a-modal-navbar">
<!-- START: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
<button type="button" class="a-modal-back a-js-tabable-popover" onclick="goBack()" aria-label="Lukk">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="ai-stack">
<i class="ai ai-stack-1x ai-plain-circle-big"></i>
<i class="ai-stack-1x ai ai-back " ></i>
</span>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<!-- END: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
<!-- START: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
<button type="button" class="a-modal-close a-js-tabable-popover" onclick="location.href='../../patterns/04-sider-infoportal-10-seksjonsforsider-30-seksjonsforside-v-starteogdrive/04-sider-infoportal-10-seksjonsforsider-30-seksjonsforside-v-starteogdrive.html';"
aria-label="Lukk">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="ai-stack">
<i class="ai ai-stack-1x ai-plain-circle-big"></i>
<i class="ai-stack-1x ai ai-exit a-modal-close-icon " ></i>
</span>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</button>
<!-- END: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
</div>
<!-- END: 01-molekyler-20-modalelementer-10-modal-navbar -->
<!-- END Modal NavBar -->
</div>
</div>
<div class="row">
<div class="col-xl-10 offset-xl-1">
<!-- Modal window -->
<span class="a-right-panel a-page a-scene-element ">
<div class="modal-content">
<!-- Modal Body header -->
<!-- START: 01-molekyler-20-modalelementer-15-modal-body-header -->
<div class="modal-header a-modal-header">
<!-- START: 01-molekyler-00-tekst-30-ikon-tekst -->
<div class="a-iconText a-iconText-background a-iconText-large ">
<div class="a-iconText-icon "><!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-circle-plus a-icon a-icon-circle " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
<h1 class="a-iconText-text mb-0">
<span class="a-iconText-text-small">Brønnøysundregistrene</span>
<span class="a-iconText-text-large">Starte Enkeltpersonforetak </span>
</h1>
</div>
<!-- END: 01-molekyler-00-tekst-30-ikon-tekst -->
</div>
<!-- END: 01-molekyler-20-modalelementer-15-modal-body-header -->
<!-- Modal Body content -->
<div class="modal-body a-modal-body">
<!-- TITLE -->
<!-- INTROTEKST -->
<!-- START: 00-atomer-07-tekst-02-intro-tekst -->
<p class="a-leadText " id="leadText">Ingress er et kort innledende avsnitt som vanligvis plasseres mellom overskriften og brødteksten.</p>
<!-- END: 00-atomer-07-tekst-02-intro-tekst -->
<!-- BUTTON -->
<!-- INPUT: OWNER INFO -->
<!-- *********************** --->
<!-- OLD INPUT: ORG NAME REMOVE--->
<!-- *********************** --->
<div class="a-btn-group mt-2">
</div>
<!-- *********************** --->
<!-- END OLD INPUT: ORG NAME REMOVE--->
<!-- *********************** --->
<!-- FIND INDUSTY CODE -->
<!-- INPUT: KEYWORD -->
<!-- LOADER -->
<!-- IF NO RESULTS -->
<!-- INPUT: CATEGORY -->
<!-- START: 02-organismer-20-forms-50-skjema-radio -->
<form data-toggle="validator" role="form" action="/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html" class="">
<div class="a-modal-contentFullWidth mt-2">
<!-- START: 00-atomer-01-forms-04-radioknapp -->
<fieldset class="form-group ">
<legend class="a-legend">Hvilken knapp vil du velge?
</legend>
<div class="custom-control custom-radio a-custom-radio a-radioButtons-stackedList a-radioButtons-stackedList ">
<input type="radio" id="radio20" name="customRadio" value="radio20" class="custom-control-input">
<label class="custom-control-label a-radioButtons-title" for="radio20">En radioknapp
<span class="a-radioButtons-excerpt a-maxThreeLines">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</span>
</label>
</div>
<div class="custom-control custom-radio a-custom-radio a-radioButtons-stackedList a-radioButtons-stackedList ">
<input type="radio" id="radio21" name="customRadio" value="radio21" class="custom-control-input">
<label class="custom-control-label a-radioButtons-title" for="radio21">Enda en radioknapp som inneholder <strong>mye tekst</strong>
<span class="a-radioButtons-excerpt a-maxThreeLines">
Mer lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</span>
</label>
</div>
</fieldset>
<!-- END: 00-atomer-01-forms-04-radioknapp -->
</div>
<div class="a-btn-group mt-2">
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="submit" class="a-btn ">
Velg denne radioknappen
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
<!-- 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=" ">
Finn næringskode selv
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</div>
</form>
<!-- END: 02-organismer-20-forms-50-skjema-radio -->
<!-- END FIND INDUSTY CODE -->
<!-- INPUT: DESCRIPTION -->
<!-- INPUT: ADRESS -->
<!-- INPUT: DATE -->
<!-- START: 02-organismer-20-forms-40-skjema-dato -->
<form data-toggle="validator" role="form" action="/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html" class="">
<!-- START: 00-atomer-01-forms-60-datovelger JS doc: initializeDatepicker.js. Requires class .form-control.date -->
<label class="d-inline-block a-w-3-sm-down mr-0 mr-md-1 " for="">
<span class="a-input-labelText control-label">
Oppstartdato:
</span>
</label>
<div class="d-inline-block form-group a-form-group a-form-group-datepicker">
<div class="input-group">
<input type="text" id="" required class="form-control a-hasButton a-hasIcon date" />
<div class="input-group-prepend a-icon-right">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-deadline "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
</div>
</div>
<!-- END: 00-atomer-01-forms-60-datovelger -->
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="submit" class="a-btn mt-2">
Neste
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</form>
<!-- END: 02-organismer-20-forms-40-skjema-dato -->
<!-- EXTRA INFO (Footer) -->
<!-- START: 00-atomer-08-lister-11-liste-unummerert-kuler -->
<ul class="a-bullet-list mx-1 mt-4 a-bulletList-light">
<li>
Første punkt i bullet-listen.
<!-- START: 00-atomer-05-Ekspansjonsknapper-32-link-med-popover-ikon JS doc: popover.js -->
<a href="javascript:void(0)" tabindex="0" class="a-linkArea a-helpIconButton a-helpIconButton--blue a-js-togglePopoverIcons" role="button" data-toggle="popover" data-animation="false" data-target="#myPopup" data-placement="bottom" data-trigger="click"
data-popover-content="popoverWithIconToggle">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-circle-plus a-js-popoverIconInitial "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-circle-minus a-js-popoverIconExpanded "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="sr-only">Vis mer info</span>
</a>
<div id="popoverWithIconToggle" style="display: none">
<!-- START: 00-atomer-07-tekst-_00-varsel-innhold -->
Dette er en tekst
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="http://www.altinn.no" class=" ">
med en lenke som står i løpende tekst
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
og man kan ha mer tekst etter.
<!-- END: 00-atomer-07-tekst-_00-varsel-innhold -->
</div>
<!-- END: 00-atomer-05-Ekspansjonsknapper-32-link-med-popover-ikon -->
</li>
<li>
Andre punkt i bullet-listen.
</li>
<li>
Tredje punkt i bullet-listen.
</li>
</ul>
<!-- END: 00-atomer-08-lister-11-liste-unummerert-kuler -->
</div>
<!-- END Modal body -->
</div>
<!-- END .modal-Content -->
</span>
<!-- END Modal window -->
<!-- START: 02-organismer-30-seksjoner-28-chat -->
<div class="a-chat" id="chat">
<p>
Chat
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-exit a-modal-close-icon " id="close-chat"></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<div class="a-chat-scrollarea">
<!-- START: 00-atomer-07-tekst-12-snakkeboble -->
<div class="a-textBubble ">
Hei! Kan jeg hjelpe deg?
<p class="a-textBubble-metaText">2 minutter siden</p>
</div>
<!--
<div class="a-textBubble">
Snakkebobletest
<p class="a-textBubble-metaText">2 minutter siden</p>
</div> -->
<!-- END: 00-atomer-07-tekst-12-snakkeboble -->
<!-- START: 00-atomer-07-tekst-12-snakkeboble -->
<div class="a-textBubble a-textBubble-from ">
Ja, veldig gjerne
<p class="a-textBubble-metaText">30 sekunder siden</p>
</div>
<!--
<div class="a-textBubble">
Snakkebobletest
<p class="a-textBubble-metaText">2 minutter siden</p>
</div> -->
<!-- END: 00-atomer-07-tekst-12-snakkeboble -->
<!-- START: 00-atomer-07-tekst-12-snakkeboble -->
<div class="a-textBubble a-textBubble-from ">
Jeg skal strikke lusekofter og holde kurs i kulturvern. Hva skal jeg søke på?
<p class="a-textBubble-metaText">Nå</p>
</div>
<!--
<div class="a-textBubble">
Snakkebobletest
<p class="a-textBubble-metaText">2 minutter siden</p>
</div> -->
<!-- END: 00-atomer-07-tekst-12-snakkeboble -->
<!-- START: 00-atomer-07-tekst-12-snakkeboble -->
<div class="a-textBubble ">
...
</div>
<!--
<div class="a-textBubble">
Snakkebobletest
<p class="a-textBubble-metaText">2 minutter siden</p>
</div> -->
<!-- END: 00-atomer-07-tekst-12-snakkeboble -->
</div>
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group ">
<label class="a-form-label sr-only " for="chat">Skriv her</label>
<div class="a-form-group-items input-group ">
<input class="form-control
a-hasButton " type="text" placeholder="Skriv her" name="input-field" data-val="true" id="chat">
<div class="input-group-append">
<button class="btn btn-secondary" type="button">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-send " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="sr-only">Søk</span>
</button>
</div>
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</div>
<!-- END: 02-organismer-30-seksjoner-28-chat -->
</div>
</div>
</div>
</div>
</div>
</span>
<!-- END: 02-organismer-70-Modal-innhold-_30-starte-enk -->