We're using cookies, but you can turn them off in Privacy Settings. If you use the site without changing settings, you are agreeing to our use of cookies. Learn more in our Privacy Policy.

Member Directory Search Patterns

Member Directory Terms and Conditions Modal

Example is not available on this page because it's an overlay that's only bypassed by accepting/rejecting. See code section for HTML.

HTML

<div id="terms-agreement-modal" class="cfa-modal md-modal" aria-hidden="true" role="dialog">
    <div class="cfa-modal-dialog">
        <div class="modal-content">
            <h5 id="modal-title" class="modal-title alt" tabindex="0">Member Directory Terms and Conditions</h5>
            <div class="modal-body">
                <p>I agree to the following Member Directory Terms and Conditions.</p>
                <p>Use this directory to verify and individual's CFA<sup>®</sup> charterholder status. Every effort has been made to keep the information on this website accurate and current, but it is provided with no warranty of any kind.</p>
                <p>Commercial use or sale of this membership directory information is strictly prohibited. Moreover, the extraction of information from this membership directory for the purpose of conducting marketing activities may violate the law. CFA Institute reserves all rights and remedies against any party for improper use of this membership directory.</p>
            </div>
            <div class="modal-footer">
                <button class="click-to-close agree">I agree</button>
                <button class="secondary click-to-close cancel">Cancel</button>
            </div>
        </div>
    </div>
</div>
            

Problem Being Solved

When a user lands on the Member Directory search page, they need to be shown the terms and conditions for using the Member Directory.

When to Use

Only use this modal for the Member Directory Search page. This a custom modal and will not work anywhere else at this time.

When Not to Use

Formatting

  • Please use all classes and IDs provided in the demo code.
  • We would recommend adding this HTML to the beginning or end of the page. It's positioned in the center of the page, fixed.

Member Directory Search Results

Member Directory results for:

  • "Jane"
  • "Other"

Your search found ### results.

Sort results by:
  • Jane Doe

    President and CEO

    CFA Institute

    Charlottesville, VA USA

    View Profile

  • Jane DoeCFA, CIPM

    Director of Marketing

    ABCD Institute

    Oslo, Norway

    View Profile

  • Jane Doe

    Oslo, Norway

    View Profile

  • Jane Doe

    President and CEO

    CFA Institute

    Charlottesville, VA USA

    View Profile

  • Jane DoeCFA, CIPM

    Director of Marketing

    ABCD Institute

    Oslo, Norway

    View Profile

  • Jane Doe

    Oslo, Norway

    View Profile

Page 1 of 10
Previous Next Go to page

HTML

<!-- Start full width section -->
<section class="full-width">
        <!-- Start MD results container -->
        <div class="md-results-container">     
                        <!-- Start MD results returned -->       
            <div class="md-results-returned">
                <p>
                    Member Directory results for:
                    <ul class="md-results-returned-list list-unstyled">
                        <li class="h2">"<span class="search-term">Jane</span>"</li>
                        <li class="h2">"<span class="search-term">Other</span>"</li>
                    </ul>
                </p>
                <p>Your search found <span class="md-results-returned-number">###</span> results.</p>
            </div>
            <!-- End MD results returned -->
            <!-- Start MD results sort -->
            <div class="md-results-sort">
                <fieldset class="md-results-sort-form">
                    <label class="control-label" for="results-sorter">Sort results by:</label>
                    <div id="results-sorter" class="form-group">
                        <select class="form-control">
                            <option value="First/Given Name">First/Given Name</option>
                            <option value="Last/Surname">Last/Surname</option>
                            <option value="City">City</option>
                            <option value="State/Province">State/Province</option>
                            <option value="Country/Region">Country/Region</option>
                        </select>
                    </div>
                </fieldset>                
            </div>
            <!-- End MD results sort -->
            <!-- Start MD results -->
            <ul class="md-results list-unstyled grid-layout">
                <li class="card-standalone">
                    <div class="person media">
                        <div class="media-body person-data">
                            <p class="h4 person-name">
                                <span class="author-first">Jane</span>
                                <span class="author-last">Doe</span>
                            </p>
                            <p class="person-position">President and CEO</p>
                            <p class="person-employment">CFA Institute</p>
                            <p class="person-address">Charlottesville, VA USA</p>
                            <p><a href="#">View Profile</a></p>
                        </div>
                    </div>
                </li>
                <li class="card-standalone">
                    <div class="person media">
                        <div class="media-body person-data">
                            <p class="h4 person-name">
                            </p>
                            <p class="h4 person-name">
                                <span class="author-first">Jane</span>
                                <span class="author-last">Doe</span><span class="author-credential">CFA, CIPM</span>
                            </p>
                            <p class="person-position">Director of Marketing</p>
                            <p class="person-employment">ABCD Institute</p>
                            <p class="person-address">Oslo, Norway</p>
                            <p><a href="#">View Profile</a></p>
                        </div>
                    </div>
                </li>
                <li class="card-standalone">
                    <div class="person media">
                        <div class="media-body person-data">
                            <p class="h4 person-name">
                                <span class="author-first">Jane</span>
                                <span class="author-last">Doe</span>
                            </p>
                            <p class="person-address">Oslo, Norway</p>
                            <p><a href="#">View Profile</a></p>
                        </div>
                    </div>
                </li>
                <li class="card-standalone">
                    <div class="person media">
                        <div class="media-body person-data">
                            <p class="h4 person-name">
                                <span class="author-first">Jane</span>
                                <span class="author-last">Doe</span>
                            </p>
                            <p class="person-position">President and CEO</p>
                            <p class="person-employment">CFA Institute</p>
                            <p class="person-address">Charlottesville, VA USA</p>
                            <p><a href="#">View Profile</a></p>
                        </div>
                    </div>
                </li>
                <li class="card-standalone">
                    <div class="person media">
                        <div class="media-body person-data">
                            <p class="h4 person-name">
                            </p>
                            <p class="h4 person-name">
                                <span class="author-first">Jane</span>
                                <span class="author-last">Doe</span><span class="author-credential">CFA, CIPM</span>
                            </p>
                            <p class="person-position">Director of Marketing</p>
                            <p class="person-employment">ABCD Institute</p>
                            <p class="person-address">Oslo, Norway</p>
                            <p><a href="#">View Profile</a></p>
                        </div>
                    </div>
                </li>
                <li class="card-standalone">
                    <div class="person media">
                        <div class="media-body person-data">
                            <p class="h4 person-name">
                                <span class="author-first">Jane</span>
                                <span class="author-last">Doe</span>
                            </p>
                            <p class="person-address">Oslo, Norway</p>
                            <p><a href="#">View Profile</a></p>
                        </div>
                    </div>
                </li>
            </ul>
            <!-- End MD results -->
            <!-- Start MD pagination -->
            <div class="md-pagination">
                <div class="cfa-pagination-short">
                    <div class="cfa-pagination-pages">Page <span class="active">1</span> of <span>10</span></div>
                    <span class="previous disabled"><a href="#">Previous</a></span>
                    <span class="next"><a href="#">Next</a></span>
                    <span class="go-to-page">Go to page <input /><button>Go</button></span>
                </div>
            </div>
            <!-- End MD pagination -->
        </div>
        <!-- End MD results container -->
    </section>
<!-- End full width section -->
            

Problem Being Solved

We need a pattern that displays member directory search results with a more readable, card-style layout.

When to Use

Currently, this should only be used for the Member Directory.

Formatting

  • If JS is diabled, the sort select box will not display.