Example "Ceremony" dialog. Use with vex and style_guide.

ceremony.html

<div class="vex-content hs-modal"><div class="list-created-modal hs-modal">

    <header>
        <h3>Congratulations</h3>
        <a data-href="#cancel" class="fancybox-close"></a>
    </header>


    <section class="hs-modal-success">
        <div class="complete-message-icon">
            <span class="lists pre-icon"></span>
            <span class="success pre-icon"></span>
        </div>

        <div class="complete-message">
            <h2>Static list created!</h2>
            <p>It might take a few minutes to build your list, especially if you have a lot of contacts. This list is static, so it won't grow or decrease in size unless you manually remove or add contacts.</p>
            <p><a href="/contacts/124/lists/44/">View list</a> or <a href="/contacts/124/lists/new">create another list</a></p>
        </div>
    </section>

    <section class="hs-modal-content">
        <strong>What Now?</strong>
        <p>Lists are the building blocks of your marketing. Go ahead and use your newly created list to:</p>

        <div class="icon-group">
        

            <div class="icon-text-block">
                <span class="twitter pre-icon"></span>
                <div>
                    <a href="/social/124/monitoring">Monitor on Social</a>
                    <p>Watch the contacts in this list as they interact on Twitter.</p>
                </div>
            </div>

        

        
        </div>


    </section>

    <footer>
        <button class="hs-button secondary" data-href="#cancel">Close</button>
        <label><input type="checkbox" class="dont-show">Don't show me this again</label>
    </footer>
</div>
<div class="vex-close"></div></div>