Member Search Results Code - HTML Snippet of Member Search Result Code

 Link: https://support.brilliantdirectories.com/support/solutions/articles/12000096172

This is sample HTML code of the Member Search Result Code for a single member's data, including common classes and elements.

<!-- Start: Member Results Container -->
<div class="row-fluid member_results level_1 search_result clearfix">

    <!-- Start: Individual Grid Element for a Member -->
    <div class="grid_element">

        <!-- Start: Image Section of Member -->
        <div class="img_section col-xs-2 nopad">
            <!-- Link wrapping the member's image -->
            <a title="Sample Member 1 - Member" href="/california/los-angeles/top-level-category/sample-member-1">
                <!-- Member Image -->
                <img class="search_result_image img-rounded center-block" loading="auto" width="400" height="400" alt="Sample Member 1" src="/images/default-photo.webp">
            </a>
        </div>
        <!-- End: Image Section of Member -->

        <!-- Start: Mid Section with member's main details -->
        <div class="mid_section col-xs-10 col-sm-7 norpad">
            
            <!-- Placeholder for some data attributes (may be used by JavaScript) -->
            <span class="postItem" data-userid="1" data-datatype="10" data-dataid="10" data-postid="0"></span>

            <!-- Link wrapping the member's name and company name -->
            <a class="center-block" title="Sample Member 1" href="/california/los-angeles/top-level-category/sample-member-1">
                <!-- Displaying Member Full Name -->
                <span class="h3 bold inline-block nomargin member-search-full-name">Sample Member 1</span>
                <!-- Displaying Member Company Name (Hidden on XS screens) -->
                <span class="hidden-xs inline-block member-search-company">Sample Member Inc.</span>
            </a>

            <div class="clearfix fpad-sm nobpad"></div>

            <!-- Start: Member Rating Display -->
            <div class="bold member-search-reviews inline-block rmargin align-middle small">
                <div class="star_rating">
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <!-- Displaying Rating Value -->
                    <span class="small inline-block">Rated 5/5 (1 Review)</span>
                </div>
            </div>
            <!-- End: Member Rating Display -->

            <div class="clearfix fpad-sm nobpad"></div>

            <!-- Short Description about the Member -->
            <p class="small nomargin member-search-description">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            </p>

            <div class="clearfix fpad-sm nobpad"></div>

            <!-- Displaying Member Location with an icon -->
            <span class="member-search-location rmargin">
                <i class="fa fa-map-marker text-danger"></i>
                <small>Los Angeles, California, <span class="inline-block">90012</span>, <span class="inline-block">United States Of America</span></small>
            </span>
        </div>
        <!-- End: Mid Section with member's main details -->

        <!-- Start: Additional Information Section (Hidden on XS screens) -->
        <div class="info_section hidden-xs col-sm-3 norpad">
            <div class="module nomargin fpad text-center">
                <!-- Button to view member's listing -->
                <a class="btn btn-sm btn-success btn-block bold search_view_listing_button" href="/california/los-angeles/top-level-category/sample-member-1">View Listing</a>

                <div class="clearfix fpad-sm nobpad"></div>

                <!-- Button to send a message to the member -->
                <a class="btn btn-sm btn-primary btn-block bold search_contact_now_button" href="/california/los-angeles/top-level-category/sample-member-1/connect">Send Message</a>

                <div class="clearfix"></div>
                <div class="clearfix fpad-sm nobpad"></div>

                <!-- Button to view phone number -->
                <a href="#" class="btn btn-info btn-sm bold btn-block view_phone_number">
                    <i class="fa fa-phone fa-fw"></i> 
                    See Phone Number
                </a>

                <!-- Display Phone Number (Hidden by default) -->
                <span class="btn-default btn-sm bold text-center btn-block nomargin phone_number">
                    <i class="fa fa-phone fa-fw"></i> 
                    555-555-5555
                </span>
            </div>
        </div>
        <!-- End: Additional Information Section -->

    </div>
    <!-- End: Individual Grid Element for a Member -->

</div>
<!-- End: Member Results Container -->