Melding blokk

Melding blokk

Coverbilde

Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag.

Melding 2 med flere ikoner

Mottatt: 20.02.2020

hello

Her kommer innhold med forskjellige handlinger

Download
Melding so var lest

Mottatt: 20.02.2020

hello

Faktura med faktura ikon

Mottatt: 20.02.2020

Å betale
2390,-
Kontonummer
224.435.353.4234
KID nummer
530306043905694305999
Download
<lk-message>
    <div slot="header">
        Melding 2 med flere ikoner
        <p class="message__date">Mottatt: 20.02.2020</p>
    </div>
    <h2>hello</h2>
    <p>Her kommer innhold med forskjellige handlinger</p>
    <div slot="bodyicon">
        <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24" height="24" width="24">
            <g transform="matrix(1,0,0,1,0,0)">
                <path
                    d="M 5.25,8.925c2.485,0,4.5,2.015,4.5,4.5s-2.015,4.5-4.5,4.5s-4.5-2.015-4.5-4.5S2.765,8.925,5.25,8.925z "
                    stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                </path>
                <path d="M 0.75,7.424c0.887-0.667,1.912-1.128,3-1.349 " stroke="currentColor" fill="none"
                    stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M 23.25,7.424c-0.887-0.667-1.912-1.128-3-1.349 " stroke="currentColor" fill="none"
                    stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path
                    d="M 18.75,8.925 c2.485,0,4.5,2.015,4.5,4.5s-2.015,4.5-4.5,4.5s-4.5-2.015-4.5-4.5S16.265,8.925,18.75,8.925z "
                    stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                </path>
                <path d="M 9.75,13.425h4.5" stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round"
                    stroke-linejoin="round"></path>
            </g>
        </svg>
    </div>
    <div slot="footer"><a href="#">Download</a> </div>
    <div slot="footericon">
        <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" xmlns:svgjs="http://svgjs.com/svgjs" viewBox="0 0 24 24"
            height="24" width="24">
            <g transform="matrix(1,0,0,1,0,0)">
                <path d="M 12.001,3.75v12 " stroke="#000000" fill="none" stroke-width="1.5" stroke-linecap="round"
                    stroke-linejoin="round"></path>
                <path d="M 7.501,11.25l4.5,4.5l4.5-4.5 " stroke="#000000" fill="none" stroke-width="1.5"
                    stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M 23.251,15.75v1.5c0,1.657-1.343,3-3,3h-16.5 c-1.657,0-3-1.343-3-3v-1.5" stroke="#000000"
                    fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </g>
        </svg>
    </div>
</lk-message>

<lk-message read> 
    <div slot="header">Melding so var lest
      <p class="message__date">Mottatt: 20.02.2020</p> 
    </div>
    <h2>hello</h2>
</lk-message>

<lk-message type="faktura">
    <div slot="header">
        Faktura med faktura ikon
        <p class="message__date">Mottatt: 20.02.2020</p>
    </div>

    <dl class="message__faktura-details">
        <dd>Å betale</dd>
        <dt>2390,-</dt>
        <dd>Kontonummer</dd>
        <dt>224.435.353.4234</dt>
        <dd> KID nummer</dd>
        <dt>530306043905694305999</dt>
    </dl>
    <div slot="footer"><a href="#">Download</a></div>
    <div slot="footericon">
        <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" xmlns:svgjs="http://svgjs.com/svgjs" viewBox="0 0 24 24"
            height="24" width="24">
            <g transform="matrix(1,0,0,1,0,0)">
                <path d="M 12.001,3.75v12 " stroke="#000000" fill="none" stroke-width="1.5" stroke-linecap="round"
                    stroke-linejoin="round"></path>
                <path d="M 7.501,11.25l4.5,4.5l4.5-4.5 " stroke="#000000" fill="none" stroke-width="1.5"
                    stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M 23.251,15.75v1.5c0,1.657-1.343,3-3,3h-16.5 c-1.657,0-3-1.343-3-3v-1.5" stroke="#000000"
                    fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </g>
        </svg>
    </div>
</lk-message>