Les tekst Les mer tekst.

Struktur

<lk-read-text>
  ...
</lk-read-text>

Attributter

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

Attributt Tillatte verdier Default Beskrivelse
calss string ""
button-text string "Les mer"
button-class string ""

Spalter

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

Slot= Beskrivelse
* Elementer uten slot= attributter blir plassert inni <div> over <button>

Eksempler

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

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam enim iste maiores odio cumque sint earum officiis accusantium sequi omnis doloremque qui, minus similique nobis quibusdam laudantium praesentium consequatur optio dicta explicabo incidunt non exercitationem officia? Itaque atque optio facilis!

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam enim iste maiores odio cumque sint earum officiis accusantium sequi omnis doloremque qui, minus similique nobis quibusdam laudantium praesentium consequatur optio dicta explicabo incidunt non exercitationem officia? Itaque atque optio facilis!



Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente quis dignissimos maxime, nobis, fuga dicta fugiat minima quam quidem est beatae voluptas placeat itaque atque ducimus, architecto eveniet necessitatibus eum eligendi autem minus? Tempore natus, temporibus provident eligendi ipsam nobis?



Bilde av sko
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt exercitationem voluptas ipsum eius necessitatibus praesentium commodi nam nemo possimus nesciunt vitae, sequi ea incidunt vero soluta, animi nihil est blanditiis fugiat provident ullam. Non deserunt odit, tempora doloremque id error.
Bilde av sko
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt exercitationem voluptas ipsum eius necessitatibus praesentium commodi nam nemo possimus nesciunt vitae, sequi ea incidunt vero soluta, animi nihil est blanditiis fugiat provident ullam. Non deserunt odit, tempora doloremque id error.


<lk-read-text>
    <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam enim iste maiores odio cumque sint earum
        officiis accusantium sequi omnis doloremque qui, minus similique nobis quibusdam laudantium praesentium
        consequatur optio dicta explicabo incidunt non exercitationem officia? Itaque atque optio facilis!
    </span>
</lk-read-text>

<br><br>

<lk-read-text>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam enim iste maiores odio
        cumque sint earum
        officiis accusantium sequi omnis doloremque qui, minus similique nobis quibusdam laudantium praesentium
        consequatur optio dicta explicabo incidunt non exercitationem officia? Itaque atque optio facilis!
    </p>
</lk-read-text>

<br><br>

<lk-read-text button-class="lead" button-text="Vis mer">
    <p class="lead">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente quis dignissimos maxime, nobis, fuga dicta
        fugiat minima quam quidem est beatae voluptas placeat itaque atque ducimus, architecto eveniet necessitatibus
        eum eligendi autem minus? Tempore natus, temporibus provident eligendi ipsam nobis?
    </p>
</lk-read-text>

<br><br>

<div class="grid">
    <figure class="single-figured span-half">
        <img class="single-figure__image"
            src="//images.ctfassets.net/poqt30la0zs4/1PB6r6kSnGCEIiawkWsEAq/549e864256c8fb586538b4eab2efd4f1/tidslinje_1.jpeg?w=1280"
            alt="Bilde av sko" />
        <lk-read-text button-class="single-figure__caption">
            <figcaption class="single-figure__caption">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
                exercitationem voluptas ipsum eius necessitatibus praesentium commodi nam nemo possimus nesciunt vitae,
                sequi ea incidunt vero soluta, animi nihil est blanditiis fugiat provident ullam. Non deserunt odit,
                tempora
                doloremque id error.
            </figcaption>
        </lk-read-text>
    </figure>

    <figure class="single-figured span-half">
        <img class="single-figure__image"
            src="//images.ctfassets.net/poqt30la0zs4/1PB6r6kSnGCEIiawkWsEAq/549e864256c8fb586538b4eab2efd4f1/tidslinje_1.jpeg?w=1280"
            alt="Bilde av sko" />
        <lk-read-text button-class="single-figure__caption">
            <figcaption class="single-figure__caption">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
                exercitationem voluptas ipsum eius necessitatibus praesentium commodi nam nemo possimus nesciunt vitae,
                sequi ea incidunt vero soluta, animi nihil est blanditiis fugiat provident ullam. Non deserunt odit,
                tempora
                doloremque id error.
            </figcaption>
        </lk-read-text>
    </figure>
</div>


<br><br>

Hvor finner jeg denne koden?