Lenke-knapp Lenker som er utformet som vanlige knapper.

Struktur

<lk-button-link>
  <a>

    (span)
      (img/)
    (/span)

    <span>
      <slot/>
    </span>

    (span)
      (img/)
    (/span)

  </a>
</lk-banner>

Attributter

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

Attributt Tillatte verdier Default Beskrivelse
url url:string "#" <a> sin href=
target string "" <a> sin target=
variant string "primary" Legger til "button--variant" i <a> sin class=
size string "normal" Legger til "button--size" i <a> sin class=
icon-after
icon-before
path:string "" <img> sine src
animation string "normal" Legger til "animation" i <a> sin class=

Spalter

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

Slot= Beskrivelse
* Elementer uten slot= attributter blir plassert inni <a> sin <span>

Eksempler

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

Jobb i Lillestrøm

Avbryt innsending

Gå til Vigilo

Gå til Vigilo

Knap lenk med animasjon


Jobb i Lillestrøm

Gå til Vigilo

<div class="container">
    <lk-button-link url="https://lillestrom.kommune.no" target="_blank" icon-after="/assets/images/arrow-right.png">
        Jobb i Lillestrøm
    </lk-button-link>

    <br><br>

    <lk-button-link url="https://skedsmo.kommune.no" target="_blank" variant="danger" size="large"
        icon-before="/assets/images/arrow-left.png">
        Avbryt innsending
    </lk-button-link>

    <br><br>

    <lk-button-link url="/" variant="ghost" size="xlarge">
        Gå til Vigilo
    </lk-button-link>

    <br><br>

    <lk-button-link url="/" variant="ghost-border" icon-after="/assets/images/icon-navigation-arrow-right.svg"
        size="medium">
        Gå til Vigilo
    </lk-button-link>


    <h4 class="section-title margin-top--huge">Knap lenk med animasjon</h4>
    <br>
    <lk-button-link url="https://lillestrom.kommune.no" target="_blank" icon-after="/assets/images/arrow-right.png"
        animation="animated-right">
        Jobb i Lillestrøm
    </lk-button-link>

    <br><br>
    <lk-button-link url="/" variant="ghost-border" icon-after="/assets/images/icon-navigation-arrow-right.svg"
        size="medium" animation="animated-right">
        Gå til Vigilo
    </lk-button-link>
    <br><br>
</div>

Hvor finner jeg denne koden?