Breakpoints

Ved å bruke våre breakpoints kan du enkelt tilpasse ditt design for å sikre at innholdet presenteres på en optimal måte på tvers av ulike enheter og skjermstørrelser.

Om du ønsker mer hjelp til å lage responsive løsninger kan du bruke vår grid-pakke.

I vår utils-pakke finnes det en mixin for bruk av våre breakpoints:

@mixin for-desktop {
  @media screen and (min-width: #{t.$breakpoints-large}) {
    @content;
  }
}

@mixin for-large-desktop {
  @media screen and (min-width: #{t.$breakpoints-extra-large}) {
    @content;
  }
}

Eksempel på bruk:

@use '@entur/utils/dist/breakpoints.scss';

.main-content{
    padding: 16px;

    @include for-desktop {
        padding: 24px;
    }
}