Member Search Results Code - HTML Snippet of Member Search Result Code
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 -->
