altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
215 lines (132 loc) • 6.74 kB
HTML
<!-- START: 02-organismer-50-ekspanderbart-panel-_10-din-kontaktinformasjon JS doc: togglePanel.js -->
<div class="card a-accordion-card a-collapsePanel ">
<div class="card-header a-js-index-heading a-collapsePanel-heading collapsed " id="myContactInfoHeader" role="tab">
<a href="#" data-toggle="collapse" data-target="#myContactInfo" aria-expanded="false" aria-controls="myContactInfo">
<!-- START: 01-molekyler-00-tekst-30-ikon-tekst -->
<div class="a-iconText a-iconText-shadow a-iconText-large a-collapseBtn collapsed ">
<div class="a-iconText-icon "><img src="" /></div>
<div class="a-iconText-text">
<span class="a-iconText-text-large">Din kontaktinformasjon </span>
</div>
</div>
<!-- END: 01-molekyler-00-tekst-30-ikon-tekst -->
</a>
</div>
<div id="myContactInfo" class="a-collapsePanel-body collapse " data-parent="#accordion" role="tabpanel" aria-labelledby="myContactInfoHeader">
<div class="a-collapsePanel-body-content">
<div class="row">
<div class="col mb-2">
<!-- START: 00-atomer-07-tekst-00-varsel -->
<div id="alert-no-arrow" class="a-message a-message-info a-message--arrow-off a-message--fullwidth ">
<!-- START: 00-atomer-07-tekst-_00-varsel-innhold -->
Du er reservert mot kommunikasjon på nett fra det offentlige. For å endre dette, eller din kontaktinformasjon, gjør dette i <a href='https://brukerprofil-ver2.difi.no/minprofil/?locale=nb' target='_blank'>Kontakt- og reservasjonsregisteret</a>
<!-- 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">
<h3 class="a-fontBold a-fontSizeM">
Lorem ipsum
</h3>
</div>
<div class="col-12 col-md-4">
<!-- 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-1337">Epost:</label>
<div class="a-form-group-items input-group disabled ">
<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="f.eks post@karinordmann.no" name="input-field" data-val="true" id="text-input-1337" disabled>
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</div>
<div class="col-12 col-md-8">
<!-- 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-20">Epost:</label>
<div class="a-form-group-items input-group disabled ">
<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="f.eks post@karinordmann.no" name="input-field" data-val="true" id="text-input-20" disabled>
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</div>
<div class="col-12 mb-1">
<!-- START: 00-atomer-07-tekst-00-varsel -->
<div class="a-message a-message-default mt-0">
<!-- START: 00-atomer-07-tekst-_00-varsel-innhold -->
<b>Obs!</b> Lorem ipsum
<!-- 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-linkArea ">
med en lenke som står i løpende tekst
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
<!-- END: 00-atomer-07-tekst-_00-varsel-innhold -->
</div>
<!-- END: 00-atomer-07-tekst-00-varsel -->
</div>
</div>
<div class="row">
<div class="col">
<!-- START: 00-atomer-01-forms-00-avkrysningsboks -->
<div class="custom-control custom-checkbox a-custom-checkbox ">
<input type="checkbox" id="" class="custom-control-input">
<label class="custom-control-label " for="">Lorem ipsom dolor</label>
</div>
<!-- END: 00-atomer-01-forms-00-avkrysningsboks -->
</div>
</div>
<div class="row">
<div class="col-12 mt-1">
<!-- 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-201">Epost:</label>
<div class="a-form-group-items input-group disabled ">
<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="f.eks post@karinordmann.no" name="input-field" data-val="true" id="text-input-201" disabled>
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</div>
<div class="col-12 mb-1">
<!-- START: 00-atomer-07-tekst-00-varsel -->
<div class="a-message a-message-default mt-0">
<!-- START: 00-atomer-07-tekst-_00-varsel-innhold -->
<b>Obs!</b> Lorem ipsum
<!-- 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-linkArea ">
med en lenke som står i løpende tekst
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
<!-- END: 00-atomer-07-tekst-_00-varsel-innhold -->
</div>
<!-- END: 00-atomer-07-tekst-00-varsel -->
</div>
</div>
<div class="row mt-1">
<div class="col">
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="button" class="a-btn a-btn-success mr-1 ">
Lagre
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</div>
</div>
</div>
</div>
</div>
<!-- END: 02-organismer-50-ekspanderbart-panel-_10-din-kontaktinformasjon -->