Card-like view of Account table data

Hello.

I am posting a Card-like view using Liquid Code.

To apply, copy the code and paste it into Design Studio.

If you want to change the table, please change the table settings in fetchxml.

- Image

- Sample Code

<div class="row sectionBlockLayout text-left" style="display: flex; flex-wrap: wrap; margin: 0px; min-height: 50px; padding: 8px;">
 <div class="container" style="display: flex; flex-wrap: wrap;">
 <div class="col-md-12 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 300px; padding: 16px; margin: 60px 0px;">
 {% assign onepage_disp_num = 6 %}
 {% assign prev_and_next_num = 2 %}
 <h3>Account List</h3>
 <div class="row">
 {% assign current_page = 1 %}
 {% if request.params.page.size > 0 %}
 {% assign current_page = request.params.page | round %}
 {% endif %}
 {% fetchxml get_items %}
 <fetch version="1.0" mapping="logical" count="{{ onepage_disp_num }}" page="{{ current_page }}" returntotalrecordcount="true">
 <entity name="account">
 <attribute name="name" />
 <attribute name="primarycontactid" />
 <attribute name="entityimage" />
 </entity>
 </fetch>
 {% endfetchxml %}
 {% for res in get_items.results.entities %}
 <div class="col-sm-6 col-md-4" style="text-align: center;">
 <div class="thumbnail">
 <div style="background-color: rgb(134, 142, 150);"><img src="{{ res.entityimage.url }}" alt="logoimage" style="max-width: 100%; height: 200px; width: auto;"></div>
 <div class="caption" style="white-space: nowrap;">
 <h3 style="overflow: hidden; text-overflow: ellipsis;">{{ res.name }}</h3>
 <p style="overflow: hidden; text-overflow: ellipsis;">{{ res.primarycontactid.name | default: "No Data" }}</p>
 <p><a href="#" role="button" class="btn btn-primary" style="overflow: hidden; text-overflow: ellipsis;">Button</a></p>
 </div>
 </div>
 </div>
 {% endfor %}
 </div> <!--/row-->
 {% if get_items.results.Total_Record_Count != 0 %}
 <div class="row" style="text-align: center;">
 {% assign last_page = get_items.results.Total_Record_Count | divided_by: onepage_disp_num %}
 {% assign last_page_disp_num = get_items.results.Total_Record_Count | modulo: onepage_disp_num %}
 {% if last_page_disp_num != 0 %}
 {% assign last_page = last_page | plus: 1 %}
 {% endif %}
 {% assign first_paging_num = current_page | minus: prev_and_next_num %}
 {% assign last_paging_num = current_page | plus: prev_and_next_num %}
 <nav>
 <ul class="pagination">
 {% if current_page != 1 %}
 <li>
 <a href="./?page={{ current_page | minus: 1 }}" aria-label="Previous">
 <span aria-hidden="true">«</span>
 </a>
 </li>
 {% endif %}
 {% for index in (first_paging_num..last_paging_num) %}
 {% if 0 < index %}
 {% if index <= last_page %}
 {% if index == current_page %}
 <li><span style="font-size: 1.2em;font-weight:bold;line-height: 1em;">{{ index }}</span></li>
 {% endif %}
 {% if index != current_page %}
 <li><a href="./?page={{ index }}">{{ index }}</a></li>
 {% endif %}
 {% endif %}
 {% endif %}
 {% endfor %}
 {% if current_page != last_page %}
 <li>
 <a href="./?page={{ current_page | plus: 1 }}" aria-label="Next">
 <span aria-hidden="true">»</span>
 </a>
 </li>
 {% endif %}
 </ul>
 </nav>
 </div> <!--/row-->
 {% endif %}
 {% if get_items.results.Total_Record_Count == 0 %}
 <div class="row" style="text-align: center;">
 <p>No Data.</p>
 </div> <!--/row-->
 {% endif %}
 </div>
 </div>
</div>

Thanks & Regards,

Naoya