<div class="banner banner--success">
  <div class="container banner__content">
    <span class="banner__icon" aria-hidden="true">
      <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" version="1.1"
        xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 24 24" height="24"
        width="24">
        <g transform="matrix(1,0,0,1,0,0)">
          <path d="M 12,7.5v6 " stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round"
            stroke-linejoin="round"></path>
          <path d="M 12,16.5L12,16.5 " stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round"
            stroke-linejoin="round"></path>
          <path
            d="M 12,16.5c-0.207,0-0.375,0.168-0.375,0.375S11.793,17.25,12,17.25 s0.375-0.168,0.375-0.375S12.207,16.5,12,16.5 "
            stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          <path
            d="M 23.25,12c0-1.635-1.059-3.082-2.618-3.576c0.954-1.838,0.238-4.102-1.601-5.056 c-1.083-0.562-2.372-0.562-3.455,0c-0.625-1.975-2.733-3.069-4.708-2.444c-1.164,0.368-2.075,1.28-2.444,2.444 C6.586,2.414,4.322,3.13,3.368,4.969c-0.562,1.083-0.562,2.372,0,3.455c-1.975,0.625-3.069,2.733-2.444,4.708 c0.368,1.164,1.28,2.075,2.444,2.444c-0.954,1.838-0.238,4.102,1.601,5.056c1.083,0.562,2.372,0.562,3.455,0 c0.625,1.975,2.733,3.069,4.708,2.444c1.164-0.368,2.075-1.28,2.444-2.444c1.838,0.954,4.102,0.238,5.056-1.601 c0.562-1.083,0.562-2.372,0-3.455C22.191,15.082,23.25,13.635,23.25,12z"
            stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </g>
      </svg>
    </span>
    <div class="banner__text">
      <p>Melding: Noe har skjedd som du bør være glad for. <a href="#">Vi har også inkludert en lenke du kan trykke
          på.</a></p>
    </div>

  </div>


</div>

<div class="banner banner--warning">
  <div class="container banner__content">
    <span class="banner__icon" aria-hidden="true">
      <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" version="1.1"
        xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 24 24" height="24"
        width="24">
        <g transform="matrix(1,0,0,1,0,0)">
          <path
            d="M 12,18.75c-0.207,0-0.375,0.168-0.375,0.375S11.793,19.5,12,19.5s0.375-0.168,0.375-0.375 S12.207,18.75,12,18.75L12,18.75 "
            stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M 12,15.75v-7.5 " stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round"
            stroke-linejoin="round"></path>
          <path
            d="M 13.621,1.76c-0.44-0.895-1.522-1.265-2.417-0.825 c-0.359,0.176-0.649,0.466-0.825,0.825L0.906,21.058c-0.371,0.754-0.06,1.665,0.694,2.036c0.209,0.103,0.439,0.156,0.672,0.156 h19.456c0.84,0.001,1.521-0.68,1.522-1.52c0-0.233-0.053-0.463-0.156-0.672L13.621,1.76z"
            stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </g>
      </svg>
    </span>
    <div class="banner__text">
      <p>Advarsel: Vi har for tiden tekniske spanroblemer med enkelte tjenester. Vi har for tiden tekniske problemer med
        enkelte tjenester. Vi har for tiden tekniske problemer med enkelte tjenester
      </p>
    </div>

  </div>
</div>

<div class="banner banner--danger">
  <div class="container banner__content">
    <span class="banner__icon" aria-hidden="true">
      <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" version="1.1"
        xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 24 24" height="24"
        width="24">
        <g transform="matrix(1,0,0,1,0,0)">
          <path
            d="M 12,18.75c-0.207,0-0.375,0.168-0.375,0.375S11.793,19.5,12,19.5s0.375-0.168,0.375-0.375 S12.207,18.75,12,18.75L12,18.75 "
            stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M 12,15.75v-7.5 " stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round"
            stroke-linejoin="round"></path>
          <path
            d="M 13.621,1.76c-0.44-0.895-1.522-1.265-2.417-0.825 c-0.359,0.176-0.649,0.466-0.825,0.825L0.906,21.058c-0.371,0.754-0.06,1.665,0.694,2.036c0.209,0.103,0.439,0.156,0.672,0.156 h19.456c0.84,0.001,1.521-0.68,1.522-1.52c0-0.233-0.053-0.463-0.156-0.672L13.621,1.76z"
            stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </g>
      </svg>
    </span>
    <div class="banner__text">
      <p><strong>Fare:</strong> NVE har sendt ut flomvarsel som gjelder Nitelva og Leira</p>
    </div>
  </div>
</div>