@fluid-topics/ftds-popover

The design system popover component

Install

npm install @fluid-topics/ftds-popover
yarn add @fluid-topics/ftds-popover

Usage

import {html} from "lit"
import "@fluid-topics/ftds-link"
import "@fluid-topics/ft-popover"

function render() {
    return html`
        <ftds-popover heading="Popover heading">
            Exemple popover content
            <ftds-link slot="link" href="" variant="body-2-medium" family="brand" underlined>Example popover link</ftds-link>
        </ftds-popover>
    `
}

function render() {
    return html`
        <ftds-popover>
            <ftds-popover-section slot="sections" heading="Popover section heading">
                Example popover section content
                <ftds-link slot="link">Example popover section link</ftds-link>
            </ftds-popover-section>
            <ftds-popover-section slot="sections">
                Other example popover section content
            </ftds-popover-section>
        </ftds-popover>
    `
}