Delar av dette innhaldet er ikkje tilgjengeleg på nynorsk enno.

Sideoppsett interne løsninger

For å bidra til forutsigbarhet og effektivitet bruker vi et fast oppsett på de interne løsningene våre.

Innholdet er venstrestilt, og ekspanderer mot høyre når skjermbredden øker.
Først vises en seksjon med kontekstinformasjon om aktuell person, bedrift eller liknende. Her legger vi opplysninger som skal fungere som støtte til å utføre oppgaven.
Hovedområdet kan bruke resten av skjermbredden, men er delt i to nivåer:
- En bredde for skjema-elementer og tekst (--semantic-responsive-article)
- En bredde for brede tabeller, informasjonsbokser og liknende (--semantic-responsive-wide-content)

Sideoppsett

I det interne flatene våre er det ofte behov for å se mye informasjon på en gang og flere løsninger kan brukes i parallell med hverandre. Det kan for eksempel bety å vise tabeller som fyller hele skjermens bredde, eller sette to sett med opplysninger opp mot hverandre.

Skisse av intern løsning

Oppbygging av sidelayout

Brekkpunkter

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

Regler for responsivitet

For brekkpunkt Medium og opp er siden delt opp i to kolonner (<aside> og <main>). Aside står da til venstre, og har en fast bredde på container-aside-narrow (288px) på brekkpunkt Medium eller container-aside (384px) på brekkpunkt Large og oppover.
For brekkpunkt under Medium legges <aside> over hovedinnholdet <main> og får en variabel bredde.

Relevante containere

--semantic-responsive-internal-container-display
--semantic-responsive-internal-container-flex-direction
--semantic-responsive-internal-container-spacing
--semantic-responsive-internal-aside
--semantic-responsive-wide-content

Eksempelkode

CSS / SCSS

// Importer brekkpunkter i scss-filen din

// Note: Dette må gjøres fordi vi ikke kan bruke CSS-variabler i media-query uttrykk

// Kommer i CSS5 https://www.w3.org/TR/mediaqueries-5/#custom-mq

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

.wrapper-main-aside {

    display: var(--semantic-responsive-internal-container-display);   flex-direction: var(--semantic-responsive-internal-container-flex-direction);   padding: var(--semantic-responsive-internal-container-spacing);   gap: var(--semantic-responsive-internal-container-spacing);

}

.aside {

  flex: 0 0 var(--semantic-responsive-internal-aside);

}

.main {

  flex: 1

}

React / JSX

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

<TopBannerInternal/>

<div className="wrapper-main-aside">

  <aside className="aside">Kontekst</aside>

  <main className="main">

    <h1>Tittel</h1>

    <p>I Skatteetaten, vi jobber hardt, For.... </p>

  </main>

</div>