This page is not available in English.

Sideoppsett publikumsløsninger

For å skape en helhetlig opplevelse for våre brukere, bruker vi et fast oppsett for å bygge opp en side.

Publikumsløsninger skal alltid ha topp og bunn.
Hovedinnholdet legges i én kolonne sentrert på siden. Tekst, ikoner og visuelle elementer i hovedinnholdet justeres mot en vertikal linje.
Bokser og rammer kan gis ekstra oppmerksomhet ved å trekke dem utenfor den vertikale linjen.
Bredden på hovedinnhold, bokser og rammer skal fungere godt på den skjermen de vises. Bruk solide marger til høyre og venstre når skjermbredden er stor, og reduser dem når skjermbredden minker.

Siteoppsett alle skjermstørrelser

I publikumsløsninger er det viktig med god layout som fungerer godt på ulike skjermstørrelser. For at det skal være forutsigbart hvordan elementer plasseres på en side ved alle skjermbredder, bruker vi en kombinasjon av såkalte brekkpunkter og containers. Disse blir levert som designtokens og tilgjengelig for alle som bruker designsystemet.

Skisse av responsiv sidelayout

Oppbygging av sidelayout

Brekkpunkter

480 - xs / XtraSmall
640 - s / Small
1024 - m / Medium
1366 - l / Large
1920 - xl / XtraLarge

Containere

100% - xs / XtraSmall
560 piksler - s / Small
960 piksler - m / Medium
1160 piksler - l / Large

Regler for responsivitet

skjermbredde er mindre enn small => Innholdsbredde er maks 100%
skjermbredde er fra small til medium => Innholdsbredde er satt til maks container-s (560 piksler)
skjermbredde er fra medium til lagre => Innholdsbredde settes til maks container-m (960 piksler)
skjermbredde er lagre eller større => Innholdsbredde settes til container-l (1160 piksler)

I tillegg bruker vi et par andre container-bredder for å støtte opp justeringer av innholdet mot den vertikale linjen på siden, for eksempel et Panel som er bredere enn teksten over og under. (Navn på designtokens er --semantic-responsive-article og --semantic-responsive-wide-content)

Eksempler

Layout på tablet

Layout på mobil

Eksempelkode

CSS / SCSS

import '@skatteetaten/ds-core-designtokens/index.css';
@import '@skatteetaten/ds-core-designtokens/designtokens/breakpoints.scss';

.ext-container {
  width: var(--semantic-responsive-container);
  display: block;
  margin: auto;
}

.ext-responsive-container-wide {
  width: calc(var(--semantic-responsive-container) - var(--spacing-m) * 2);
  max-width: var(--container-m);
  margin: auto;
}

@media (width > $breakpoint-s) {
  .ext-responsive-container-wide {
    width: var(--semantic-responsive-container);
  }
}

.semantic-article {
  max-width: var(--semantic-responsive-article);
  margin: auto;
}

React / JSX

import { Footer, TopBannerExternal } from '@skatteetaten/ds-layout';

export const EksempelEkstern = () => {

  return (

    <>

      <TopBannerExternal />

      <main className="ext-container ext-responsive-container-wide">

        <h1>Hovedoverskrift</h1>

        <p>

           I Skatteetaten, vi jobber hardt, For å sikre at skatten er smart.

        </p>

        <article className="semantic-article">

          <h2>Artikkel</h2>

          <p>
Skatteetaten er stedet å være.

          </p>

        </article>

      </main>

      <Footer

        titleFirstColumn={'Om skatteetaten'}

        titleSecondColumn={'Andre Kolonne'}

        secondColumn={

          <ul>

            <li>Element1</li>

            <li>Element2</li>

          </ul>

        }

      >

        <Footer.Link href="#">Satser</Footer.Link>

        <Footer.Link href="#">Tips oss</Footer.Link>

      </Footer>

    </>

  );

};