showcar-ui/src/06-components/atoms/popover/docs/popover-right.html

Showcar-ui is the pattern library that is used to build the frontend of AutoScout24. It provides CSS classes, custom elements and components.

<div style='height:350px;'>
    <div class="sc-text-right">Some <a>link</a> that will trigger the popover</div>
    <div class="sc-popover sc-popover-right">
        <button class="sc-popover__close">
            <as24-icon type="close"></as24-icon>
        </button>
        <div class="sc-popover__content">
            <h3 class="sc-font-m sc-font-bold sc-margin-top-xs">The popover title</h3>
            <p class="sc-margin-top-l">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
                tempor invidunt ut labore et
                dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
            </p>
            <label class="sc-label">The input label</label>
            <input type="text" class="sc-input" placeholder="share your thoughts with us">
            <button class="sc-btn-bob sc-btn-block sc-margin-top-l">Button
                bob</button>

        </div>
    </div>
</div>