Hover Card

Basics

The <ap-hover-card> has 3 parts to it, only 2 of which are technically required. It’s best for hiding small bits of content, though the content does scroll if it exceeds the height. This "hidden" content should probably be considered non-vital to the page.

Copy
html
<ap-hover-card>
    <!-- Optional; Anglepoint logo will be used if no image is provided -->
    <img
        slot="image"
        src="/assets/images/favicons/favicon.svg"
        alt="Favicon"
        width="41.154"
        height="41.154"
    />

    <!-- Required; Gotta have a subject/title -->
    <div slot="subject">Some Title Here</div>

    <!-- Required; Hidden text that gets revealed when hovered/clicked -->
    <p slot="hover-text">Some hidden text here</p>
</ap-hover-card>
Expand