Åpne/lukke-boks

Boks som kan åpnes og lukkes ved trykk.

Åpne/lukke-bokser

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

Om Fleetwood Lillestrøm kommune

Yo!
Det er jammen lite her.

Web og Portal

Yo!
Det er jammen lite her.

StencilJS

Yo!
Det er jammen lite her.

Open from begininng

Yo!
Det er jammen lite her.


Bakgrunn

Yo!
Det er jammen lite her.



Avfall og gjenvinning
Neste hente dato avfall:
Din addresse
Din Hentedato

22.01.2020

22.01.2020

Neste hente dato avfall:
Din addresse
Din Hentedato

22.01.2020

22.01.2020


Åpne/lukke bokser med nummer

  1. Om Fleetwood

    Yo!
    Det er jammen lite her.

  2. Lillestrøm kommune

    Yo!
    Det er jammen lite her.

  3. Web og Portal

    Yo!
    Det er jammen lite her.

  4. StencilJS

    Yo!
    Det er jammen lite her.

<lk-toggle>
  <span slot="title">Om Fleetwood </span>
  <input type="text">
  <button class="button button--primary">test</button>
</lk-toggle>

<lk-toggle>
  <span slot="title">Lillestrøm kommune</span>
  <p>Yo!<br>Det er jammen lite her.</p>
</lk-toggle>

<lk-toggle>
  <span slot="title">Web og Portal</span>
  <p>Yo!<br>Det er jammen lite her.</p>
</lk-toggle>

<lk-toggle>
  <span slot="title">StencilJS</span>
  <p>Yo!<br>Det er jammen lite her.</p>
</lk-toggle>

<lk-toggle opened>
  <span slot="title">Open from begininng</span>
  <p>Yo!<br>Det er jammen lite her.</p>
</lk-toggle>
<br>

<lk-toggle background="#F9E4C7">
  <span slot="title">Bakgrunn</span>
  <p>Yo!<br>Det er jammen lite her.</p>
</lk-toggle>

<br><br>

<!-- Example -->

<lk-toggle>
  <span slot="title">Avfall og gjenvinning</span>

  <div class="link-out margin-bottom--large">
    <h5 class="small-title">Her kan du: </h5>
    <ul>
      <li><a href="">Bestille ny ferie! </a></li>
      <li><a href="">Bestille andre ferie!</a></li>
    </ul>
  </div>

  <h5 class="small-title span-whole margin-y--large">Neste hente dato avfall:</h5>
  <div class="grid grid--no-gap">
    <h6
      class="padding-left--large padding-bottom--tiny padding--no-side-mobile  span-half  span-half-on-tablet span-half-on-mobile tiny-title">
      Din addresse</h6>
    <h6 class="padding-bottom--tiny span-half  span-half-on-tablet span-half-on-mobile tiny-title">Din Hentedato</h6>

    <lk-icon class="span-half padding-top--tiny   span-half-on-tablet span-half-on-mobile" name="real-state"
      text="Lillestrøm 18">
    </lk-icon>
    <p class="span-half padding-top--tiny  span-half-on-tablet span-half-on-mobile">22.01.2020</p>

    <lk-icon class="span-half padding-top--tiny   span-half-on-tablet span-half-on-mobile" name="real-state"
      text="Bekkestua 18"></lk-icon>
    <p class="span-half padding-top--tiny  span-half-on-tablet span-half-on-mobile">22.01.2020</p>
  </div>

  <h5 class="small-title span-whole margin-y--large">Neste hente dato avfall:</h5>
  <div class="grid grid--no-gap">
    <h6
      class="padding-left--large padding-bottom--tiny padding--no-side-mobile  span-half  span-half-on-tablet span-half-on-mobile tiny-title">
      Din addresse</h6>
    <h6 class="padding-bottom--tiny span-half  span-half-on-tablet span-half-on-mobile tiny-title">Din Hentedato</h6>

    <lk-icon class="span-half padding-top--tiny   span-half-on-tablet span-half-on-mobile" name="real-state"
      text="Lillestrøm 18">
    </lk-icon>
    <p class="span-half padding-top--tiny  span-half-on-tablet span-half-on-mobile">22.01.2020</p>

    <lk-icon class="span-half padding-top--tiny   span-half-on-tablet span-half-on-mobile" name="real-state"
      text="Bekkestua 18"></lk-icon>
    <p class="span-half padding-top--tiny  span-half-on-tablet span-half-on-mobile">22.01.2020</p>
  </div>

</lk-toggle>




<!-- <lk-toggle>
  <span slot="title">Avfall og gjenvinning</span>

  <div class="link-out margin-bottom--large">
    <h5 class="small-title">Her kan du: </h5>
    <ul>
      <li><a href="">Bestille ny ferie! </a></li>
      <li><a href="">Bestille andre ferie!</a></li>
    </ul>
  </div>

  <div class="grid">
    <h5 class="small-title span-whole">Neste hente dato avfall:</h5>
    <table class="span-whole">
      <thead class="span-whole margin-bottom--large">
        <tr class="span-whole margin-y--base">
          <th class="span-third tiny-title">
          </th>
          <th class="span-third tiny-title">
            Din Addresse
          </th>
          <th class="span-third tiny-tile">
            Din Hentedato
          </th>
        </tr>
      </thead>
      <tbody class="span-whole">
        <tr class="align-center">
          <td class="span-third">
            <lk-icon name="real-state"></lk-icon>
          </td>
          <td class="span-third">Lillestrøm 18</td>
          <td class="span-third">22.01.2020</td>
        </tr>
        <tr class="align-center align-center">
          <td class="span-third">
            <lk-icon name="real-state"></lk-icon>
          </td>
          <td class="span-third">Lillestrøm 18</td>
          <td class="span-third">22.01.2020</td>
        </tr>
      </tbody>
    </table>

    <h5 class="small-title span-whole">Neste hente dato avfall:</h5>
    <table class="span-whole">
      <thead class="span-whole">
        <tr class="span-whole">
          <th class="span-third tiny-title">
          </th>
          <th class="span-third tiny-title">
            Din Addresse
          </th>
          <th class="span-third tiny-tile">
            Din Hentedato
          </th>
        </tr>
      </thead>
      <tbody class="span-whole">
        <tr class="align-center">
          <td class="span-third">
            <lk-icon name="real-state"></lk-icon>
          </td>
          <td class="span-third">Lillestrøm 18</td>
          <td class="span-third">22.01.2020</td>
        </tr>
        <tr class="align-center align-center">
          <td class="span-third">
            <lk-icon name="real-state"></lk-icon>
          </td>
          <td class="span-third">Lillestrøm 18</td>
          <td class="span-third">22.01.2020</td>
        </tr>
      </tbody>
    </table>

  </div>
</lk-toggle> -->

<!-- End -->

<br>
<p class="paragraph--lead">Åpne/lukke bokser med nummer</p>

<ol class="lk-toggle-list">
  <li>
    <lk-toggle has-counter=true>
      <span slot="title">Om Fleetwood </span>
      <p>Yo!<br>Det er jammen lite her.</p>
    </lk-toggle>
  </li>

  <li>
    <lk-toggle has-counter=true>
      <span slot="title">Lillestrøm kommune</span>
      <p>Yo!<br>Det er jammen lite her.</p>
    </lk-toggle>
  </li>

  <li>
    <lk-toggle has-counter=true>
      <span slot="title">Web og Portal</span>
      <p>Yo!<br>Det er jammen lite her.</p>
    </lk-toggle>
  </li>

  <li>
    <lk-toggle has-counter=true>
      <span slot="title">StencilJS</span>
      <p>Yo!<br>Det er jammen lite her.</p>
    </lk-toggle>
  </li>
</ol>