altinn-designsystem

<!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">  <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">  <script src="https://use.fortawesome.com/ed31cded.js"></script> <script src="https://use.fortawesome.com/df832575.js"></script>  <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>   <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?1535451812396" media="all"> <link rel="stylesheet" href="../../styleguide/css/prism-typeahead.min.css?1535451812396" media="all" />  </head> <body class="" id="top"> <div class="a-sg-content-preloader"> <div class="a-sg-content-preloader-status"> </div> </div>  <div class="card a-accordion-card a-collapsePanel "> <div class="card-header a-js-index-heading a-collapsePanel-heading collapsed " id="alertListHeader" role="tab"> <a href="#" data-toggle="collapse" data-target="#varslinger" aria-expanded="false" aria-controls="varslinger" data-parent="#accordion">  <div class="a-iconText a-iconText-shadow a-iconText-large a-collapseBtn collapsed "> <div class="a-iconText-icon ">  <i class="reg reg-server a-icon "></i>  </div> <div class="a-iconText-text"> <span class="a-iconText-text-large">Varslinger </span> </div> </div>  </a> </div> <div id="varslinger" class="a-collapsePanel-body a-collapsePanel-body--border no-background collapse " role="tabpanel" aria-labelledby="alertListHeader"> <div class="panel-collapse-content-section a-bgWhite"> <div class="mt-2 px-2">  <button type="button" class="a-btn a-btn-action a-fullWidthBtn" data-toggle="altinn-modal" data-target="#add-employee-modal" data-action="load" data-url="../../patterns/02-organismer-80-Modal-js-innhold-90-altinnett-varslinger/02-organismer-80-Modal-js-innhold-90-altinnett-varslinger.markup-only.html">  <i class="ai ai-plus " ></i>  <span>Legg til nytt varsel</span> </button>  </div>  <div role="tablist" id="scheduledAlerts"> <div role="tab"> <div class="pt-2 pb-1 pl-lg-8 pl-md-8 pl-1 a-bgWhite">  <div class="a-collapse an-collapse-minusmarginPanel"> <div class=""> <div class="row"> <div class="col"> <h2 class="a-collapseHeader a-h3"> <a data-toggle="collapse" href="#" data-target="#exp-tab-table-scheduled-alerts" aria-expanded="true" aria-controls="exp-tab-table-scheduled-alerts" class="a-collapse-title a-collapse-title--absolute no-decoration "> <span class="a-dropdownArrow"></span> <span>Kommende varslinger <span class='badge badge-primary a-label badge-pill'>3</span></span> <span class="a-js-none"></span> </a> </h2> </div> </div> </div> </div>  </div> <div id="exp-tab-table-scheduled-alerts" class="a-collapseContent collapse a-bgWhite show" role="tabpanel" aria-expanded="true">  <div class="a-list-container "> <div class="a-list-header"> <div class="row"> <div class="a-w-7 d-none d-md-block">   </div> <div class="col-9 col-sm-5 col-md-3 a-list-sortHeader">  <span class="a-dropdownArrow" title="[object Object]"> </span> Tittel  </div> <div class="col-3 d-none d-sm-block a-list-sortHeader">  <span class="a-dropdownArrow" title="[object Object]"> </span> Kategori  </div> <div class="col-3 d-none d-sm-block a-list-sortHeader">  <span class="a-dropdownArrow" title="[object Object]"> </span> Tidspunkt  </div> </div> </div> <ul class="a-list a-list-large " id="scheduledAlerts"> <li class="a-selectable card" id="existing1"> <div class="row a-selectableExpanded"> <div class="a-w-7 text-center d-none d-md-block">   <i class="ai ai-server "></i>   </div> <div class="col-9 col-sm-5 col-md-3">  <span class="a-fontBold a-js-sortValue" title="[object Object]"> En varsling om noe annet </span>  </div> <div class="col-3 d-none d-sm-block">  <span class="a-js-sortValue" title="[object Object]"> Applikasjonsdrift </span>  </div> <div class="col-3 d-none d-sm-block">  <span class="a-js-sortValue" title="[object Object]"> 01.01.18 - 10:00 </span>  </div> <div>   <a href="#" class="a-btn-blue-noUnderline text-right a-fontBold a-fullWidthLink collapsed a-visibleWhenInitial a-hiddenWhenExpanded pr-0 pr-md-5 " data-toggle="collapse" data-target="#existingCollapse1" aria-controls="existingCollapse1" data-parent="#scheduledAlerts" aria-expanded="false"> <span class='d-none d-sm-block'>Utvid</span> </a>   <a href="#" class="a-btn-blue-noUnderline text-right a-fontBold a-fullWidthLink a-visibleWhenExpanded pr-0 pr-md-5 " data-toggle="collapse" data-target="#existingCollapse1" aria-controls="existingCollapse1" data-parent="#scheduledAlerts" aria-expanded="false"> <span class='d-none d-sm-block'>Lukk</span> </a>   </div> </div> <div class="col-12 collapse" id="existingCollapse1" aria-expanded="false" role="tabpanel">  <div class="pl-lg-8 pr-lg-4 pl-md-8 pr-md-4 pt-lg-2 px-1 py-1 pb-sm-2"> Grunnet vedlikehold vil Altinn portalbrukere bli møtt med nedetidsplakat i perioden 13.10.17 kl. 23:00 til 14.10.17 kl. 02:00. </div> <div class="a-list-fullWidthRow pr-lg-4"> <div class="modal-table-segment"> <div class="a-btn-group float-right mt-1" id="btnGroup"> <div class="d-inline-block">  <button type="button" class="a-btn a-btn-icon " aria-label="Tilbake" title="[object Object]">  <i class="ai ai-circle-exit a-danger ai-left " ></i>  <span class="a-btn-icon-text "> Slett </span> </button>  </div> <div class="d-inline-block">  <button type="button" class="a-btn a-btn-icon " aria-label="Tilbake" data-toggle="altinn-modal" data-action="load" data-url="../../patterns/02-organismer-80-Modal-js-innhold-90-altinnett-varslinger-eksisterende/02-organismer-80-Modal-js-innhold-90-altinnett-varslinger-eksisterende.markup-only.html" data-target="#edit-alert-modal" aria-controls="edit-alert-modal" title="[object Object]">  <i class="ai ai-edit ai-left " ></i>  <span class="a-btn-icon-text "> Endre </span> </button>  </div> <div class="d-inline-block">  <button type="button" class="a-btn a-btn-icon " aria-label="Tilbake" title="[object Object]">  <i class="ai ai-send ai-left " ></i>  <span class="a-btn-icon-text "> Kontakt oss om dette varselet </span> </button>  </div> </div> </div> </div>  </div> </li> <li class="a-selectable card" id="existing2"> <div class="row a-selectableExpanded"> <div class="a-w-7 text-center d-none d-md-block">   <i class="ai ai-server "></i>   </div> <div class="col-9 col-sm-5 col-md-3">  <span class="a-fontBold a-js-sortValue" title="[object Object]"> En annen varsling om nedetid </span>  </div> <div class="col-3 d-none d-sm-block">  <span class="a-js-sortValue" title="[object Object]"> Serverdrift </span>  </div> <div class="col-3 d-none d-sm-block">  <span class="a-js-sortValue" title="[object Object]"> 02.01.18 - 10:00 </span>  </div> <div>   <a href="#" class="a-btn-blue-noUnderline text-right a-fontBold a-fullWidthLink collapsed a-visibleWhenInitial a-hiddenWhenExpanded pr-0 pr-md-5 " data-toggle="collapse" data-target="#existingCollapse2" aria-controls="existingCollapse2" data-parent="#scheduledAlerts" aria-expanded="false"> <span class='d-none d-sm-block'>Utvid</span> </a>   <a href="#" class="a-btn-blue-noUnderline text-right a-fontBold a-fullWidthLink a-visibleWhenExpanded pr-0 pr-md-5 " data-toggle="collapse" data-target="#existingCollapse2" aria-controls="existingCollapse2" data-parent="#scheduledAlerts" aria-expanded="false"> <span class='d-none d-sm-block'>Lukk</span> </a>   </div> </div> <div class="col-12 collapse" id="existingCollapse2" aria-expanded="false" role="tabpanel">  <div class="pl-lg-8 pr-lg-4 pl-md-8 pr-md-4 pt-lg-2 px-1 py-1 pb-sm-2"> Grunnet vedlikehold vil Altinn portalbrukere bli møtt med nedetidsplakat i perioden 13.10.17 kl. 23:00 til 14.10.17 kl. 02:00. </div> <div class="a-list-fullWidthRow pr-lg-4"> <div class="modal-table-segment"> <div class="a-btn-group float-right mt-1" id="btnGroup"> <div class="d-inline-block">  <button type="button" class="a-btn a-btn-icon " aria-label="Tilbake" title="[object Object]">  <i class="ai ai-circle-exit a-danger ai-left " ></i>  <span class="a-btn-icon-text "> Slett </span> </button>  </div> <div class="d-inline-block">  <button type="button" class="a-btn a-btn-icon " aria-label="Tilbake" data-toggle="altinn-modal" data-action="load" data-url="../../patterns/02-organismer-80-Modal-js-innhold-90-altinnett-varslinger-eksisterende/02-organismer-80-Modal-js-innhold-90-altinnett-varslinger-eksisterende.markup-only.html" data-target="#edit-alert-modal" aria-controls="edit-alert-modal" title="[object Object]">  <i class="ai ai-edit ai-left " ></i>  <span class="a-btn-icon-text "> Endre </span> </button>  </div> <div class="d-inline-block">  <button type="button" class="a-btn a-btn-icon " aria-label="Tilbake" title="[object Object]">  <i class="ai ai-send ai-left " ></i>  <span class="a-btn-icon-text "> Kontakt oss om dette varselet </span> </button>  </div> </div> </div> </div>  </div> </li> <li class="a-selectable card" id="existing3"> <div class="row a-selectableExpanded"> <div class="a-w-7 text-center d-none d-md-block">   <i class="ai ai-server "></i>   </div> <div class="col-9 col-sm-5 col-md-3">  <span class="a-fontBold a-js-sortValue" title="[object Object]"> En varsling om nedetid </span>  </div> <div class="col-3 d-none d-sm-block">  <span class="a-js-sortValue" title="[object Object]"> Applikasjonsdrift </span>  </div> <div class="col-3 d-none d-sm-block">  <span class="a-js-sortValue" title="[object Object]"> 05.02.18 - 18:00 </span>  </div> <div>   <a href="#" class="a-btn-blue-noUnderline text-right a-fontBold a-fullWidthLink collapsed a-visibleWhenInitial a-hiddenWhenExpanded pr-0 pr-md-5 " data-toggle="collapse" data-target="#existingCollapse3" aria-controls="existingCollapse3" data-parent="#scheduledAlerts" aria-expanded="false"> <span class='d-none d-sm-block'>Utvid</span> </a>   <a href="#" class="a-btn-blue-noUnderline text-right a-fontBold a-fullWidthLink a-visibleWhenExpanded pr-0 pr-md-5 " data-toggle="collapse" data-target="#existingCollapse3" aria-controls="existingCollapse3" data-parent="#scheduledAlerts" aria-expanded="false"> <span class='d-none d-sm-block'>Lukk</span> </a>   </div> </div> <div class="col-12 collapse" id="existingCollapse3" aria-expanded="false" role="tabpanel">  <div class="pl-lg-8 pr-lg-4 pl-md-8 pr-md-4 pt-lg-2 px-1 py-1 pb-sm-2"> Grunnet vedlikehold vil Altinn portalbrukere bli møtt med nedetidsplakat i perioden 13.10.17 kl. 23:00 til 14.10.17 kl. 02:00. </div> <div class="a-list-fullWidthRow pr-lg-4"> <div class="modal-table-segment"> <div class="a-btn-group float-right mt-1" id="btnGroup"> <div class="d-inline-block">  <button type="button" class="a-btn a-btn-icon " aria-label="Tilbake" title="[object Object]">  <i class="ai ai-circle-exit a-danger ai-left " ></i>  <span class="a-btn-icon-text "> Slett </span> </button>  </div> <div class="d-inline-block">  <button type="button" class="a-btn a-btn-icon " aria-label="Tilbake" data-toggle="altinn-modal" data-action="load" data-url="../../patterns/02-organismer-80-Modal-js-innhold-90-altinnett-varslinger-eksisterende/02-organismer-80-Modal-js-innhold-90-altinnett-varslinger-eksisterende.markup-only.html" data-target="#edit-alert-modal" aria-controls="edit-alert-modal" title="[object Object]">  <i class="ai ai-edit ai-left " ></i>  <span class="a-btn-icon-text "> Endre </span> </button>  </div> <div class="d-inline-block">  <button type="button" class="a-btn a-btn-icon " aria-label="Tilbake" title="[object Object]">  <i class="ai ai-send ai-left " ></i>  <span class="a-btn-icon-text "> Kontakt oss om dette varselet </span> </button>  </div> </div> </div> </div>  </div> </li> </ul> </div>  </div> </div> </div>   <div role="tablist" id="scheduledAlerts"> <div role="tab"> <div class="pt-2 pb-1 pl-lg-8 pl-md-8 pl-1 a-bgWhite">  <div class="a-collapse an-collapse-minusmarginPanel"> <div class=""> <div class="row"> <div class="col"> <h2 class="a-collapseHeader a-h3"> <a data-toggle="collapse" href="#" data-target="#exp-tab-table-previous-alerts" aria-expanded="false" aria-controls="exp-tab-table-previous-alerts" class="a-collapse-title a-collapse-title--absolute no-decoration collapsed "> <span class="a-dropdownArrow"></span> <span>Varslinger sendt siste 30 dager <span class='badge badge-primary a-label badge-pill'>3</span></span> <span class="a-js-none"></span> </a> </h2> </div> </div> </div> </div>  </div> <div id="exp-tab-table-previous-alerts" class="a-collapseContent collapse a-bgWhite " role="tabpanel" aria-expanded="false">  <div class="a-list-container "> <div class="a-list-header"> <div class="row"> <div class="a-w-7 d-none d-md-block">   </div> <div class="col-9 col-sm-5 col-md-3 a-list-sortHeader">  <span class="a-dropdownArrow" title="[object Object]"> </span> Tittel  </div> <div class="col-3 d-none d-sm-block a-list-sortHeader">  <span class="a-dropdownArrow" title="[object Object]"> </span> Kategori  </div> <div class="col-3 d-none d-sm-block a-list-sortHeader">  <span class="a-dropdownArrow" title="[object Object]"> </span> Tidspunkt  </div> </div> </div> <ul class="a-list a-list-large " id="previousAlerts"> <li class="a-selectable card" id="existing10"> <div class="row a-selectableExpanded"> <div class="a-w-7 text-center d-none d-md-block">   <i class="ai ai-server "></i>   </div> <div class="col-9 col-sm-5 col-md-3">  <span class="a-fontBold a-js-sortValue" title="[object Object]"> En tidligere varsling </span>  </div> <div class="col-3 d-none d-sm-block">  <span class="a-js-sortValue" title="[object Object]"> Applikasjonsdrift </span>  </div> <div class="col-3 d-none d-sm-block">  <span class="a-js-sortValue" title="[object Object]"> 01.01.18 - 10:00 </span>  </div> <div>   <a href="#" class="a-btn-blue-noUnderline text-right a-fontBold a-fullWidthLink collapsed a-visibleWhenInitial a-hiddenWhenExpanded pr-0 pr-md-5 " data-toggle="collapse" data-target="#existingCollapse10" aria-controls="existingCollapse10" data-parent="#previousAlerts" aria-expanded="false"> <span class='d-none d-sm-block'>Utvid</span> </a>   <a href="#" class="a-btn-blue-noUnderline text-right a-fontBold a-fullWidthLink a-visibleWhenExpanded pr-0 pr-md-5 " data-toggle="collapse" data-target="#existingCollapse10" aria-controls="existingCollapse10" data-parent="#previousAlerts" aria-expanded="false"> <span class='d-none d-sm-block'>Lukk</span> </a>   </div> </div> <div class="col-12 collapse" id="existingCollapse10" aria-expanded="false" role="tabpanel">  <div class="pl-lg-8 pr-lg-4 pl-md-8 pr-md-4 pt-lg-2 px-1 py-1 pb-sm-2"> Grunnet vedlikehold vil Altinn portalbrukere bli møtt med nedetidsplakat i perioden 13.10.17 kl. 23:00 til 14.10.17 kl. 02:00. </div> <div class="a-list-fullWidthRow pr-lg-4"> <div class="modal-table-segment"> <div class="a-btn-group float-right mt-1" id="btnGroup"> <div class="d-inline-block">  <button type="button" class="a-btn a-btn-icon " aria-label="Tilbake" title="[object Object]">  <i class="ai ai-circle-exit a-danger ai-left " ></i>  <span class="a-btn-icon-text "> Slett </span> </button>  </div> <div class="d-inline-block">  <button type="button" class="a-btn a-btn-icon " aria-label="Tilbake" data-toggle="altinn-modal" data-action="load" data-url="../../patterns/02-organismer-80-Modal-js-innhold-90-altinnett-varslinger-eksisterende/02-organismer-80-Modal-js-innhold-90-altinnett-varslinger-eksisterende.markup-only.html" data-target="#edit-alert-modal" aria-controls="edit-alert-modal" title="[object Object]">  <i class="ai ai-edit ai-left " ></i>  <span class="a-btn-icon-text "> Endre </span> </button>  </div> <div class="d-inline-block">  <button type="button" class="a-btn a-btn-icon " aria-label="Tilbake" title="[object Object]">  <i class="ai ai-send ai-left " ></i>  <span class="a-btn-icon-text "> Kontakt oss om dette varselet </span> </button>  </div> </div> </div> </div>  </div> </li> <li class="a-selectable card" id="existing11"> <div class="row a-selectableExpanded"> <div class="a-w-7 text-center d-none d-md-block">   <i class="ai ai-server "></i>   </div> <div class="col-9 col-sm-5 col-md-3">  <span class="a-fontBold a-js-sortValue" title="[object Object]"> En annen varsling om nedetid </span>  </div> <div class="col-3 d-none d-sm-block">  <span class="a-js-sortValue" title="[object Object]"> Serverdrift </span>  </div> <div class="col-3 d-none d-sm-block">  <span class="a-js-sortValue" title="[object Object]"> 02.01.18 - 10:00 </span>  </div> <div>   <a href="#" class="a-btn-blue-noUnderline text-right a-fontBold a-fullWidthLink collapsed a-visibleWhenInitial a-hiddenWhenExpanded pr-0 pr-md-5 " data-toggle="collapse" data-target="#existingCollapse11" aria-controls="existingCollapse11" data-parent="#previousAlerts" aria-expanded="false"> <span class='d-none d-sm-block'>Utvid</span> </a>   <a href="#" class="a-btn-blue-noUnderline text-right a-fontBold a-fullWidthLink a-visibleWhenExpanded pr-0 pr-md-5 " data-toggle="collapse" data-target="#existingCollapse11" aria-controls="existingCollapse11" data-parent="#previousAlerts" aria-expanded="false"> <span class='d-none d-sm-block'>Lukk</span> </a>   </div> </div> <div class="col-12 collapse" id="existingCollapse11" aria-expanded="false" role="tabpanel">  <div class="pl-lg-8 pr-lg-4 pl-md-8 pr-md-4 pt-lg-2 px-1 py-1 pb-sm-2"> Grunnet vedlikehold vil Altinn portalbrukere bli møtt med nedetidsplakat i perioden 13.10.17 kl. 23:00 til 14.10.17 kl. 02:00. </div> <div class="a-list-fullWidthRow pr-lg-4"> <div class="modal-table-segment"> <div class="a-btn-group float-right mt-1" id="btnGroup"> <div class="d-inline-block">  <button type="button" class="a-btn a-btn-icon " aria-label="Tilbake" title="[object Object]">  <i class="ai ai-circle-exit a-danger ai-left " ></i>  <span class="a-btn-icon-text "> Slett </span> </button>  </div> <div class="d-inline-block">  <button type="button" class="a-btn a-btn-icon " aria-label="Tilbake" data-toggle="altinn-modal" data-action="load" data-url="../../patterns/02-organismer-80-Modal-js-innhold-90-altinnett-varslinger-eksisterende/02-organismer-80-Modal-js-innhold-90-altinnett-varslinger-eksisterende.markup-only.html" data-target="#edit-alert-modal" aria-controls="edit-alert-modal" title="[object Object]">  <i class="ai ai-edit ai-left " ></i>  <span class="a-btn-icon-text "> Endre </span> </button>  </div> <div class="d-inline-block">  <button type="button" class="a-btn a-btn-icon " aria-label="Tilbake" title="[object Object]">  <i class="ai ai-send ai-left " ></i>  <span class="a-btn-icon-text "> Kontakt oss om dette varselet </span> </button>  </div> </div> </div> </div>  </div> </li> <li class="a-selectable card" id="existing12"> <div class="row a-selectableExpanded"> <div class="a-w-7 text-center d-none d-md-block">   <i class="ai ai-server "></i>   </div> <div class="col-9 col-sm-5 col-md-3">  <span class="a-fontBold a-js-sortValue" title="[object Object]"> En varsling om nedetid </span>  </div> <div class="col-3 d-none d-sm-block">  <span class="a-js-sortValue" title="[object Object]"> Applikasjonsdrift </span>  </div> <div class="col-3 d-none d-sm-block">  <span class="a-js-sortValue" title="[object Object]"> 05.02.18 - 18:00 </span>  </div> <div>   <a href="#" class="a-btn-blue-noUnderline text-right a-fontBold a-fullWidthLink collapsed a-visibleWhenInitial a-hiddenWhenExpanded pr-0 pr-md-5 " data-toggle="collapse" data-target="#existingCollapse12" aria-controls="existingCollapse12" data-parent="#previousAlerts" aria-expanded="false"> <span class='d-none d-sm-block'>Utvid</span> </a>   <a href="#" class="a-btn-blue-noUnderline text-right a-fontBold a-fullWidthLink a-visibleWhenExpanded pr-0 pr-md-5 " data-toggle="collapse" data-target="#existingCollapse12" aria-controls="existingCollapse12" data-parent="#previousAlerts" aria-expanded="false"> <span class='d-none d-sm-block'>Lukk</span> </a>   </div> </div> <div class="col-12 collapse" id="existingCollapse12" aria-expanded="false" role="tabpanel">  <div class="pl-lg-8 pr-lg-4 pl-md-8 pr-md-4 pt-lg-2 px-1 py-1 pb-sm-2"> Grunnet vedlikehold vil Altinn portalbrukere bli møtt med nedetidsplakat i perioden 13.10.17 kl. 23:00 til 14.10.17 kl. 02:00. </div> <div class="a-list-fullWidthRow pr-lg-4"> <div class="modal-table-segment"> <div class="a-btn-group float-right mt-1" id="btnGroup"> <div class="d-inline-block">  <button type="button" class="a-btn a-btn-icon " aria-label="Tilbake" title="[object Object]">  <i class="ai ai-circle-exit a-danger ai-left " ></i>  <span class="a-btn-icon-text "> Slett </span> </button>  </div> <div class="d-inline-block">  <button type="button" class="a-btn a-btn-icon " aria-label="Tilbake" data-toggle="altinn-modal" data-action="load" data-url="../../patterns/02-organismer-80-Modal-js-innhold-90-altinnett-varslinger-eksisterende/02-organismer-80-Modal-js-innhold-90-altinnett-varslinger-eksisterende.markup-only.html" data-target="#edit-alert-modal" aria-controls="edit-alert-modal" title="[object Object]">  <i class="ai ai-edit ai-left " ></i>  <span class="a-btn-icon-text "> Endre </span> </button>  </div> <div class="d-inline-block">  <button type="button" class="a-btn a-btn-icon " aria-label="Tilbake" title="[object Object]">  <i class="ai ai-send ai-left " ></i>  <span class="a-btn-icon-text "> Kontakt oss om dette varselet </span> </button>  </div> </div> </div> </div>  </div> </li> </ul> </div>  </div> </div> </div>  </div> </div> </div>  <div class="a-modal fade modal a-fade--appear " id="add-alert-modal" role="dialog" tabindex="-1"> <div class="modal-dialog modal-lg" role="document"> <div class="container a-p-static"> <div class="row"> <div class="col-xl-12">  <div class="a-modal-top">  <img src="../../images/altinnett-logo-black.svg" alt="Altinn logo" class="a-logo a-modal-top-logo ">  </div>  </div> </div> <div class="row"> <div class="col-xl-10 offset-xl-1 a-p-static">  <div class="a-modal-navbar"> <!-