Designsystem - Se mer

Struktur

<lk-show-details>
  ...
</lk-show-details>

Attributter

Merknader: må*, bør, husk, ekstra.

Attributt	Tillatte verdier	Default
background	string
open-text	string	"Se mer"
close-text	string	"Se mindre"
center-button	boolean	true
padding	boolean	true

Spalter

Spalter/slots brukes for dynamisk innhold/struktur inni komponenten. Ref. Stenciljs.com

Slot=	Beskrivelse
*	Elementer uten `slot=` attributter blir plassert inni en `<div>`
header
title
description
tag

Eksempler

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

Barnehage / SFO Betalling frist: 12/07/2019 2990,55-

Yo!
Det er jammen lite her.

Informasjon Betalling frist: 12/07/2019

Yo!
Det er jammen lite her.

Faktura / Kvittering Faktura frist: 12/07/2019 3001,-

Yo!
Det er jammen lite her.

<lk-show-details background="#F0F5FC">
    <span slot="title">Barnehage / SFO</span>
    <span slot="description">Betalling frist: 12/07/2019</span>
    <span slot="tag">2990,55-</span>
    <p>Yo!<br>Det er jammen lite her.</p>
    <p>Yo!<br>Det er jammen lite her.</p>
    <p>Yo!<br>Det er jammen lite her.</p>
</lk-show-details>

<lk-show-details background="#B4E5D0"  open-text="Les mer" close-text="Les mindre">
    <span slot="title">Informasjon</span>
    <span slot="description">Betalling frist: 12/07/2019</span>
    <p>Yo!<br>Det er jammen lite her.</p>
    <p>Yo!<br>Det er jammen lite her.</p>
    <p>Yo!<br>Det er jammen lite her.</p>
</lk-show-details>


<lk-show-details background="white" open-text="Se faktura" close-text="Ikke se faktura">
    <span slot="title">Faktura / Kvittering</span>
    <span slot="description">Faktura frist: 12/07/2019</span>
    <span slot="tag">3001,-</span>
    <p>Yo!<br>Det er jammen lite her.</p>
    <p>Yo!<br>Det er jammen lite her.</p>
    <p>Yo!<br>Det er jammen lite her.</p>
</lk-show-details>

Struktur

Attributter

Spalter

Eksempler

Hvor finner jeg denne koden?