Varianter
Standard
Messagebox green
Skriv en informerende tekst om ønskelig tema her. Legg til knapper eller bilder om du ønsker
- Listeelement 1
- Listeelement 2
- Listeelement 3
<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
Messagebox green
Skriv en informerende tekst om ønskelig tema her. Legg til knapper eller bilder om du ønsker
- Listeelement 1
- Listeelement 2
- Listeelement 3
<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
Messagebox green
Skriv en informerende tekst om ønskelig tema her. Legg til knapper eller bilder om du ønsker
- Listeelement 1
- Listeelement 2
- Listeelement 3
<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 |