Stack | Multipurpose HTML Template with Variant Page Builder
Sign up with Email

Already have an account? Login

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-headline element 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-text contains 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--cursor on 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>
Stack helps forward-thinking clients