Alert

<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
  <BannerAlertBox variant="information" title="Buss for trikk">Gjelder mellom Holbergsplass og Jernbanetorget.</BannerAlertBox>
  <BannerAlertBox variant="success" title="Kjøpet gikk i orden!">Bekreftelse er sendt til din e-post.</BannerAlertBox>
  <BannerAlertBox variant="warning" title="Avvik i trafikken">Enkelte avganger er forsinket.</BannerAlertBox>
  <BannerAlertBox variant="negative" title="Kunne ikke lagre">Skjemaet mangler informasjon i noen felter.</BannerAlertBox>
</div>

<div
    style={{
      display: 'grid',
      gridTemplateColumns: '1fr 1fr',
      gap: '1em 1em',
    }}
  >
    <SmallAlertBox variant="success">Kjøpet gikk i orden!</SmallAlertBox>
    <SmallAlertBox variant="information">Toget går fra plattform 2</SmallAlertBox>
    <SmallAlertBox variant="warning" width="fit-content">
      Snøvær på Bergensbanen
    </SmallAlertBox>
    <SmallAlertBox variant="negative" width="fit-content">
      Kjøpet kunne ikke gjennomføres!
    </SmallAlertBox>
  </div>

<div style={{ width: '62%', margin: '0 auto' }}>
    <SmallExpandableAlertBox
      variant="negative"
      title="Kjøpet kunne ikke gjennomføres!"
      >
      Vi har et teknisk problem akkurat nå. Kjøpsløsningen for billetter fungerer
      ikke.
    </SmallExpandableAlertBox>
  </div>

<div
    style={{
      display: 'grid',
      gridTemplateColumns: '1fr 1fr',
      gap: '1em 1em',
      alignItems: 'center',
      justifyItems: 'center',
    }}
  >
    <ToastAlertBox variant="success" title="Nå har du billett!">
      Ha det gøy på togturen til Bergen!
    </ToastAlertBox>
    <ToastAlertBox variant="information" title="Toget går fra plattform 2">
      Husk å sjekke plattform når du ankommer.
    </ToastAlertBox>
  </div>