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

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

This article provides a sample HTML structure for a single member displayed in the Member Search Results page.

The example includes the most commonly used HTML elements, CSS classes, and layout structure generated by the standard Brilliant Directories website theme.

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

The following HTML snippet represents the default markup for a single member search result.

<!-- 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 -->

This code can be used as a reference when developing custom widgets, modifying search result layouts, or identifying specific HTML elements and CSS classes used by the standard member search results template.