Checklist
A checklist that lays out shipping steps and return conditions as ticked items. Helps buyers confirm eligibility before they start a refund request.
A checklist that lays out shipping steps and return conditions as ticked items. Helps buyers confirm eligibility before they start a refund request.
Search blocks by description or jump to a page.
Checklist renders a centered heading and subtitle above a two-column card grid. The left card covers shipping and the right card covers returns. Each card opens with a titled header that includes a small icon badge, then lists its items in a stacked row layout where every row shows a green or blue check circle, a bold label, and an optional detail line beneath it. A short support link sits below the grid in the center.
All copy is independent across both cards. You can rewrite every label and detail line, add or remove rows from either list, and swap the support link destination without affecting the card structure or the check row layout. The two cards are siblings in the same grid so either can be removed if you only need one section.
This block suits a dedicated policy page or a checkout confirmation screen where a customer needs to verify conditions before submitting a request. For a fintech or banking product it works well as an eligibility checklist, letting users scan required conditions at a glance before they proceed. It communicates more structure than the prose of the Full Text sibling and more detail than the icon summary in With Icons.
A natural flow around it on an Ecommerce page:
Before
After
Both cards share the same row structure so you can tune either section or both consistently:
Tip: keep both cards to the same number of rows so the grid stays visually balanced and neither column looks incomplete beside the other.