Melding

Meldingskomponent til bruk ved kommunikasjon og beskjeder i Min side.

Ulest og lest melding

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, dolore numquam? Doloribus quam culpa fuga laudantium ut odit vitae maxime, non atque animi natus libero placeat qui fugit delectus quibusdam.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, dolore numquam? Doloribus quam culpa fuga laudantium ut odit vitae maxime, non atque animi natus libero placeat qui fugit delectus quibusdam.

<div class="message message--unread">
  <div class="message__content">
    <div class="message__content__icon">
      <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 26.544 26.544">
        <g transform="translate(13.272 13.272)">
          <path
            d="M23.58,20.211H11.723L4.985,25.2V20.211H1.617A1.752,1.752,0,0,1,0,18.46V1.617A1.752,1.752,0,0,1,1.617,0H23.58A1.752,1.752,0,0,1,25.2,1.617V18.46a1.752,1.752,0,0,1-1.617,1.752Z"
            transform="translate(-12.598 -12.598)" fill="none" stroke="currentColor" stroke-linecap="round"
            stroke-linejoin="round" stroke-width="1.347" />
        </g>
      </svg>
    </div>
    <div class="message__content__text">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, dolore numquam? Doloribus quam culpa fuga
        laudantium ut odit vitae maxime, non atque animi natus libero placeat qui fugit delectus quibusdam.
      </p>
    </div>
  </div>
  <div class="message__content">
    <div class="message__content__icon">
      <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 19.317 25.756">
        <g transform="translate(-140 -2762.661)">
          <path
            d="M124.275,9847.77a.567.567,0,0,0-.116-.174l-6.438-6.437a.55.55,0,0,0-.173-.115.534.534,0,0,0-.207-.043h-11.8a.537.537,0,0,0-.537.537v24.682a.537.537,0,0,0,.537.537H123.78a.537.537,0,0,0,.537-.537v-18.242A.537.537,0,0,0,124.275,9847.77Zm-6.4-4.937,4.607,4.607h-4.607Zm-11.8,22.852v-23.609H116.8v5.9a.537.537,0,0,0,.537.537h5.9v17.17Z"
            transform="translate(35 -7078.339)" fill="currentColor" />
          <text transform="translate(144 2781)" fill="currentColor" font-size="6" font-family="Inter-Regular, Inter"
            letter-spacing="0.02em">
            <tspan x="0" y="0">PDF</tspan>
          </text>
        </g>
      </svg>
    </div>
    <div class="message__content__text">
      <p>
        <a href="#">Hent bestillingsskjema</a>
      </p>
    </div>
  </div>
  <div class="message__content">
    <div class="message__content__icon">
      <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 26.371 26.371">
        <path data-name="Path 68"
          d="M745.35,3191.974a.44.44,0,0,0-.418-.3h-9.348l-2.979-9.363a.44.44,0,0,0-.838,0l-2.979,9.363H719.44a.44.44,0,0,0-.265.791l7.505,5.656-3.262,9.675a.44.44,0,0,0,.677.494l8.09-5.961,8.09,5.961a.44.44,0,0,0,.679-.49l-3.237-9.945,7.471-5.385A.441.441,0,0,0,745.35,3191.974Z"
          transform="translate(-719 -3182)" fill="currentColor" />
      </svg>
    </div>
    <div class="message__content__text">
      <p>
        <a href="#">Vis favoritt</a>
      </p>
    </div>
  </div>
</div>


<div class="message message--read">
  <div class="message__content">
    <div class="message__content__icon">
      <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 26.544 26.544">
        <g transform="translate(13.272 13.272)">
          <path
            d="M23.58,20.211H11.723L4.985,25.2V20.211H1.617A1.752,1.752,0,0,1,0,18.46V1.617A1.752,1.752,0,0,1,1.617,0H23.58A1.752,1.752,0,0,1,25.2,1.617V18.46a1.752,1.752,0,0,1-1.617,1.752Z"
            transform="translate(-12.598 -12.598)" fill="none" stroke="currentColor" stroke-linecap="round"
            stroke-linejoin="round" stroke-width="1.347" />
        </g>
      </svg>
    </div>
    <div class="message__content__text">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, dolore numquam? Doloribus quam culpa fuga
        laudantium ut odit vitae maxime, non atque animi natus libero placeat qui fugit delectus quibusdam.
      </p>
    </div>
  </div>
  <div class="message__content">
    <div class="message__content__icon">
      <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 19.317 25.756">
        <g transform="translate(-140 -2762.661)">
          <path
            d="M124.275,9847.77a.567.567,0,0,0-.116-.174l-6.438-6.437a.55.55,0,0,0-.173-.115.534.534,0,0,0-.207-.043h-11.8a.537.537,0,0,0-.537.537v24.682a.537.537,0,0,0,.537.537H123.78a.537.537,0,0,0,.537-.537v-18.242A.537.537,0,0,0,124.275,9847.77Zm-6.4-4.937,4.607,4.607h-4.607Zm-11.8,22.852v-23.609H116.8v5.9a.537.537,0,0,0,.537.537h5.9v17.17Z"
            transform="translate(35 -7078.339)" fill="currentColor" />
          <text transform="translate(144 2781)" fill="currentColor" font-size="6" font-family="Inter-Regular, Inter"
            letter-spacing="0.02em">
            <tspan x="0" y="0">PDF</tspan>
          </text>
        </g>
      </svg>
    </div>
    <div class="message__content__text">
      <p>
        <a href="#">Hent bestillingsskjema</a>
      </p>
    </div>
  </div>
  <div class="message__content">
    <div class="message__content__icon">
      <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 26.371 26.371">
        <path data-name="Path 68"
          d="M745.35,3191.974a.44.44,0,0,0-.418-.3h-9.348l-2.979-9.363a.44.44,0,0,0-.838,0l-2.979,9.363H719.44a.44.44,0,0,0-.265.791l7.505,5.656-3.262,9.675a.44.44,0,0,0,.677.494l8.09-5.961,8.09,5.961a.44.44,0,0,0,.679-.49l-3.237-9.945,7.471-5.385A.441.441,0,0,0,745.35,3191.974Z"
          transform="translate(-719 -3182)" fill="currentColor" />
      </svg>
    </div>
    <div class="message__content__text">
      <p>
        <a href="#">Vis favoritt</a>
      </p>
    </div>
  </div>
</div>