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. 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?
<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>