Word Swipe

READ FIRST
The word swipe 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 swipe content short and sweet.

Basics

I've tried to keep the word swipe component basic. The only true condition to using it is that you use either an ordered or unordered list. I also recommend making sure the swipe content does not wrap (keep it to a few words) or you will get something weird.

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

However, as you can see, that doesn't look quite right. I've discovered that it works best in a flexbox like so:

Copy
html
<div style="display: flex">
    For the
    <ap-word-swipe>
        <ul>
            <li>Alliance</li>
            <li>Horde</li>
            <li>win</li>
            <li>love of Pete</li>
        </ul>
    </ap-word-swipe>
</div>
Expand

You may also find that you need to add overflow: hidden; and height: 1.2em; to the flexbox container styles/CSS.

Copy
html
<div style="display: flex; overflow: hidden; height: 1.2em">
    For the
    <ap-word-swipe>
        <ul>
            <li>Alliance</li>
            <li>Horde</li>
            <li>win</li>
            <li>love of Pete</li>
        </ul>
    </ap-word-swipe>
</div>
Expand