Top Teaser

Standalone component.
A simple accordion with text it it. When it's closed, the component only shows a 'read more' button.
On opening, the text fades in, in a staggering motion.

Uses GSAP - Split Text (Disabled until fix for IE11 is done)

Top Teaser

Component status: WIP

Hos Magasin sælger vi et bredt sortiment af lækre og stilfulde skjorter til mænd. En herreskjorte har en masse anvendelsesmuligheder, og den er derfor et must i enhver mands garderobe. Skjorternes store alsidighed gør, at man kan bruge dem til både jeans, shorts, smoking og jakkesæt.

Læs mere Læs mindre

<div class="top-teaser">
	<input type="checkbox" id="top-teaser" aria-label="Read more">
	<div class="top-teaser__content w--md">
		<p>Hos Magasin sælger vi et bredt sortiment af lækre og stilfulde skjorter til mænd. En herreskjorte har en masse anvendelsesmuligheder, og den er derfor et must i enhver mands garderobe. Skjorternes store alsidighed gør, at man kan bruge dem til både jeans, shorts, smoking og jakkesæt.</p>
	</div>
	<label class="read-more-button" for="top-teaser">
		<span class="read-more-text">Læs mere</span>
		<span class="read-less-text">Læs mindre</span>
	</label>
</div>

Se mere

Developer notes

Content slot

Dump the text content inside the top-teaser__content.
The w-md sets the width of the component. See this as the standard width, and only remove or switch this if a specific design demands it.

<div class="top-teaser__content w--md">
        { content goes here }
</div>

Se mere

Developer notes

Content slot

[title]