Typed Headline
These modular elements can be readily used and customized across pages and in different blocks.
Explore all of Stack's modular elements
at the Element Index Page →
Typed Headline
A neat decorative text feature that simulates typing out a number of specified words housed in a data attribute.
This effect requires a parent .typed-headlineelement that houses two <span> elements. The first <span> represents the part of the headline that doesn't change, and the second <span> with class .typed-textcontains a the data attribute data-typed-strings. The data attribute should contain a list of strings to type separated by commas.
The typed text element can be modified with the following classes:
- .typed-text--cursoron the .typed-text element adds a simulated cursor to enhance the typing effect
<div class="typed-headline"> <span class="h4 inline-block">Static headline</span> <span class="h4 inline-block typed-text typed-text--cursor color--primary" data-typed-strings="words,or,sentences,to type"></span></div>