Typewriter

READ FIRST
The typewriter component is a fun little component that can be used to add some flair to your page. However, it's important to remember that it's not a good idea to use this component for large amounts of text. It's best to keep the typewriter content short and sweet.

Basics

I've tried to keep the typewriter component basic. The only true condition to using it is that you use either an ordered or unordered list. Also try to keep the typerwriter content on ther shorter side of things (maybe only a few words at most).

Copy
html
For the
<ap-typewriter>
    <ul>
        <li>Alliance</li>
        <li>Horde</li>
        <li>win</li>
        <li>love of Pete</li>
    </ul>
</ap-typewriter>
Expand

If you wish to change the cursor color, you can set the CSS custom property --ap-typewriter-cursor-color to any valid CSS color value. Fonts, colors, and other properties inherit as they normally would.

Copy
html
For the
<ap-typewriter style="--ap-typewriter-cursor-color: #f00">
    <ul>
        <li>Alliance</li>
        <li>Horde</li>
        <li>win</li>
        <li>love of Pete</li>
    </ul>
</ap-typewriter>
Expand