<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>