altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
1,164 lines (776 loc) • 83.9 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-organismer-Modal-js-innhold" class="sg-pattern-category">
<h2 class="sg-pattern-category-title"><a href="../../patterns/02-organismer-80-Modal-js-innhold\index.html" class="patternLink" data-patternpartial="viewall-organismer-Modal-js-innhold">Modal-js-innhold</a></h2>
<div class="sg-pattern-category-body">
</div><!--end sg-pattern-category-body-->
</div><!--end sg-pattern-category-->
<div id="organismer-kontaktskjema" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/02-organismer-80-Modal-js-innhold-10-kontaktskjema\02-organismer-80-Modal-js-innhold-10-kontaktskjema.html" class="patternLink" data-patternpartial="organismer-kontaktskjema" title="Link to Pattern">
Kontaktskjema
<span class="sg-pattern-state indesignreview altinn">indesignreview altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="organismer-kontaktskjema" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-kontaktskjema" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-organismer-kontaktskjema">
</div>
<div class="sg-pattern-example">
<!-- START: 02-organismer-80-Modal-js-innhold-10-kontaktskjema -->
<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 ai-send
a-icon" aria-hidden="true"></i>
</div>
<h1 class="a-iconText-text mb-0">
<span class="a-iconText-text-small"></span>
<span class="a-iconText-text-large">Kontaktskjema</span>
</h1>
</div>
</div>
<div class="modal-body a-modal-body">
<p>For at vi skal kunne hjelpe deg så fort som mulig er det viktig at du oppgir tilstrekkelig med informasjon om problemstillingen din. Haster det, ta kontakt per telefon 75 00 60 00.</p>
<h2 class="a-h3">Hva kan vi hjelpe deg med?</h2>
<ul class="nav nav-tabs custom-radio a-radioButtons a-navTabsRadio" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#home" role="tab">
<div class="custom-control custom-radio a-custom-radio">
<span class="custom-control-label">Starte og drive bedrift</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab">
<div class="custom-control custom-radio a-custom-radio">
<span class="custom-control-label">Hvordan bruke Altinn</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab">
<div class="custom-control custom-radio a-custom-radio">
<span class="custom-control-label">Innhold i skjema og meldinger</span>
</div>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="home" role="tabpanel">
<h3 class="a-h2">Spør oss om å starte og drive bedrift</h3>
<form data-toggle="validator" id="contactForm">
<div class="row">
<div class="col-12 col-sm-8">
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group mb-2">
<label class="a-form-label " for="text-input-name">Navn: </label>
<div class="a-form-group-items input-group ">
<input class="form-control
" type="text" placeholder="f.eks Kari Nordmann" name="text-input-name" data-val="true" id="text-input-name" required data-val-required="Du har ikke oppgitt navn.">
</div>
<div class="a-message a-message-error" data-valmsg-for="text-input-name" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group mb-2">
<label class="a-form-label " for="text-input-epost1">Epost: </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-closedmessage " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</span>
<input class="form-control a-hasIcon
" type="text" placeholder="din@epost.no" name="text-input-epost1" data-val="true" id="text-input-epost1" required data-val-required="Du har ikke oppgitt e-post." data-val-regex="Du har ikke skrevet eposten korrekt" data-val-regex-pattern="(('[^']+')|(([a-zA-Z0-9!#$%&'*+-=?^_`{|}~])+(.([a-zA-Z0-9!#$%&'*+-=?^_`{|}~])+)*))@((((([a-zA-Z0-9æøåÆØÅ]([a-zA-Z0-9-æøåÆØÅ]{0,61})[a-zA-Z0-9æøåÆØÅ].)|[a-zA-Z0-9æøåÆØÅ].){1,9})([a-zA-Z]{2,14}))|((d{1,3}).(d{1,3}).(d{1,3}).(d{1,3})))">
</div>
<div class="a-message a-message-error" data-valmsg-for="text-input-epost1" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group mb-2">
<label class="a-form-label " for="text-input-epost2">Bekreft epost: </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-closedmessage " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</span>
<input class="form-control a-js-validateThisAgainstPrev a-hasIcon
" type="text" placeholder="din@epost.no" name="text-input-epost2" data-val="true" id="text-input-epost2">
</div>
<div class="a-message a-message-error" data-valmsg-for="text-input-epost2" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group mb-2">
<label class="a-form-label " for="text-input-tlf">Telefonnummer:</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-phone " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</span>
<input class="form-control a-hasIcon
" type="tel" placeholder="f.eks 97837462" name="text-input-tlf" data-val="true" id="text-input-tlf" data-val-regex="Telefonnummer kan kun inneholde siffer" data-val-regex-pattern="[0-9]+">
</div>
<div class="a-message a-message-error" data-valmsg-for="text-input-tlf" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group mb-2">
<label class="a-form-label " for="text-input-title">Emne: </label>
<div class="a-form-group-items input-group ">
<input class="form-control
" type="text" placeholder="f.eks Innboks" name="text-input-title" data-val="true" id="text-input-title" required data-val-required="Du har ikke oppgitt emne.">
</div>
<div class="a-message a-message-error" data-valmsg-for="text-input-title" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<!-- START: 00-atomer-01-forms-40-tekstfelt -->
<div class="form-group a-form-group mb-2">
<label for="text-input-question" class="a-form-label">Ditt spørsmål: </label>
<textarea class="form-control a-textarea" rows="3" placeholder="Fyll inn tekst" required data-val-required="Du har ikke oppgitt spørsmålstekst." name="text-input-question" id="text-input-question"></textarea>
<div class="a-message a-message-error" data-valmsg-for="text-input-question" data-valmsg-replace="false">
<span class="has-error">Du har ikke oppgitt spørsmålstekst.</span>
</div>
</div>
<!-- END: 00-atomer-01-forms-40-tekstfelt -->
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn mb-2" id="a-js-contactForm-submit" data-toggle="altinn-modal" data-action="next" data-url="../../patterns/02-organismer-80-Modal-js-innhold-11-kontaktskjema-ferdig/02-organismer-80-Modal-js-innhold-11-kontaktskjema-ferdig.markup-only.html"
data-target="#modal" data-is-success="true">
Send
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
</div>
</form>
</div>
<div class="tab-pane" id="profile" role="tabpanel">
<h3 class="a-h2">Spør oss om hvordan bruke Altinn</h3>
<form data-toggle="validator" id="contactForm2">
<div class="row">
<div class="col-12 col-sm-8">
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group mb-2">
<label class="a-form-label " for="text-input-name2">Navn: </label>
<div class="a-form-group-items input-group ">
<input class="form-control
" type="text" placeholder="f.eks Kari Nordmann" name="text-input-name2" data-val="true" id="text-input-name2" required data-val-required="Du har ikke oppgitt navn.">
</div>
<div class="a-message a-message-error" data-valmsg-for="text-input-name2" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group mb-2">
<label class="a-form-label " for="text-input-epost11">Epost: </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-closedmessage " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</span>
<input class="form-control a-hasIcon
" type="text" placeholder="din@epost.no" name="text-input-epost11" data-val="true" id="text-input-epost11" required data-val-required="Du har ikke oppgitt e-post." data-val-regex="Du har ikke skrevet eposten korrekt" data-val-regex-pattern="(('[^']+')|(([a-zA-Z0-9!#$%&'*+-=?^_`{|}~])+(.([a-zA-Z0-9!#$%&'*+-=?^_`{|}~])+)*))@((((([a-zA-Z0-9æøåÆØÅ]([a-zA-Z0-9-æøåÆØÅ]{0,61})[a-zA-Z0-9æøåÆØÅ].)|[a-zA-Z0-9æøåÆØÅ].){1,9})([a-zA-Z]{2,14}))|((d{1,3}).(d{1,3}).(d{1,3}).(d{1,3})))">
</div>
<div class="a-message a-message-error" data-valmsg-for="text-input-epost11" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group mb-2">
<label class="a-form-label " for="text-input-epost22">Bekreft epost: </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-closedmessage " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</span>
<input class="form-control a-js-validateThisAgainstPrev a-hasIcon
" type="text" placeholder="din@epost.no" name="text-input-epost22" data-val="true" id="text-input-epost22">
</div>
<div class="a-message a-message-error" data-valmsg-for="text-input-epost22" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group mb-2">
<label class="a-form-label " for="text-input-tlf2">Telefonnummer:</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-phone " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</span>
<input class="form-control a-hasIcon
" type="tel" placeholder="f.eks 97837462" name="text-input-tlf2" data-val="true" id="text-input-tlf2" data-val-regex="Telefonnummer kan kun inneholde siffer" data-val-regex-pattern="[0-9]+">
</div>
<div class="a-message a-message-error" data-valmsg-for="text-input-tlf2" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group mb-2">
<label class="a-form-label " for="text-input-title2">Emne: </label>
<div class="a-form-group-items input-group ">
<input class="form-control
" type="text" placeholder="f.eks Innboks" name="text-input-title2" data-val="true" id="text-input-title2" required data-val-required="Du har ikke oppgitt emne.">
</div>
<div class="a-message a-message-error" data-valmsg-for="text-input-title2" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<!-- START: 00-atomer-01-forms-40-tekstfelt -->
<div class="form-group a-form-group mb-2">
<label for="text-input-question2" class="a-form-label">Ditt spørsmål: </label>
<textarea class="form-control a-textarea" rows="3" placeholder="Fyll inn tekst" required data-val-required="Du har ikke fyllt ut tekstfeltet." name="text-input-question2" id="text-input-question2"></textarea>
<div class="a-message a-message-error" data-valmsg-for="text-input-question2" data-valmsg-replace="false">
<span class="has-error">Du har ikke fyllt ut tekstfeltet.</span>
</div>
</div>
<!-- END: 00-atomer-01-forms-40-tekstfelt -->
<!-- START: 01-molekyler-05-forms-00-last-opp-og-fjern -->
<div id="js-attachmentForm">
<!-- START: 00-atomer-01-forms-70-upload -->
<div class="a-form-label a-fontBold">Vedlegg</div>
<label class="a-btn a-btn-action a-iconRight a-custom-fileupload mb-0 mt-1 a-js-uploadAttachment">
<input class="a-js-certificateContainer sr-only" type="file" id="newCertificateInput">
Legg ved en fil
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-upload " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</label>
<!-- END: 00-atomer-01-forms-70-upload -->
<div style="display:none" class="a-js-upload-error">
<div class="a-message a-message-error">Feilmelding</div>
</div>
<!-- START: 00-atomer-07-tekst-00-varsel -->
<div id="alert" class="a-message a-message-edit a-message--arrow-off a-message--fullwidth a-message--no-dropshadow mb-0 mt-1 a-js-attachment-box ">
<!-- START: 00-atomer-07-tekst-_00-varsel-innhold -->
<div class="row a-delete-add-container">
<div class="col a-fontBold a-js-attachment-name">
dittbilde.jpg
</div>
<div class="col-md-auto col-sm-12">
<button type='button' class='a-btn a-btn-icon a-btn-delete'><i class='ai ai-sm ai-circle-exit a-danger ai-left' aria-hidden='true'></i><span class='a-btn-icon-text'>Slett vedlegg</span></button>
</div>
</div>
<!-- END: 00-atomer-07-tekst-_00-varsel-innhold -->
</div>
<!-- END: 00-atomer-07-tekst-00-varsel -->
</div>
<!-- END: 01-molekyler-05-forms-00-last-opp-og-fjern -->
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn d-block mt-3 mb-2" id="a-js-contactForm-submit2" data-toggle="altinn-modal" data-action="next" data-url="../../patterns/02-organismer-80-Modal-js-innhold-11-kontaktskjema-ferdig/02-organismer-80-Modal-js-innhold-11-kontaktskjema-ferdig.markup-only.html"
data-target="#modal" data-is-success="true">
Send
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
</div>
</form>
</div>
<div class="tab-pane" id="messages" role="tabpanel">
<h3 class="a-h2">Spør oss om innhold i skjema og meldinger</h3>
<p>Spørsmål om innholdet i skjema og meldinger må stilles til etaten/kommunen som eier skjemaet eller har sendt deg meldingen. Du finner kontaktinformasjon til de ulike skjemaeierne under <a href="/patterns/04-sider-infoportal-20-navigasjonssider-50-kolonnenavigasjon-v-skjemaoversikt\04-sider-infoportal-20-navigasjonssider-50-kolonnenavigasjon-v-skjemaoversikt.html">Alle skjema</a></p>
</div>
</div>
</div>
</div>
<!-- END: 02-organismer-80-Modal-js-innhold-10-kontaktskjema -->
</div>
<script type="text/json" id="sg-pattern-data-organismer-kontaktskjema" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="organismer-kontaktskjema-ferdig" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/02-organismer-80-Modal-js-innhold-11-kontaktskjema-ferdig\02-organismer-80-Modal-js-innhold-11-kontaktskjema-ferdig.html" class="patternLink" data-patternpartial="organismer-kontaktskjema-ferdig" title="Link to Pattern">
Kontaktskjema Ferdig
<span class="sg-pattern-state indesignreview altinn">indesignreview altinn</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="organismer-kontaktskjema-ferdig" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-kontaktskjema-ferdig" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-organismer-kontaktskjema-ferdig">
</div>
<div class="sg-pattern-example">
<!-- START: 02-organismer-80-Modal-js-innhold-11-kontaktskjema-ferdig -->
<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 ai-send a-icon" aria-hidden="true"></i>
</div>
<h1 class="a-iconText-text mb-0">
<span class="a-iconText-text-small"></span>
<span class="a-iconText-text-large">Din henvendelse er nå sendt</span>
</h1>
</div>
</div>
<div class="modal-body a-modal-body">
<p>Takk for din henvendelse, vi vil behandle den så fort som mulig.</p>
<button class="a-btn" data-toggle="altinn-modal" data-action="close" data-target="#modal">
Lukk
</button>
</div>
</div>
<!-- END: 02-organismer-80-Modal-js-innhold-11-kontaktskjema-ferdig -->
</div>
<script type="text/json" id="sg-pattern-data-organismer-kontaktskjema-ferdig" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="organismer-altinnett-kontaktskjema" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/02-organismer-80-Modal-js-innhold-12-altinnett-kontaktskjema\02-organismer-80-Modal-js-innhold-12-altinnett-kontaktskjema.html" class="patternLink" data-patternpartial="organismer-altinnett-kontaktskjema" title="Link to Pattern">
Altinnett Kontaktskjema
<span class="sg-pattern-state inprogress altinnett">inprogress altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="organismer-altinnett-kontaktskjema" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-altinnett-kontaktskjema" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-organismer-altinnett-kontaktskjema">
</div>
<div class="sg-pattern-example">
<!-- START: 02-organismer-80-Modal-js-innhold-12-altinnett-kontaktskjema -->
<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 ai-send
a-icon" aria-hidden="true"></i>
</div>
<h1 class="a-iconText-text mb-0">
<span class="a-iconText-text-small"></span>
<span class="a-iconText-text-large">Kontaktskjema</span>
</h1>
</div>
</div>
<div class="modal-body a-modal-body">
<p>For at vi skal kunne hjelpe deg, trenger vi å vite hva du lurer på og litt om hvem du er.</p>
<h2 class="a-h2 a-fontBold a-blueDarkerText">Hva lurer du på?</h2>
<form data-toggle="validator" id="contactForm">
<div class="row">
<div class="col-12 col-sm-8">
<div class="col-12 col-md-6 px-0">
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group mb-2">
<label class="a-form-label " for="text-input-title">Emne: </label>
<div class="a-form-group-items input-group ">
<input class="form-control
" type="text" placeholder="f.eks: Digital post" name="text-input-title" data-val="true" id="text-input-title" required data-val-required="Du har ikke oppgitt emne.">
</div>
<div class="a-message a-message-error" data-valmsg-for="text-input-title" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</div>
<!-- START: 00-atomer-01-forms-40-tekstfelt -->
<div class="form-group a-form-group mb-2">
<label for="text-input-question" class="a-form-label">Din melding: </label>
<textarea class="form-control a-textarea" rows="3" placeholder="Fyll inn tekst" required data-val-required="Du har ikke oppgitt spørsmålstekst." name="text-input-question" id="text-input-question"></textarea>
<div class="a-message a-message-error" data-valmsg-for="text-input-question" data-valmsg-replace="false">
<span class="has-error">Du har ikke oppgitt spørsmålstekst.</span>
</div>
</div>
<!-- END: 00-atomer-01-forms-40-tekstfelt -->
<h2 class="a-h2 a-fontBold a-blueDarkerText">Hvem er du?</h2>
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group mb-2">
<label class="a-form-label " for="text-input-name">Firma/virksomhet: </label>
<div class="a-form-group-items input-group ">
<input class="form-control
" type="text" placeholder="f.eks Kari’s Firma AS" name="text-input-name" data-val="true" id="text-input-name" required data-val-required="Du har ikke oppgitt navn.">
</div>
<div class="a-message a-message-error" data-valmsg-for="text-input-name" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group mb-2">
<label class="a-form-label " for="text-input-name">Navn: </label>
<div class="a-form-group-items input-group ">
<input class="form-control
" type="text" placeholder="f.eks Kari Nordmann" name="text-input-name" data-val="true" id="text-input-name" required data-val-required="Du har ikke oppgitt navn.">
</div>
<div class="a-message a-message-error" data-valmsg-for="text-input-name" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group mb-2">
<label class="a-form-label " for="text-input-epost1">E-post: </label>
<div class="a-form-group-items input-group ">
<input class="form-control
" type="text" placeholder="f.eks post@karinordmann.no " name="text-input-epost1" data-val="true" id="text-input-epost1" required data-val-required="Du har ikke oppgitt e-post." data-val-regex="Du har ikke skrevet eposten korrekt" data-val-regex-pattern="(('[^']+')|(([a-zA-Z0-9!#$%&'*+-=?^_`{|}~])+(.([a-zA-Z0-9!#$%&'*+-=?^_`{|}~])+)*))@((((([a-zA-Z0-9æøåÆØÅ]([a-zA-Z0-9-æøåÆØÅ]{0,61})[a-zA-Z0-9æøåÆØÅ].)|[a-zA-Z0-9æøåÆØÅ].){1,9})([a-zA-Z]{2,14}))|((d{1,3}).(d{1,3}).(d{1,3}).(d{1,3})))">
</div>
<div class="a-message a-message-error" data-valmsg-for="text-input-epost1" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group mb-5">
<label class="a-form-label " for="text-input-tlf">Telefonnummer:</label>
<div class="a-form-group-items input-group ">
<input class="form-control
" type="tel" placeholder="f.eks 98765432" name="text-input-tlf" data-val="true" id="text-input-tlf" data-val-regex="Telefonnummer kan kun inneholde siffer" data-val-regex-pattern="[0-9]+">
</div>
<div class="a-message a-message-error" data-valmsg-for="text-input-tlf" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn mb-2" id="a-js-contactForm-submit" data-toggle="altinn-modal" data-action="load" data-url="../../patterns/02-organismer-80-Modal-js-innhold-12-altinnett-kontaktskjema/02-organismer-80-Modal-js-innhold-12-altinnett-kontaktskjema.markup-only.html"
data-target="modal-singel" data-is-success="true">
Send
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
</div>
</form>
</div>
</div>
<!-- END: 02-organismer-80-Modal-js-innhold-12-altinnett-kontaktskjema -->
</div>
<script type="text/json" id="sg-pattern-data-organismer-altinnett-kontaktskjema" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="organismer-altinnett-kontaktskjema-ferdig" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/02-organismer-80-Modal-js-innhold-13-altinnett-kontaktskjema-ferdig\02-organismer-80-Modal-js-innhold-13-altinnett-kontaktskjema-ferdig.html" class="patternLink" data-patternpartial="organismer-altinnett-kontaktskjema-ferdig" title="Link to Pattern">
Altinnett Kontaktskjema Ferdig
<span class="sg-pattern-state inprogress altinnett">inprogress altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="organismer-altinnett-kontaktskjema-ferdig" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-altinnett-kontaktskjema-ferdig" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-organismer-altinnett-kontaktskjema-ferdig">
</div>
<div class="sg-pattern-example">
<!-- START: 02-organismer-80-Modal-js-innhold-13-altinnett-kontaktskjema-ferdig -->
<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 ai-send
a-icon" aria-hidden="true"></i>
</div>
<h1 class="a-iconText-text mb-0">
<span class="a-iconText-text-small"></span>
<span class="a-iconText-text-large">Kontaktskjema</span>
</h1>
</div>
</div>
<div class="modal-body a-modal-body">
<p>Du vil motta en kvittering på e-post med et saksnummer for din henvendelse</p>
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn mb-2" id="a-js-contactForm-submit" data-toggle="altinn-modal" data-action="next" data-url="../../patterns/02-organismer-80-Modal-js-innhold-11-kontaktskjema-ferdig/02-organismer-80-Modal-js-innhold-11-kontaktskjema-ferdig.markup-only.html"
data-target="#modal" data-is-success="true">
Lukk
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
</div>
<!-- END: 02-organismer-80-Modal-js-innhold-13-altinnett-kontaktskjema-ferdig -->
</div>
<script type="text/json" id="sg-pattern-data-organismer-altinnett-kontaktskjema-ferdig" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="organismer-altinnett-varsling-pamelding" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/02-organismer-80-Modal-js-innhold-80-altinnett-varsling-pamelding\02-organismer-80-Modal-js-innhold-80-altinnett-varsling-pamelding.html" class="patternLink" data-patternpartial="organismer-altinnett-varsling-pamelding" title="Link to Pattern">
Altinnett Varsling Pamelding
<span class="sg-pattern-state indesignreview altinnett">indesignreview altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="organismer-altinnett-varsling-pamelding" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-altinnett-varsling-pamelding" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-organismer-altinnett-varsling-pamelding">
</div>
<div class="sg-pattern-example">
<!-- START: 02-organismer-80-Modal-js-innhold-80-altinnett-varsling-pamelding -->
<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 ai-send a-icon" aria-hidden="true"></i>
</div>
<h1 class="a-iconText-text mb-0">
<span class="a-iconText-text-large">Meld deg på varslingstjenesten vår</span>
</h1>
</div>
</div>
<div class="modal-body a-modal-body">
<!-- START: 02-organismer-20-forms-80-altinnett-skjema-varslingsprofil -->
<div class="row mb-1">
<div class="col-lg-7">
<h2 class="a-legend">Din kontaktinformasjon:</h2>
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group ">
<label class="a-form-label " for="text-input-epost">Epost: </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-closedmessage " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</span>
<input class="form-control a-hasIcon
" type="email" placeholder="test@testesen.no" name="email-field" data-val="true" id="text-input-epost" required data-val-regex="Feil epost verdier" data-val-regex-pattern="(('[^']+')|(([a-zA-Z0-9!#$%&'*+-=?^_`{|}~])+(.([a-zA-Z0-9!#$%&'*+-=?^_`{|}~])+)*))@((((([a-zA-Z0-9æøåÆØÅ]([a-zA-Z0-9-æøåÆØÅ]{0,61})[a-zA-Z0-9æøåÆØÅ].)|[a-zA-Z0-9æøåÆØÅ].){1,9})([a-zA-Z]{2,14}))|((d{1,3}).(d{1,3}).(d{1,3}).(d{1,3})))">
</div>
<div class="a-message a-message-error" data-valmsg-for="email-field" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group ">
<label class="a-form-label " for="text-input-10">SMS:</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-phone " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</span>
<input class="form-control a-hasIcon
" type="tel" placeholder="123 12 123" name="input-field" data-val="true" id="text-input-10" data-val-regex="Telefonnummer må bestå av 8 siffer" data-val-regex-pattern=""[0-9]{8}"">
</div>
<div class="a-message a-message-error" data-valmsg-for="input-field" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<!-- START: 00-atomer-07-tekst-00-varsel -->
<div id="alert" class="a-message a-message-default mt-0 mb-2">
<!-- START: 00-atomer-07-tekst-_00-varsel-innhold -->
<b>Obs!</b> Mobilnummer er valgfritt, men må skrives inn om du ønsker varsel på SMS.
<!-- END: 00-atomer-07-tekst-_00-varsel-innhold -->
</div>
<!-- END: 00-atomer-07-tekst-00-varsel -->
</div>
</div>
<div class="row">
<div class="col-12">
<!-- START: 00-atomer-01-forms-00-avkrysningsboks -->
<fieldset class="form-group mb-0">
<legend class="a-legend">Hvilke varslingstjenester vil du melde deg på?</legend>
<div class="custom-control custom-checkbox a-custom-checkbox ">
<input type="checkbox" id="" class="custom-control-input">
<label class="custom-control-label " for="">Navn på varslingstjeneste 1</label>
</div>
<div class="custom-control custom-checkbox a-custom-checkbox ">
<input type="checkbox" id="" class="custom-control-input">
<label class="custom-control-label " for="">Navn på varslingstjeneste 2</label>
</div>
<div class="custom-control custom-checkbox a-custom-checkbox ">
<input type="checkbox" id="" class="custom-control-input">
<label class="custom-control-label " for="">Navn på varslingstjeneste 3</label>
</div>
</fieldset>
<!-- END: 00-atomer-01-forms-00-avkrysningsboks -->
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn mt-1">
Meld meg på
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
</div>
<!-- END: 02-organismer-20-forms-80-altinnett-skjema-varslingsprofil -->
</div>
</div>
<!-- END: 02-organismer-80-Modal-js-innhold-80-altinnett-varsling-pamelding -->
</div>
<script type="text/json" id="sg-pattern-data-organismer-altinnett-varsling-pamelding" class="sg-pattern-data">
</script>
</div><!--end .sg-pattern-->
<div id="organismer-altinnett-varsling-pamelding-eksisterende" class="sg-pattern">
<div class="sg-pattern-head">
<h3 class="sg-pattern-title">
<a href="../../patterns/02-organismer-80-Modal-js-innhold-80-altinnett-varsling-pamelding-eksisterende\02-organismer-80-Modal-js-innhold-80-altinnett-varsling-pamelding-eksisterende.html" class="patternLink" data-patternpartial="organismer-altinnett-varsling-pamelding-eksisterende" title="Link to Pattern">
Altinnett Varsling Pamelding Eksisterende
<span class="sg-pattern-state inprogress altinnett">inprogress altinnett</span>
</a>
</h3>
<div class="sg-pattern-breadcrumb"></div>
<a href="#" data-patternpartial="organismer-altinnett-varsling-pamelding-eksisterende" title="View Pattern Info" id="sg-pattern-extra-toggle-organismer-altinnett-varsling-pamelding-eksisterende" class="sg-pattern-extra-toggle"><span>▼</span></a>
</div>
<div class="sg-pattern-extra" id="sg-pattern-extra-organismer-altinnett-varsling-pamelding-eksisterende">
</div>
<div class="sg-pattern-example">
<!-- START: 02-organismer-80-Modal-js-innhold-80-altinnett-varsling-pamelding-eksisterende -->
<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 ai-send a-icon" aria-hidden="true"></i>
</div>
<h1 class="a-iconText-text mb-0">
<span class="a-iconText-text-large">Endre varslingsprofil</span>
</h1>
</div>
</div>
<div class="modal-body a-modal-body">
<!-- START: 02-organismer-20-forms-80-altinnett-skjema-varslingsprofil -->
<div class="row mb-3">
<div class="col-12">
<!-- 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="Andre Geitan">
<span class="a-personRole-role">Styremedlem</span>
<span class="a-personRole-name">Andre Geitan</span>
</div>
</div>
<!-- END: 01-molekyler-00-tekst-03-person-rolle -->
</div>
</div>
<div class="row mb-1">
<div class="col-lg-7">
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group ">
<label class="a-form-label " for="text-input-epost">Epost:</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-closedmessage " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</span>
<input class="form-control a-hasIcon
" type="email" placeholder="test@testesen.no" value="andre.geitan@bouvet.no" name="email-field" data-val="true" id="text-input-epost" required data-val-regex="Feil epost verdier" data-val-regex-pattern="(('[^']+')|(([a-zA-Z0-9!#$%&'*+-=?^_`{|}~])+(.([a-zA-Z0-9!#$%&'*+-=?^_`{|}~])+)*))@((((([a-zA-Z0-9æøåÆØÅ]([a-zA-Z0-9-æøåÆØÅ]{0,61})[a-zA-Z0-9æøåÆØÅ].)|[a-zA-Z0-9æøåÆØÅ].){1,9})([a-zA-Z]{2,14}))|((d{1,3}).(d{1,3}).(d{1,3}).(d{1,3})))">
</div>
<div class="a-message a-message-error" data-valmsg-for="email-field" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js -->
<div class="form-group a-form-group ">
<label class="a-form-label " for="text-input-10">SMS:</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-phone " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</span>
<input class="form-control a-hasIcon
" type="tel" placeholder="123 12 123" value="123 12 123" name="input-field" data-