Popovers

Work in Progress

The popover displays when a user clicks the UI element.

Examples

Default (More Actions)

Copied to clipboard
<div class="luci-popover">
    <button class="luci-button luci-button--icon-only luci-button--small luci-popover__button luci-button--with-icons">
        <span class="luci-button__inner">
            <svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
                <use xlink:href="/icons/luci.svg#more"> </use>
            </svg>
        </span>
    </button>
    <div class="luci-popover__content">
        <div class="luci-popover__body">
            <ul class="luci-popover__list">
                <li class="luci-popover__list-item">
                    <a href="#" class="luci-link"> Edit Details </a>
                </li>
                <li class="luci-popover__list-item">
                    <a href="#" class="luci-link"> View History </a>
                </li>
                <li class="luci-popover__list-item">
                    <a href="#" class="luci-link"> Decomission </a>
                </li>
                <li class="luci-popover__list-item">
                    <a href="#" class="luci-link"> Add Attachments </a>
                </li>
                <li class="luci-popover__list-item">
                    <span> Not a Link </span>
                </li>
            </ul>
        </div>
    </div>
</div>

Show/Hide Columns

Show/Hide Columns
Show/Hide Columns
With Scrolling Content
Copied to clipboard
<div class="luci-popover">
    <button class="luci-button luci-button--icon-only luci-button--small luci-popover__button luci-button--with-icons">
        <span class="luci-button__inner">
            <svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
                <use xlink:href="/icons/luci.svg#add"> </use>
            </svg>
        </span>
    </button>
    <div class="luci-popover__content luci-popover__content--wide">
        <div class="luci-popover__heading">Show/Hide Columns</div>
        <div class="luci-popover__body">
            <form class="luci-form" action="#" method="post">
                <div class="luci-form__field-group">
                    <span class="luci-form__checkbox">
                        <label for="checkbox39662" class="luci-checkbox__label">
                            <input type="checkbox" name="options" id="checkbox39662" value="on" checked>
                            <span class="luci-checkbox__button"></span>
                            <span class="luci-checkbox__label-text">Serial Number</span>
                        </label>
                    </span>
                    <span class="luci-form__checkbox">
                        <label for="checkbox50435" class="luci-checkbox__label">
                            <input type="checkbox" name="options" id="checkbox50435" value="on">
                            <span class="luci-checkbox__button"></span>
                            <span class="luci-checkbox__label-text">Cluster Serial Number</span>
                        </label>
                    </span>
                    <span class="luci-form__checkbox">
                        <label for="checkbox59316" class="luci-checkbox__label">
                            <input type="checkbox" name="options" id="checkbox59316" value="on">
                            <span class="luci-checkbox__button"></span>
                            <span class="luci-checkbox__label-text">Cluster Name</span>
                        </label>
                    </span>
                    <span class="luci-form__checkbox">
                        <label for="checkbox89727" class="luci-checkbox__label">
                            <input type="checkbox" name="options" id="checkbox89727" value="on">
                            <span class="luci-checkbox__button"></span>
                            <span class="luci-checkbox__label-text">Remote Cluster Serial Number</span>
                        </label>
                    </span>
                </div>
            </form>
        </div>
        <div class="luci-popover__action">
            <button class="luci-button luci-button--primary luci-button--small"> Submit </button>
        </div>
    </div>
</div>