Details lk-details
Komponent som kan åpnes og lukkes.

Komponenter

 depentant-attrs lk-anchor-group lk-badge lk-banner lk-bil lk-breadcrumbs lk-button lk-button-link lk-card lk-carousel lk-checkbox lk-checkbox-group lk-cloner lk-details lk-divider lk-dual-listbox lk-error-summary lk-file-uploader lk-filter lk-icon lk-input-block lk-modal lk-page-header lk-pagination lk-radio-group lk-search lk-select-block lk-spinner lk-tag lk-textarea-block lk-to-top Portalheader Portalsøk Seksjonsintro Side footer Skip-link Søkeresultater Tabeller Mindre brukte Aksjonsheader Aksjonsknapp Ansattsøkeresultater Arrangementsliste Artikkelliste Beskrivelsesliste Brukerinfo Coverbilde Fanenavigering Fremhevet artikkel Kalenderhendelser Knappevelger Kontaktseksjon Ledige stillinger lk-cloud-map lk-cover-image lk-feedback lk-figure lk-map lk-message Magasinsidetopp no-opener no-referral Overskrift med ikon Uthevet blokk Uthevet liste Eksperimentell lk-feedback-form lk-file-upload lk-iframe lk-suggestion Avviklet Alarmsignal Ankerlenker Badge Banner Brødsmuler Definere ikoner Ekstern lenke iframe Ikonliste Interaktive skjema elementer Knappegruppe Knapper lk-beep-test lk-details lk-flood-status lk-google-maps lk-google-maps-tile lk-help-text lk-rating lk-read-text lk-select-util lk-show-details lk-show-more lk-site-footer lk-site-header lk-tab-panel Melding Sidetopp Skjemaelementer Sosiale medier Tidslinje Varselboks
designsystemet

Details

Lorem ipsum dollar si amet Gå til Lillestrøm kommune

Navn Type Verdi
string
sm, md, lg
default, tinted
boolean (Attributet eller ikke)

Bruk

Vår details komponent er basert på digdir/designsystemet sin Details komponent.

Attributt Verdi Type
class lk-details string
data-color lk-green, lk-blue string
data-variant default, tinted string
data-size string
open boolean (attribtue exits)
defaultOpen boolean
name Grupperer sammen flere details sammen string

Eksempler

Trykk her for å åpne

Dukker opp når du details er åpen.

Vis kode 
<u-details class="lk-details">
    <u-summary>Trykk her for å åpne</u-summary>
    <p>Dukker opp når du details er åpen.</p>
</u-details>