Varianter
Standard
<div class="pkt-messagebox pkt-messagebox--green">
<div class="pkt-messagebox__title">Messagebox green</div>
<div class="pkt-messagebox__text">
Skriv en informerende tekst om ønskelig tema her. Legg til knapper eller
bilder om du ønsker
<ul>
<li>Listeelement 1</li>
<li>Listeelement 2</li>
<li>Listeelement 3</li>
</ul>
</div>
</div>
<pkt-messagebox title="Messagebox green" skin="green">
Skriv en informerende tekst om ønskelig tema her. Legg til knapper eller
bilder om du ønsker
<ul>
<li>Listeelement 1</li>
<li>Listeelement 2</li>
<li>Listeelement 3</li>
</ul>
</pkt-messagebox>
<PktMessagebox title="Messagebox green" skin="green">
Skriv en informerende tekst om ønskelig tema her. Legg til knapper eller
bilder om du ønsker
<ul>
<li>Listeelement 1</li>
<li>Listeelement 2</li>
<li>Listeelement 3</li>
</ul>
</PktMessagebox>
Compact
<div class="pkt-messagebox pkt-messagebox--compact pkt-messagebox--green">
<div class="pkt-messagebox__title">Messagebox green compact</div>
<div class="pkt-messagebox__text">
Skriv en informerende tekst om ønskelig tema her. Legg til knapper eller
bilder om du ønsker
<ul>
<li>Listeelement 1</li>
<li>Listeelement 2</li>
<li>Listeelement 3</li>
</ul>
</div>
</div>
<pkt-messagebox title="Messagebox green" skin="green" compact>
Skriv en informerende tekst om ønskelig tema her. Legg til knapper eller
bilder om du ønsker
<ul>
<li>Listeelement 1</li>
<li>Listeelement 2</li>
<li>Listeelement 3</li>
</ul>
</pkt-messagebox>
<PktMessagebox title="Messagebox green" skin="green" compact>
Skriv en informerende tekst om ønskelig tema her. Legg til knapper eller
bilder om du ønsker
<ul>
<li>Listeelement 1</li>
<li>Listeelement 2</li>
<li>Listeelement 3</li>
</ul>
</PktMessagebox>
Close
<div class="pkt-messagebox pkt-messagebox--compact pkt-messagebox--green ">
<div class="pkt-messagebox__close">
<button
class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
type="button"
role="button"
tabindex="0"
aria-label="close"
>
<svg viewBox="0 0 32 32" class="pkt-btn__icon">
<use href="#close"></use>
</svg>
</button>
</div>
<div class="pkt-messagebox__title">Messagebox green</div>
<div class="pkt-messagebox__text">
Skriv en informerende tekst om ønskelig tema her. Legg til knapper eller
bilder om du ønsker
<ul>
<li>Listeelement 1</li>
<li>Listeelement 2</li>
<li>Listeelement 3</li>
</ul>
</div>
</div>
<pkt-messagebox title="Messagebox green" skin="green" compact closable="true">
Skriv en informerende tekst om ønskelig tema her. Legg til knapper eller
bilder om du ønsker
<ul>
<li>Listeelement 1</li>
<li>Listeelement 2</li>
<li>Listeelement 3</li>
</ul>
</pkt-messagebox>
<PktMessagebox title="Messagebox green" skin="green" compact closable>
Skriv en informerende tekst om ønskelig tema her. Legg til knapper eller
bilder om du ønsker
<ul>
<li>Listeelement 1</li>
<li>Listeelement 2</li>
<li>Listeelement 3</li>
</ul>
</PktMessagebox>
CSS oversikt
Block:
- .pkt-messagebox
Elements:
- .pkt-messagebox__title
- .pkt-messagebox__text
- .pkt-messagebox__close
Modifiers:
- .pkt-messagebox
--
beige (default) - .pkt-messagebox
--
red - .pkt-messagebox
--
green - .pkt-messagebox
--
blue
Props og slots
Props | Type | Validation | Default | Beskrivelse |
---|---|---|---|---|
skin | string | beige, greeen, red, blue | beige | |
title | string | |||
compact | boolean | false | ||
closable | boolean | false |
Slots | Type | Validation | Default | Beskrivelse |
---|---|---|---|---|
default | Tekstinnholdet i komponenten |