FEATURES & SERVICES
Top List
This pattern presents a clean, modern, and highly readable ranked list layout suitable for any type of “Top X” content—tools, products, services, places, books, tips, apps, and more. Each list item features: A bold, colored number badge on the left A spacious, card-style description block on the right Soft borders, rounded corners, and subtle spacing for a polished look A centered title and subtitle at the top give context to the entire list. The minimalist, professional appearance makes this pattern ideal for comparison articles, affiliate posts, recommendation lists, curated collections, “editor’s picks,” or general overview content where ranked order matters.
Top Hosting & Domain Providers
Your guide to the best services for your website.
1
HostGator – Best WordPress Hosting
2
DreamHost – Low-cost WordPress Hosting
3
SiteGround – Performance-oriented WordPress Hosting
4
GoDaddy – Best Domain Registrar Company
5
Bluehost – WordPress Hosting with Free Domain Name
Pattern Markup
<!-- wp:group {"metadata":{"name":"Pattern - Top List"},"align":"full","style":{"color":{"background":"#f8fafc"},"spacing":{"padding":{"top":"8%","bottom":"8%"}},"border":{"radius":{"topLeft":"12px","topRight":"12px","bottomLeft":"12px","bottomRight":"12px"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-background" style="border-top-left-radius:12px;border-top-right-radius:12px;border-bottom-left-radius:12px;border-bottom-right-radius:12px;background-color:#f8fafc;padding-top:8%;padding-bottom:8%"><!-- wp:heading {"textAlign":"center","level":3,"align":"wide","style":{"color":{"text":"#0f172a"},"elements":{"link":{"color":{"text":"#0f172a"}}}},"fontFamily":"body"} -->
<h3 class="wp-block-heading alignwide has-text-align-center has-text-color has-link-color has-body-font-family" style="color:#0f172a"><strong>Top Hosting & Domain Providers</strong></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"top":"8px"}},"color":{"text":"#475569"},"elements":{"link":{"color":{"text":"#475569"}}}}} -->
<p class="has-text-align-center has-text-color has-link-color" style="color:#475569;margin-top:8px">Your guide to the best services for your website.</p>
<!-- /wp:paragraph -->
<!-- wp:spacer {"height":"10px"} -->
<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:group {"metadata":{"name":"Lists"},"style":{"spacing":{"blockGap":"16px"}},"layout":{"type":"constrained","contentSize":"80%"}} -->
<div class="wp-block-group"><!-- wp:group {"metadata":{"name":"List 1"},"style":{"color":{"background":"#079669"},"border":{"radius":{"topLeft":"10px","topRight":"10px","bottomLeft":"10px","bottomRight":"10px"},"color":"#e2e8f0","width":"1px"},"spacing":{"blockGap":"0","padding":{"top":"0px","bottom":"0px"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-border-color has-background" style="border-color:#e2e8f0;border-width:1px;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;background-color:#079669;padding-top:0px;padding-bottom:0px"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:0;padding-bottom:0"><!-- wp:columns {"style":{"spacing":{"padding":{"top":"0","bottom":"0"}}}} -->
<div class="wp-block-columns" style="padding-top:0;padding-bottom:0"><!-- wp:column {"verticalAlignment":"center","width":"5%","style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}},"typography":{"fontSize":"35px"},"spacing":{"padding":{"top":"0px","bottom":"0px","left":"0px","right":"0px"}}},"textColor":"base"} -->
<div class="wp-block-column is-vertically-aligned-center has-base-color has-text-color has-link-color" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;font-size:35px;flex-basis:5%"><!-- wp:paragraph {"align":"right","style":{"spacing":{"padding":{"left":"11px"}},"typography":{"fontSize":"28px","fontStyle":"normal","fontWeight":"700"}}} -->
<p class="has-text-align-right" style="padding-left:11px;font-size:28px;font-style:normal;font-weight:700">1</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"top","width":"95%","style":{"spacing":{"padding":{"top":"0","bottom":"0"}}}} -->
<div class="wp-block-column is-vertically-aligned-top" style="padding-top:0;padding-bottom:0;flex-basis:95%"><!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|x-small","bottom":"var:preset|spacing|x-small","left":"var:preset|spacing|10","right":"var:preset|spacing|10"}},"border":{"radius":{"topLeft":"0px","topRight":"9px","bottomLeft":"0px","bottomRight":"9px"}}},"backgroundColor":"base","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-base-background-color has-background" style="border-top-left-radius:0px;border-top-right-radius:9px;border-bottom-left-radius:0px;border-bottom-right-radius:9px;padding-top:var(--wp--preset--spacing--x-small);padding-right:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--10)"><!-- wp:paragraph {"style":{"spacing":{"padding":{"right":"var:preset|spacing|x-small","left":"var:preset|spacing|x-small"}}}} -->
<p style="padding-right:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--x-small)">HostGator - Best WordPress Hosting</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:group {"metadata":{"name":"List 2"},"style":{"color":{"background":"#079669"},"border":{"radius":{"topLeft":"10px","topRight":"10px","bottomLeft":"10px","bottomRight":"10px"},"color":"#e2e8f0","width":"1px"},"spacing":{"blockGap":"0","padding":{"top":"0px","bottom":"0px"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-border-color has-background" style="border-color:#e2e8f0;border-width:1px;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;background-color:#079669;padding-top:0px;padding-bottom:0px"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:0;padding-bottom:0"><!-- wp:columns {"style":{"spacing":{"padding":{"top":"0","bottom":"0"}}}} -->
<div class="wp-block-columns" style="padding-top:0;padding-bottom:0"><!-- wp:column {"verticalAlignment":"center","width":"5%","style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}},"typography":{"fontSize":"35px"},"spacing":{"padding":{"top":"0px","bottom":"0px","left":"0px","right":"0px"}}},"textColor":"base"} -->
<div class="wp-block-column is-vertically-aligned-center has-base-color has-text-color has-link-color" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;font-size:35px;flex-basis:5%"><!-- wp:paragraph {"align":"right","style":{"spacing":{"padding":{"left":"11px"}},"typography":{"fontSize":"28px","fontStyle":"normal","fontWeight":"700"}}} -->
<p class="has-text-align-right" style="padding-left:11px;font-size:28px;font-style:normal;font-weight:700">2</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"95%","style":{"spacing":{"padding":{"top":"0","bottom":"0"}}}} -->
<div class="wp-block-column" style="padding-top:0;padding-bottom:0;flex-basis:95%"><!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|x-small","bottom":"var:preset|spacing|x-small","left":"var:preset|spacing|10","right":"var:preset|spacing|10"}},"border":{"radius":{"topLeft":"0px","topRight":"9px","bottomLeft":"0px","bottomRight":"9px"}}},"backgroundColor":"base","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-base-background-color has-background" style="border-top-left-radius:0px;border-top-right-radius:9px;border-bottom-left-radius:0px;border-bottom-right-radius:9px;padding-top:var(--wp--preset--spacing--x-small);padding-right:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--10)"><!-- wp:paragraph {"style":{"spacing":{"padding":{"right":"var:preset|spacing|x-small","left":"var:preset|spacing|x-small"}}}} -->
<p style="padding-right:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--x-small)">DreamHost - Low-cost WordPress Hosting</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:group {"metadata":{"name":"List 3"},"style":{"color":{"background":"#079669"},"border":{"radius":{"topLeft":"10px","topRight":"10px","bottomLeft":"10px","bottomRight":"10px"},"color":"#e2e8f0","width":"1px"},"spacing":{"blockGap":"0","padding":{"top":"0px","bottom":"0px"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-border-color has-background" style="border-color:#e2e8f0;border-width:1px;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;background-color:#079669;padding-top:0px;padding-bottom:0px"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:0;padding-bottom:0"><!-- wp:columns {"style":{"spacing":{"padding":{"top":"0","bottom":"0"}}}} -->
<div class="wp-block-columns" style="padding-top:0;padding-bottom:0"><!-- wp:column {"verticalAlignment":"center","width":"5%","style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}},"typography":{"fontSize":"35px"},"spacing":{"padding":{"top":"0px","bottom":"0px","left":"0px","right":"0px"}}},"textColor":"base"} -->
<div class="wp-block-column is-vertically-aligned-center has-base-color has-text-color has-link-color" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;font-size:35px;flex-basis:5%"><!-- wp:paragraph {"align":"right","style":{"spacing":{"padding":{"left":"11px"}},"typography":{"fontSize":"28px","fontStyle":"normal","fontWeight":"700"}}} -->
<p class="has-text-align-right" style="padding-left:11px;font-size:28px;font-style:normal;font-weight:700">3</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"95%","style":{"spacing":{"padding":{"top":"0","bottom":"0"}}}} -->
<div class="wp-block-column" style="padding-top:0;padding-bottom:0;flex-basis:95%"><!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|x-small","bottom":"var:preset|spacing|x-small","left":"var:preset|spacing|10","right":"var:preset|spacing|10"}},"border":{"radius":{"topLeft":"0px","topRight":"9px","bottomLeft":"0px","bottomRight":"9px"}}},"backgroundColor":"base","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-base-background-color has-background" style="border-top-left-radius:0px;border-top-right-radius:9px;border-bottom-left-radius:0px;border-bottom-right-radius:9px;padding-top:var(--wp--preset--spacing--x-small);padding-right:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--10)"><!-- wp:paragraph {"style":{"spacing":{"padding":{"right":"var:preset|spacing|x-small","left":"var:preset|spacing|x-small"}}}} -->
<p style="padding-right:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--x-small)">SiteGround - Performance-oriented WordPress Hosting</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:group {"metadata":{"name":"List 4"},"style":{"color":{"background":"#079669"},"border":{"radius":{"topLeft":"10px","topRight":"10px","bottomLeft":"10px","bottomRight":"10px"},"color":"#e2e8f0","width":"1px"},"spacing":{"blockGap":"0","padding":{"top":"0px","bottom":"0px"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-border-color has-background" style="border-color:#e2e8f0;border-width:1px;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;background-color:#079669;padding-top:0px;padding-bottom:0px"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:0;padding-bottom:0"><!-- wp:columns {"style":{"spacing":{"padding":{"top":"0","bottom":"0"}}}} -->
<div class="wp-block-columns" style="padding-top:0;padding-bottom:0"><!-- wp:column {"verticalAlignment":"center","width":"5%","style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}},"typography":{"fontSize":"35px"},"spacing":{"padding":{"top":"0px","bottom":"0px","left":"0px","right":"0px"}}},"textColor":"base"} -->
<div class="wp-block-column is-vertically-aligned-center has-base-color has-text-color has-link-color" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;font-size:35px;flex-basis:5%"><!-- wp:paragraph {"align":"right","style":{"spacing":{"padding":{"left":"11px"}},"typography":{"fontSize":"28px","fontStyle":"normal","fontWeight":"700"}}} -->
<p class="has-text-align-right" style="padding-left:11px;font-size:28px;font-style:normal;font-weight:700">4</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"95%","style":{"spacing":{"padding":{"top":"0","bottom":"0"}}}} -->
<div class="wp-block-column" style="padding-top:0;padding-bottom:0;flex-basis:95%"><!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|x-small","bottom":"var:preset|spacing|x-small","left":"var:preset|spacing|10","right":"var:preset|spacing|10"}},"border":{"radius":{"topLeft":"0px","topRight":"9px","bottomLeft":"0px","bottomRight":"9px"}}},"backgroundColor":"base","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-base-background-color has-background" style="border-top-left-radius:0px;border-top-right-radius:9px;border-bottom-left-radius:0px;border-bottom-right-radius:9px;padding-top:var(--wp--preset--spacing--x-small);padding-right:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--10)"><!-- wp:paragraph {"style":{"spacing":{"padding":{"right":"var:preset|spacing|x-small","left":"var:preset|spacing|x-small"}}}} -->
<p style="padding-right:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--x-small)">GoDaddy - Best Domain Registrar Company</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:group {"metadata":{"name":"List 5"},"style":{"color":{"background":"#079669"},"border":{"radius":{"topLeft":"10px","topRight":"10px","bottomLeft":"10px","bottomRight":"10px"},"color":"#e2e8f0","width":"1px"},"spacing":{"blockGap":"0","padding":{"top":"0px","bottom":"0px"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-border-color has-background" style="border-color:#e2e8f0;border-width:1px;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;background-color:#079669;padding-top:0px;padding-bottom:0px"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:0;padding-bottom:0"><!-- wp:columns {"style":{"spacing":{"padding":{"top":"0","bottom":"0"}}}} -->
<div class="wp-block-columns" style="padding-top:0;padding-bottom:0"><!-- wp:column {"verticalAlignment":"center","width":"5%","style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}},"typography":{"fontSize":"35px"},"spacing":{"padding":{"top":"0px","bottom":"0px","left":"0px","right":"0px"}}},"textColor":"base"} -->
<div class="wp-block-column is-vertically-aligned-center has-base-color has-text-color has-link-color" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;font-size:35px;flex-basis:5%"><!-- wp:paragraph {"align":"right","style":{"spacing":{"padding":{"left":"11px"}},"typography":{"fontSize":"28px","fontStyle":"normal","fontWeight":"700"}}} -->
<p class="has-text-align-right" style="padding-left:11px;font-size:28px;font-style:normal;font-weight:700">5</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"95%","style":{"spacing":{"padding":{"top":"0","bottom":"0"}}}} -->
<div class="wp-block-column" style="padding-top:0;padding-bottom:0;flex-basis:95%"><!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|x-small","bottom":"var:preset|spacing|x-small","left":"var:preset|spacing|10","right":"var:preset|spacing|10"}},"border":{"radius":{"topLeft":"0px","topRight":"9px","bottomLeft":"0px","bottomRight":"9px"}}},"backgroundColor":"base","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-base-background-color has-background" style="border-top-left-radius:0px;border-top-right-radius:9px;border-bottom-left-radius:0px;border-bottom-right-radius:9px;padding-top:var(--wp--preset--spacing--x-small);padding-right:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--10)"><!-- wp:paragraph {"style":{"spacing":{"padding":{"right":"var:preset|spacing|x-small","left":"var:preset|spacing|x-small"}}}} -->
<p style="padding-right:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--x-small)">Bluehost - WordPress Hosting with Free Domain Name</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->How to Use This Pattern
Insert the Pattern
Add the pattern into your Gutenberg editor wherever you want to display a ranked or curated list.
Customize Title & Subtitle
Update these to reflect the topic of your list—e.g., Top Travel Destinations, Best Productivity Apps, Top 10 Marketing Tools, etc.
Edit Each Ranked Item
Replace the text with your chosen items.
Update the numbers to match your order.
Duplicate or delete list cards to adjust the total count.
Optional Enhancements
Add icons, small images, or brand logos inside each card.
Convert list items into links (e.g., affiliate links, product pages).
Adjust badge color or background styling to match your site’s design.
Make It Your Own
Use Gutenberg block controls to tweak spacing, borders, or typography. The layout remains flexible for any list format.
