altinn-designsystem

{ "icon-prefix": "ai", "icon-class": "ai-deadline", "icon-size": "", "icon-extra-class": "", "icon-text": "", "icon-id": false, "sr-only": false, "aria-hidden": false, "stacked-background": false, "icon-post-text": false, "icon-title": false, "icon-sr-only-text": false, "themeCss": "../../css/style.prototype.altinn.css", "themeJs": "./../../js/altinnPrototyping.js", "themeJsVendor": "../../js/altinnPrototyping.vendor.js", "print-form-tag": false, "text-input-id": "text-input-generic", "isHidden": false, "top-label": "Label: ", "isDisabled": false, "isInactive": false, "text-input-placeholder": "f.eks placeholder", "input-type": "text", "isRequired": false, "extra-help": false, "isLarge": false, "form-label-hasIcon": false, "input-name": "input-field", "form-control-class": "", "isFrom": "", "bubble-content": "Snakkebobletest", "hasMetaData": { "bubble-meta-data": "2 minutter siden" }, "close-icon": { "icon-prefix": "ai", "icon-class": "ai-exit", "icon-extra-class": "a-modal-close-icon", "icon-id": "close-chat" }, "input-chat": { "text-input-id": "chat", "top-label": "Skriv her", "text-input-placeholder": "Skriv her", "input-type": "text", "isHidden": true, "isInput-group": "input-group", "form-input-hasButton": { "button-icon": { "icon-prefix": "ai", "icon-class": "ai-send" }, "button-text": [ { "button-text-value": "Søk", "button-text-class": "sr-only" } ] } }, "link-text": "En lenke ser slik ut", "link-url": "/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html", "sr-text": false, "header-text": "Forklarende tittel", "intro-text": "Beskrivelse av innholdet i listen:", "rows": [ { "additional-classes": "a-dotted a-list a-list-noIcon", "columns": [ { "additional-classes": "col", "column-items": [ { "column-text": { "text": "Første rad" } } ] } ] }, { "additional-classes": "a-dotted a-list a-list-noIcon", "columns": [ { "additional-classes": "col", "column-items": [ { "column-text": { "text": "Andre rad" } } ] } ] } ], "popover-aria-label": "valid", "open-popover-class": "a-helpIconButton a-helpIconButton--blue a-js-togglePopoverIcons", "popover-data-target": "myPopup", "popover-title": false, "popover-content": false, "popover-class": "", "popover-link-text": "", "popover-various-content": { "alert-items": [ { "alert-text": { "text": "Dette er en tekst " } }, { "alert-link": { "link-text": "med en lenke som står i løpende tekst", "link-url": "http://www.altinn.no" } }, { "alert-text": { "text": "og man kan ha mer tekst etter." } } ] }, "popover-link-icon": [ { "icon-prefix": "ai", "icon-class": "ai-circle-plus", "icon-extra-class": "a-js-popoverIconInitial" }, { "icon-prefix": "ai", "icon-class": "ai-circle-minus", "icon-extra-class": "a-js-popoverIconExpanded" } ], "popover-content-id": "popoverWithIconToggle", "altText": { "altText": "Vis mer info" }, "bulletListItems": [ { "listItemDescription": "Første punkt i bullet-listen.", "listItemFootnote": true }, { "listItemDescription": "Andre punkt i bullet-listen." }, { "listItemDescription": "Tredje punkt i bullet-listen." } ], "button-text": "En standard knapp", "button-class": "a-btn a-btn-icon", "button-disabled": false, "button-type": "button", "onclick": false, "button-icon": false, "display-as-link": false, "date-input-label": "Dato:", "url": "/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html", "text-input-date": { "date-input-label": "Oppstartdato:", "isRequired": true, "form-control-class": "a-hasIcon" }, "date-submit": { "button-text": "Neste", "button-class": "a-btn", "button-type": "submit", "onclick": false }, "text-input-adress": { "text-input-id": "text-input-100", "top-label": "Adresse", "text-input-placeholder": "F.eks Storgata 12", "input-type": "text", "isRequired": true, "error-message-popover": true }, "text-input-postalcode": { "text-input-id": "postnummer", "top-label": "Postnummer:", "text-input-placeholder": "4 siffer", "input-type": "text", "maxlength": "4", "postal-code": true, "form-control-class": "a-input-postnumber", "isRequired": true }, "checkbox-private": { "check-legend": false, "isStacked": "custom-controls-stacked", "checkboxes": [ { "checkboxes-title": "Gjør adressen privat" } ] }, "adress-submit": { "button-text": "Neste", "button-class": "a-btn", "button-type": "submit", "onclick": false }, "textarea-label": "Fyll inn tekst:", "textarea-placeholder": "Forklarende hjelpetekst med forslag", "input-description": { "isRequired": true, "textarea-label": "Fyll inn tekst:", "textarea-placeholder": "Forklarende hjelpetekst med forslag" }, "input-radio": { "radio-legend": { "radio-legendText": "Hvilken knapp vil du velge?" }, "radiobuttons": [ { "radiobutton-title": "En radioknapp", "radiobutton-id": "radio26" }, { "radiobutton-title": "Enda en radioknapp", "radiobutton-id": "radio27" } ] }, "button-submit": { "button-text": "Sjekk navnet", "button-class": "a-btn", "button-type": "submit", "onclick": false }, "chooseCategory-findself": { "link-text": "Finn næringskode selv", "link-url": "/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html" }, "radiobutton-indicator": true, "radio-legend": { "radio-legendText": "Velg en kategori", "titleExtra": false }, "radiobuttons": [ { "isDisabled": false, "isInline": true, "radiobutton-title": "%PATH% <span style='color: #000'>%NAME%</span>", "radiobutton-id": "%ID%", "radiobutton-indicator": true, "radiobuttons-excerpt": { "radiobuttons-excerptText": "%DESCRIPTION%" } }, { "isDisabled": false, "isInline": true, "radiobutton-title": "Enda en radioknapp som inneholder mye tekst", "radiobutton-id": "radio32", "radiobutton-indicator": true } ], "radio-id": "a-js-radio-bransje", "radio-stacked": "custom-controls-stacked", "radio-class": "a-radioButtons-stackedList a-radioButtons-searchResult", "chooseCategory-submit": { "button-text": "Velg denne radioknappen", "button-class": "a-btn", "button-type": "submit", "onclick": false }, "paragraph-content": "Standard tekststørrelse på avsnitt er 16px. Dersom avsnittet plasseres i en artikkemal som har klassen a-text, vil teksten i avsnitet bli 18px. Lenker vil da få 1px border-bottom, og lenker i bold vil få 2px border-bottom. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ", "text-input-personnumber": { "text-input-id": "Fødselsnummer", "top-label": "Fødselsnummer: ", "text-input-placeholder": "11 siffer", "maxlength": "11", "input-type": "text", "isRequired": true, "error-message-popover": true, "input-regex-validation": { "validator-pattern": "\"[0-9]{11}\"", "error-message": "Fødselsnummer må være 11 siffer." } }, "text-input-lastname": { "text-input-id": "Etternavn", "top-label": "Etternavn: ", "text-input-placeholder": "", "input-type": "text", "isRequired": true, "error-message-popover": true, "input-regex-validation": { "validator-pattern": "\"^[\\S]*$\"", "error-message": "Du kan kun ha ett etternavn. Hvis vedkommende bruker flere er det kun det siste som defineres som etternavn i navneloven." } }, "lead-text-id": "leadText", "lead-text-content": "Ingress er et kort innledende avsnitt som vanligvis plasseres mellom overskriften og brødteksten. Ingressen brukes ofte til å \"gripe\" fatt i leseren, for at personen skal bli interessert i å lese resten av teksten. Den fungerer også som et visuelt skille mellom resten av teksten. Ingressen bør være lettlest og fri for vanskelige faguttrykk.", "section-title": "Tittel på steget", "extra-class": false, "dateDay": "20", "dateMonth": "feb", "hasIcon": { "icon-prefix": "ai", "icon-class": "ai-circle-plus", "icon-extra-class": "a-icon a-icon-circle" }, "hasTextSmall": { "textSmall": "Brønnøysundregistrene" }, "icontext": "Starte Enkeltpersonforetak", "variation-class": "a-iconText-background a-iconText-large", "isHeader": true, "aria-label": "Tilbake", "button-list": [ { "button-class": "a-modal-back", "aria-label": "Lukk", "onclick": "goBack()", "enable-popover": false, "stacked-background": { "icon-prefix": "ai", "icon-class": "ai-plain-circle-big" }, "icon-prefix": "ai", "icon-class": "ai-back", "icon-extra-class": "", "button-icon-text": "keyboard_backspace" }, { "button-class": "a-modal-close", "aria-label": "Lukk", "onclick": "location.href='../../patterns/04-sider-infoportal-10-seksjonsforsider-30-seksjonsforside-v-starteogdrive/04-sider-infoportal-10-seksjonsforsider-30-seksjonsforside-v-starteogdrive.html';", "enable-popover": false, "stacked-background": { "icon-prefix": "ai", "icon-class": "ai-plain-circle-big" }, "icon-prefix": "ai", "icon-class": "ai-exit", "icon-extra-class": "a-modal-close-icon" } ], "login-name": "JAN PETTERSEN", "display-as-dropdown": false, "personlogin-isDropdown": "dropdown", "variation": "", "login-icon": { "icon-prefix": "ai", "icon-class": "ai-private-circle-big", "icon-extra-class": "a-personSwitcher-icon a-js-onboardingTarget-1", "icon-sr-only-text": "Min profil" }, "logo": { "0": ".", "1": ".", "2": "/", "3": ".", "4": ".", "5": "/", "6": "i", "7": "m", "8": "a", "9": "g", "10": "e", "11": "s", "12": "/", "13": "a", "14": "-", "15": "l", "16": "o", "17": "g", "18": "o", "19": "-", "20": "w", "21": "h", "22": "i", "23": "t", "24": "e", "25": ".", "26": "s", "27": "v", "28": "g", "logo": "../../images/a-logo-black.svg" }, "logo-class": "a-modal-top-logo", "show-login": false, "login-show": { "login-name": "JAN PETTERSEN", "login-icon": { "icon-prefix": "ai", "icon-class": "ai-private-circle-big", "icon-extra-class": "a-personSwitcher-icon" } }, "btn-url": "/patterns/04-sider-infoportal-01-forside-00-forside/04-sider-infoportal-01-forside-00-forside.html", "modal-lead": { "lead-text-content": "Ingress er et kort innledende avsnitt som vanligvis plasseres mellom overskriften og brødteksten." }, "modal-input-orgName": { "top-label": "Foretaksnavn:", "text-input-placeholder": "f.eks navnet ditt og virksomheten" }, "modal-validatorInfo": { "validatorInfo-text": "Denne teksten forteller hva som skal til for at input blir validert.(Blå før valdidert)", "validatorInfo-icon": "" }, "modal-validatorInfoOK": { "validatorInfo-text": "Denne teksten forteller hva som skal til for at input blir validert. (Grønn når valdidert)", "validatorInfo-icon": "" }, "modal-input-textArea": { "textarea-label": "Fyll inn tekst:", "textarea-placeholder": "Forklarende hjelpetekst med forslag" }, "modal-input-radio": { "radio-legend": { "radio-legendText": "Hvilken knapp vil du velge?" }, "radiobuttons": [ { "radiobutton-title": "En radioknapp", "radiobutton-id": "radio26" }, { "radiobutton-title": "Enda en radioknapp", "radiobutton-id": "radio27" } ] }, "modal-date": { "date-input-label": "Oppstartdato:", "form-control-class": "a-hasIcon" }, "modal-chooseCategory": { "radio-legend": { "radio-legendText": "Hvilken knapp vil du velge?" }, "radio-stacked": "custom-controls-stacked", "radio-class": "a-radioButtons-stackedList", "radiobuttons": [ { "radiobutton-title": "En radioknapp", "radiobutton-id": "radio20", "radiobuttons-excerpt": { "radiobuttons-excerptText": "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." } }, { "radiobutton-title": "Enda en radioknapp som inneholder <strong>mye tekst</strong>", "radiobutton-id": "radio21", "radiobuttons-excerpt": { "radiobuttons-excerptText": "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." } } ] }, "modal-nextbutton": { "button-text": "Knapp" }, "modal-successbutton": { "button-text": "Knapp", "button-class": "a-btn a-btn-success" }, "modal-deactivated": { "button-text": "Knapp", "button-class": "a-btn disabled", "button-disabled": "disabled" }, "modal-discard": { "button-text": "Knapp", "button-class": "a-btn-link", "display-as-link": true }, "modal-extraInfo": {} }