Quick Info as a dialog with Definition Lists

This example showcases the use of the quick info panels as part of a dialog to showcase simple user/customer/subscriber information.

Jonathan Rahmer

username

jonathanrahemer@gmail.com

phone

(555) 555-5555

Language

English (US)

Birthdate

22/22/2222

System ID

123124124

External ID

123124124653452

Address

1060 W Addison St,

Chicago, IL 60613

Security Question

What is your quest?

Answer

To find the holy grail.

HTML

<inv-dialog dialog-title="'Quick Info'" dialog-type="content">
    <dialog-content>
        <div class="c-quickInfo">
            <div class="c-quickInfo-title">
                Jonathan Rahmer
            </div>
            <div class="c-quickInfo-panels">
                <div class="c-quickInfo-panel">
                    <div class="c-definitions">
                        <div class="c-definition">
                            <div class="c-definition-term">username</div>
                            <div class="c-definition-value">jonathanrahemer@gmail.com</div>
                        </div>
                        <div class="c-definition">
                            <div class="c-definition-term">email</div>
                            <div class="c-definition-value">jonathanrahemer@gmail.com</div>
                        </div>
                        <div class="c-definition">
                            <div class="c-definition-term">phone</div>
                            <div class="c-definition-value">(555) 555-5555</div>
                        </div>
                        <div class="c-definition">
                            <div class="c-definition-term">Language</div>
                            <div class="c-definition-value">English (US)</div>
                        </div>
                        <div class="c-definition">
                            <div class="c-definition-term">Birthdate</div>
                            <div class="c-definition-value">22/22/2222</div>
                        </div>
                        <div class="c-definition">
                            <div class="c-definition-term">System ID</div>
                            <div class="c-definition-value">123124124</div>
                        </div>
                        <div class="c-definition">
                            <div class="c-definition-term">External ID</div>
                            <div class="c-definition-value">123124124653452</div>
                        </div>
                        <div class="c-definition c-defintion--multiline">
                            <div class="c-definition-term">Address</div>
                            <div class="c-definition-value">1060 W Addison St,</div>
                            <div class="c-definition-value">Chicago, IL 60613</div>
                        </div>
                        <div class="c-button c-button--link">More</div>
                    </div>
                </div>
                <div class="c-quickInfo-panel">
                    <div class="c-definitions c-definitions--long">
                        <div class="c-definition">
                            <div class="c-definition-term">Security Question</div>
                            <div class="c-definition-value">What is your quest?</div>
                        </div>
                        <div class="c-definition">
                            <div class="c-definition-term">Answer</div>
                            <div class="c-definition-value">To find the holy grail.</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </dialog-content>
    <dialog-footer>
        <button class="c-button">Close</button>
    </dialog-footer>
</inv-dialog>