Hover Card

				
<HoverCard.Container slot="component">
    <HoverCard.Trigger>
        <a
        class="ImageTrigger"
        href="https://github.com/sidharth-anand"
        target="_blank"
        rel="noreferrer noopener"
        >
            <img
                class="Image normal"
                src="https://api.dicebear.com/5.x/adventurer/svg?seed=Cuddles"
                alt="TeilUI"
            />
        </a>
    </HoverCard.Trigger>
    <HoverCard.Content class="hovercard__content" >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
            <img
            class="Image large"
            src="https://api.dicebear.com/5.x/adventurer/svg?seed=Cuddles"
            alt="TeilUI"
            />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 15 }}>
                <div>
                    <div class="Text bold">Lorem</div>
                    <div class="Text faded">@imsup_do</div>
                </div>
                <div class="Text">
                    Components, icons, colors, and templates for building high-quality, accessible UI.
                    Free and open-source.
                </div>
                <div style={{ display: 'flex', gap: 15 }}>
                    <div style={{ display: 'flex', gap: 5 }}>
                    <div class="Text bold">0</div> <div class="Text faded">sit amet</div>
                    </div>
                    <div style={{ display: 'flex', gap: 5 }}>
                    <div class="Text bold">2,900</div> <div class="Text faded">consectetur adipiscing </div>
                    </div>
                </div>
            </div>
        </div>
        <HoverCard.Arrow class="HoverCardArrow" />
    </HoverCard.Content>
</HoverCard.Container>