Styleguide for web

Dette er en teknisk beskrivelse for innholdselementer på dibk.no, og skal være et verktøy for videre utvikling av DiBKs webløsninger.

Hovedfarger

De tre hovedfargene er hentet fra logoen.

Sekundærfarger

Svart brukes i tekst og sjøgrønn brukes i forbindelse med lenker og call-to-action. Varm grå brukes i alle streker og de helt lyse fargene er velegnet for bruk som bakgrunner.

Støttefarger

Støttefargene brukes til elementer som skal utheves spesielt. Skal brukes i mindre grad. Rødfargen (den samme som i godkjenningsmerket) skal brukes ved feilmeldinger og varsler.

Statens pris for byggkvalitet

Brukes kun på Statens pris for byggkvalitet.

Heading 1

Altis, 35px, 500, linjeavstand 1.43 (50px) / Mobil: 26px, linjeavstand 1.43 (37px).
Hovedoverskrift på alle sidetyper.

Lorem ipsum dolor sit amet

Heading 2

Altis, 26px, 500, linjeavstand 1.42 (29px) / Mobil: 22px.
Brukes som overskrifter på moduler i høyrespalten.

Lorem ipsum dolor sit amet

Heading 3

Altis, kursiv, 22px, linjeavstand 1.42 (31px) / Mobil: 20px.
Brukes som mellomtitler i løpende tekst, der det er behov for tydelig innholdsskille innenfor samme artikkel.

Lorem ipsum dolor sit amet

Stor overskrift

Altis light, 32px på 42px linjeavstand / Mobil: 24px på 42px linjeavstand.

Block overskrift

Altis, 20px, 500, linjeavstand 1.7 (34px).

Metainformasjon

Open sans, 14px, 400, linjeavstand 20px.

Ingress

Altis, 22px, linjeavstand 1.42 / Mobil: 20px.
Introduserer artikkel og skal plasseres mellom hovdedtittel og brødtekst. For at dette skal oppfattes som en introduksjon, er det en fordel om den bygger minimum 2 – helst 3 linjer.

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 ipsum dolor sit amet.

Brødtekst

Open Sans, 19px, linjeavstand 32px.
Løpende tekst i artikler.

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 ipsum dolor sit amet.

Liste i løpende tekst

Listen skal følge typografien i den løpende teksten
Listen markeres med ikon – bullet – foran.

Nummererte lister i løpende tekst

Listen skal følge typografien i den løpende teksten.
Hovedlisten er nummerert og underlister vil få små bokstaver.

Alfabetiskliste i løpende tekst

Listen skal følge typografien i den løpende teksten.
Ett-nivås liste med alfabetisk opplisting.

Lenkeliste

Listen skal følge typografien i den løpende teksten. Uten understrek (hover: med understrek), og sort pil foran teksten.
Liste med lenker inkorporert i en løpende tekst.

• Lenke 1
• Lenke 1
• Lenke 2

Liste uten bullets

Listen skal følge typografien i den løpende teksten, med understrek (hover: uten understrek).
Lister i dropdown i venstremeny skal ikke ha bullets.

• Lenke 1
• Lenke 1
• Lenke 2

Stor liste med streker mellom listepunkter

Listen består av meta (Open sans, 14px) og paragraph (Open sans, 19px).
Listen er blant annet brukt i veilederen som endringshistorikk.

• 12.08.14

  Lorem ipsum dolor sit amet, consectetur adipisicing elit.

• 12.08.14

  Lorem ipsum dolor sit amet, consectetur adipisicing elit.

• 12.08.14

  Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lenker i løpende tekst

Med understrek, samme font og farge som i løpende tekst (hover: uten understrek).
Lenker i løpende tekst, f.eks brødtekst.

Lenker i løpende tekst vil se ut slik som denne gjør.

Lenke ekstern

Med understrek og ikon for lenke ut av dibk.no, samme font og farge som i den løpende tekst (hover: uten understrek).
Lenker som linker ut av dibk.no

Brødsmulesti

Open sans, 14px, understrek (hover: uten understrek). Aktiv side: uten understrek, fontvekt 500.
Hjelpetekst med lenker til sidenivåene, fast plassert øverst på alle undersider. Viser alle nivåer på desktop, tre nivåer på tablet/medium skjermer og to nivåer på mobil/små skjermer. Hver link er begrenset til et visst antall tegn (i Episerver er denne satt til 30 tegn).

Frittstående lenke

Følger font, størrelse og farge som løpende tekst, med understrek og inline-block (hover: uten understrek).
Disse brukes som navigeringselementer på veilederne og på kalendersiden.

Lenke for skriv ut

Samme som inline-link med ikon foran (hover: uten understrek).
Disse brukes som navigeringselementer på veilederne og på kalendersiden.

Bilder – full bredde

Bilder med eller uten undertekst som brukt i veilederne og artikler.

Fra nyttår blir det enklere å gjøre om boligen. Forutsetningen er at boligen er fra før 1.juli 2011 og at rommet du vil endre ligger inntil et annet oppholdsrom. Foto: Knut Knudsen

Tekstfelt

Innfyllingsfelt.

Tekstfelt med feilmelding

Varsel dersom man ikke kommer videre uten å fylle ut feltet.

Tekstområde

Innfyllingsfelt som støtter flere linjer med tekst.

Tekstområde med feilmelding

Innfyllingsfelt som støtter flere linjer med tekst.

Radioknapper

I sammenhenger der brukeren kun skal velge ett alternativ.

Avkrysningsbokser

I sammenhenger der brukeren kan velge flere alternativ.

Last opp filer

Nedtrekksmeny

Innfyllingsfeltet gir flere forhåndsbestemte valgmuligheter.

Fremdriftslinje

Episerver form element

Hjelpetekst

Forklaring til tekst. Ligger skjult bak et ikon – spørsmåltegn.

Trekkspill – primær

Laget til kapittelvalg i veilederne.

• Tiltak som krever søknad og tillatelseog som kan forestås av tiltakshaver
  Gjennom kunnskapsbasert praksis om eiendomsforvaltning skal Direktoratet for byggkvalitet bidra til at verdier i eiendomsmassen hos kommuner, fylkeskommuner, private- og statlige eiendomsforvaltere blir godt ivaretatt.
• Seksjon 2
  Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
• Seksjon 3
  Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Trekkspill – sekundær

Laget til bruk i veiledningsartiklene i forskriftene.

• Veiledning § 4-2

  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 ipsum dolor sit amet.

Trekkspill – bokset

Laget for bruk i skjema, åpnet ved lasting.

• Ofte stilte spørsmål

  • Hvor i TEK10 finnes reglene om universell utforming og tilgjengelighet?
    Disse finnes i kapittel 8 uteområder og i kapittel 12 planløsning og bygningsdeler i byggverk i TEK10.
  • Hva er forskjellen på universell utforming og
    Byggverk for publikum og arbeidsbygninger skal være universelt utformet. Krav om universell utforming av bygg er gitt i § 12-1 i forskrift til tekniske krav i byggverk (TEK10). Boliger må ikke være universelt utformet, men det stilles krav om tilgjengelighet for enkelte boliger og boenheter. Kravet om tilgjengelighet er gitt i §12-2 i TEK10.

Målgruppeblokk

Brukes kun på forsiden, default størrelse er medium.

Privat

• Bygge eller endre

  Finn ut hvordan du søker eller om du slipper å søke.

• Send byggesøknaden digitalt

  Privatpersoner kan sende søknad om bruksendring og nabovarsel digitalt.

• Søknadsskjemaer og blanketter

  Her laster du ned søknadsskjemaer og blanketter til byggesaken.

Proff

• Byggteknisk forskrift

  Byggteknisk forskrift (TEK17) med veiledning. Angir minimumskrav til byggverk.

• Byggesaksforskriften

  Byggesaksforskriften (SAK10) med veiledning

• Saksbehandling, tilsyn og kontroll

  Sjekklister, maler og veiledning for deg som skal føre tilsyn eller gjøre en uavhengig kontroll.

Transportblokk

Brukes kun på transportsider, fast bredde.

Enkeltlenke med tittel, beskrivelse og bilde

Blokk med forskjellig bakgrunnsfarger. De fargede blokkene brukes bare på Innsiden. Default (grå) brukes på dibk.no, mens de fargede blokkene brukes bare på Innsiden.

Liten, grå uten bilde

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Liten, grå med bilde

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Medium blokk

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Bokset lenkeliste

Bokset Henvisningsliste

Faktaboks

Tekstboks m/u ikon

Standard lenkeboks

Standard lenkeboks

Advarselboks

Bilde med lenke

Handlingsutløsende blokk med knapp og bilde

Merkedager

Lorem ipsum

Til påmelding

Statens byggkvalitetspris: Riktekst med gul bakgrunn

Statens byggkvalitetspris: Følg oss på Facebook

Følg oss på Facebook

Kalender

Advarselbanner i topp

Advarselbanner i søkeresultat

Trekkspill – blokk

Ulike fargebakgrunner: Default er gul («none» i Episerver), blue, light-blue, light-green, green.

Gul bakgrunn (default). Brukes eksklusivt for Statens pris for byggkvalitet:

• Item 1

  Lorem ipsum dolor sit amet, consectetur adipisicing elit.

• Item 2

  Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Blå bakgrunn:

• Item 1

  Lorem ipsum dolor sit amet, consectetur adipisicing elit.

• Item 2

  Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lys grønn bakgrunn. Brukes i spørsmål og svar i artikkelmaler:

• Item 1

  Lorem ipsum dolor sit amet, consectetur adipisicing elit.

• Item 2

  Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Ansvarlig person

Brukes på høringer

Ansvarlig person:

Test Testesen

Telefon: 99999999

Standard modal

Modal – høringer

Cookie melding

Varsel melding