FEATURES & SERVICES
Comparison Cards (3-Column)
The Comparison Cards pattern presents multiple providers side by side in a clean, card-based layout.
Bluehost
Starting Price
$2.95 per month
Storage Limit
Unmetered bandwidth, SSD Storage starts at 10GB
Standout Features
Free domain name & SSL for a year.
HostGator
Starting Price
$2.95 per month
Storage Limit
Unmetered bandwidth, SSD Storage starts at 10GB
Standout Features
Free domain name & SSL for a year.
Hostinger
Starting Price
$2.95 per month
Storage Limit
Unmetered bandwidth, SSD Storage starts at 10GB
Standout Features
Free domain name & SSL for a year.
Pattern Markup
<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide" style="padding-top:0;padding-bottom:0"><!-- wp:columns {"align":"wide","style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"var:preset|spacing|medium","right":"var:preset|spacing|medium"},"margin":{"top":"0","bottom":"0"},"blockGap":{"top":"0","left":"var:preset|spacing|x-small"}},"border":{"radius":"0px"}}} -->
<div class="wp-block-columns alignwide" style="border-radius:0px;margin-top:0;margin-bottom:0;padding-top:0;padding-right:var(--wp--preset--spacing--medium);padding-bottom:0;padding-left:var(--wp--preset--spacing--medium)"><!-- wp:column {"style":{"border":{"width":"0px","style":"none"},"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}}}} -->
<div class="wp-block-column" style="border-style:none;border-width:0px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:group {"style":{"border":{"radius":"12px","width":"0.01em"},"shadow":"var:preset|shadow|natural","spacing":{"padding":{"top":"var:preset|spacing|x-small","bottom":"var:preset|spacing|x-small","left":"var:preset|spacing|x-small","right":"var:preset|spacing|x-small"}}},"backgroundColor":"base","borderColor":"neutral","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-border-color has-neutral-border-color has-base-background-color has-background" style="border-width:0.01em;border-radius:12px;padding-top:var(--wp--preset--spacing--x-small);padding-right:var(--wp--preset--spacing--x-small);padding-bottom:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--x-small);box-shadow:var(--wp--preset--shadow--natural)"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontSize":"18px"}}} -->
<p style="font-size:18px"><strong>Bluehost</strong></p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":470,"width":"172px","height":"auto","sizeSlug":"full","linkDestination":"none","align":"center"} -->
<figure class="wp-block-image aligncenter size-full is-resized"><img src="https://wppatterns.com/wp-content/uploads/2025/12/BlueHost_Logo.png" alt="" class="wp-image-470" style="width:172px;height:auto"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
<!-- wp:separator {"className":"is-style-wide","style":{"spacing":{"margin":{"top":"32px","bottom":"32px"}}},"backgroundColor":"base"} -->
<hr class="wp-block-separator has-text-color has-base-color has-alpha-channel-opacity has-base-background-color has-background is-style-wide" style="margin-top:32px;margin-bottom:32px"/>
<!-- /wp:separator -->
<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontSize":"12px"},"color":{"text":"#5e5e5e"},"elements":{"link":{"color":{"text":"#5e5e5e"}}}}} -->
<p class="has-text-color has-link-color" style="color:#5e5e5e;font-size:12px">Starting Price</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"right"} -->
<p class="has-text-align-right"><strong>$2.95</strong> <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-contrast-2-color">per month</mark></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:separator {"className":"is-style-wide","style":{"spacing":{"margin":{"top":"32px","bottom":"32px"}}},"backgroundColor":"base"} -->
<hr class="wp-block-separator has-text-color has-base-color has-alpha-channel-opacity has-base-background-color has-background is-style-wide" style="margin-top:32px;margin-bottom:32px"/>
<!-- /wp:separator -->
<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontSize":"12px"},"color":{"text":"#5e5e5e"},"elements":{"link":{"color":{"text":"#5e5e5e"}}}}} -->
<p class="has-text-color has-link-color" style="color:#5e5e5e;font-size:12px">Storage Limit</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"right"} -->
<p class="has-text-align-right">Unmetered bandwidth, SSD Storage starts at 10GB</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:separator {"className":"is-style-wide","style":{"spacing":{"margin":{"top":"32px","bottom":"32px"}}},"backgroundColor":"base"} -->
<hr class="wp-block-separator has-text-color has-base-color has-alpha-channel-opacity has-base-background-color has-background is-style-wide" style="margin-top:32px;margin-bottom:32px"/>
<!-- /wp:separator -->
<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontSize":"12px"},"color":{"text":"#5e5e5e"},"elements":{"link":{"color":{"text":"#5e5e5e"}}}}} -->
<p class="has-text-color has-link-color" style="color:#5e5e5e;font-size:12px">Standout Features</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"right"} -->
<p class="has-text-align-right">Free domain name & SSL for a year.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:separator {"className":"is-style-wide","style":{"spacing":{"margin":{"top":"32px","bottom":"32px"}},"color":{"background":"#c6c6c6"}}} -->
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="margin-top:32px;margin-bottom:32px;background-color:#c6c6c6;color:#c6c6c6"/>
<!-- /wp:separator -->
<!-- wp:ub/button {"blockID":"20922b00-ae0d-4431-9784-5177c1b910ae","buttons":[{"buttonText":"Learn More ","url":"","size":"medium","buttonColor":"#313131","buttonHoverColor":"#00729f","buttonTextColor":"#ffffff","buttonTextHoverColor":"#ffffff","buttonRounded":true,"buttonRadius":10,"buttonRadiusUnit":"px","topLeftRadius":10,"topLeftRadiusUnit":"px","topRightRadius":10,"topRightRadiusUnit":"px","bottomLeftRadius":10,"bottomLeftRadiusUnit":"px","bottomRightRadius":10,"bottomRightRadiusUnit":"px","iconType":"preset","chosenIcon":"arrow-right","imageID":0,"imageURL":"","imageAlt":"","iconPosition":"right","iconSize":16,"iconUnit":"px","buttonIsTransparent":false,"addNofollow":false,"openInNewTab":true,"addSponsored":false,"buttonWidth":"fixed","animation":"fade","wipeDirection":"right","applyDefaultStyle":false,"borderRadius":{"topLeft":"8px","topRight":"8px","bottomLeft":"8px","bottomRight":"8px"},"width":{"all":"200px"},"fontSize":"17px"}],"padding":{"top":"var:preset|spacing|x-small","bottom":"var:preset|spacing|x-small","left":"var:preset|spacing|x-small","right":"var:preset|spacing|x-small"},"margin":{"top":"0","bottom":"0","left":"0","right":"0"},"isBorderComponentChanged":true,"isOldSizeRemoved":true} /--></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column {"style":{"border":{"width":"0px","style":"none"},"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}}}} -->
<div class="wp-block-column" style="border-style:none;border-width:0px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:group {"style":{"border":{"radius":"12px","width":"0.01em"},"shadow":"var:preset|shadow|natural","spacing":{"padding":{"top":"var:preset|spacing|x-small","bottom":"var:preset|spacing|x-small","left":"var:preset|spacing|x-small","right":"var:preset|spacing|x-small"}}},"backgroundColor":"base","borderColor":"neutral","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-border-color has-neutral-border-color has-base-background-color has-background" style="border-width:0.01em;border-radius:12px;padding-top:var(--wp--preset--spacing--x-small);padding-right:var(--wp--preset--spacing--x-small);padding-bottom:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--x-small);box-shadow:var(--wp--preset--shadow--natural)"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontSize":"18px"}}} -->
<p style="font-size:18px"><strong>HostGator</strong></p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":471,"sizeSlug":"full","linkDestination":"none","align":"center"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://wppatterns.com/wp-content/uploads/2025/12/HostGator-Logo-.png" alt="" class="wp-image-471"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
<!-- wp:separator {"className":"is-style-wide","style":{"spacing":{"margin":{"top":"32px","bottom":"32px"}}},"backgroundColor":"base"} -->
<hr class="wp-block-separator has-text-color has-base-color has-alpha-channel-opacity has-base-background-color has-background is-style-wide" style="margin-top:32px;margin-bottom:32px"/>
<!-- /wp:separator -->
<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontSize":"12px"},"color":{"text":"#5e5e5e"},"elements":{"link":{"color":{"text":"#5e5e5e"}}}}} -->
<p class="has-text-color has-link-color" style="color:#5e5e5e;font-size:12px">Starting Price</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"right"} -->
<p class="has-text-align-right"><strong>$2.95</strong> <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-contrast-2-color">per month</mark></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:separator {"className":"is-style-wide","style":{"spacing":{"margin":{"top":"32px","bottom":"32px"}}},"backgroundColor":"base"} -->
<hr class="wp-block-separator has-text-color has-base-color has-alpha-channel-opacity has-base-background-color has-background is-style-wide" style="margin-top:32px;margin-bottom:32px"/>
<!-- /wp:separator -->
<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontSize":"12px"},"color":{"text":"#5e5e5e"},"elements":{"link":{"color":{"text":"#5e5e5e"}}}}} -->
<p class="has-text-color has-link-color" style="color:#5e5e5e;font-size:12px">Storage Limit</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"right"} -->
<p class="has-text-align-right">Unmetered bandwidth, SSD Storage starts at 10GB</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:separator {"className":"is-style-wide","style":{"spacing":{"margin":{"top":"32px","bottom":"32px"}}},"backgroundColor":"base"} -->
<hr class="wp-block-separator has-text-color has-base-color has-alpha-channel-opacity has-base-background-color has-background is-style-wide" style="margin-top:32px;margin-bottom:32px"/>
<!-- /wp:separator -->
<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontSize":"12px"},"color":{"text":"#5e5e5e"},"elements":{"link":{"color":{"text":"#5e5e5e"}}}}} -->
<p class="has-text-color has-link-color" style="color:#5e5e5e;font-size:12px">Standout Features</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"right"} -->
<p class="has-text-align-right">Free domain name & SSL for a year.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:separator {"className":"is-style-wide","style":{"spacing":{"margin":{"top":"32px","bottom":"32px"}},"color":{"background":"#c6c6c6"}}} -->
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="margin-top:32px;margin-bottom:32px;background-color:#c6c6c6;color:#c6c6c6"/>
<!-- /wp:separator -->
<!-- wp:ub/button {"blockID":"26cbd8b6-9280-450b-bff4-a65bd5ed2520","buttons":[{"buttonText":"Learn More ","url":"","size":"medium","buttonColor":"#313131","buttonHoverColor":"#00729f","buttonTextColor":"#ffffff","buttonTextHoverColor":"#ffffff","buttonRounded":true,"buttonRadius":10,"buttonRadiusUnit":"px","topLeftRadius":10,"topLeftRadiusUnit":"px","topRightRadius":10,"topRightRadiusUnit":"px","bottomLeftRadius":10,"bottomLeftRadiusUnit":"px","bottomRightRadius":10,"bottomRightRadiusUnit":"px","iconType":"preset","chosenIcon":"arrow-right","imageID":0,"imageURL":"","imageAlt":"","iconPosition":"right","iconSize":16,"iconUnit":"px","buttonIsTransparent":false,"addNofollow":false,"openInNewTab":true,"addSponsored":false,"buttonWidth":"fixed","animation":"fade","wipeDirection":"right","applyDefaultStyle":false,"borderRadius":{"topLeft":"8px","topRight":"8px","bottomLeft":"8px","bottomRight":"8px"},"width":{"all":"200px"},"fontSize":"17px"}],"padding":{"top":"var:preset|spacing|x-small","bottom":"var:preset|spacing|x-small","left":"var:preset|spacing|x-small","right":"var:preset|spacing|x-small"},"margin":{"top":"0","bottom":"0","left":"0","right":"0"},"isBorderComponentChanged":true,"isOldSizeRemoved":true} /--></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column {"style":{"border":{"width":"0px","style":"none"},"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}}}} -->
<div class="wp-block-column" style="border-style:none;border-width:0px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|x-small","bottom":"var:preset|spacing|x-small","left":"var:preset|spacing|x-small","right":"var:preset|spacing|x-small"}},"border":{"radius":"12px","width":"0.01em"},"shadow":"var:preset|shadow|natural"},"backgroundColor":"base","borderColor":"neutral","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-border-color has-neutral-border-color has-base-background-color has-background" style="border-width:0.01em;border-radius:12px;padding-top:var(--wp--preset--spacing--x-small);padding-right:var(--wp--preset--spacing--x-small);padding-bottom:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--x-small);box-shadow:var(--wp--preset--shadow--natural)"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontSize":"18px"}}} -->
<p style="font-size:18px"><strong>Hostinger</strong></p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":472,"width":"115px","sizeSlug":"full","linkDestination":"none","align":"center"} -->
<figure class="wp-block-image aligncenter size-full is-resized"><img src="https://wppatterns.com/wp-content/uploads/2025/12/Hostinger-logo.png" alt="" class="wp-image-472" style="width:115px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
<!-- wp:separator {"className":"is-style-wide","style":{"spacing":{"margin":{"top":"32px","bottom":"32px"}}},"backgroundColor":"base"} -->
<hr class="wp-block-separator has-text-color has-base-color has-alpha-channel-opacity has-base-background-color has-background is-style-wide" style="margin-top:32px;margin-bottom:32px"/>
<!-- /wp:separator -->
<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontSize":"12px"},"color":{"text":"#5e5e5e"},"elements":{"link":{"color":{"text":"#5e5e5e"}}}}} -->
<p class="has-text-color has-link-color" style="color:#5e5e5e;font-size:12px">Starting Price</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"right"} -->
<p class="has-text-align-right"><strong>$2.95</strong> <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-contrast-2-color">per month</mark></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:separator {"className":"is-style-wide","style":{"spacing":{"margin":{"top":"32px","bottom":"32px"}}},"backgroundColor":"base"} -->
<hr class="wp-block-separator has-text-color has-base-color has-alpha-channel-opacity has-base-background-color has-background is-style-wide" style="margin-top:32px;margin-bottom:32px"/>
<!-- /wp:separator -->
<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontSize":"12px"},"color":{"text":"#5e5e5e"},"elements":{"link":{"color":{"text":"#5e5e5e"}}}}} -->
<p class="has-text-color has-link-color" style="color:#5e5e5e;font-size:12px">Storage Limit</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"right"} -->
<p class="has-text-align-right">Unmetered bandwidth, SSD Storage starts at 10GB</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:separator {"className":"is-style-wide","style":{"spacing":{"margin":{"top":"32px","bottom":"32px"}}},"backgroundColor":"base"} -->
<hr class="wp-block-separator has-text-color has-base-color has-alpha-channel-opacity has-base-background-color has-background is-style-wide" style="margin-top:32px;margin-bottom:32px"/>
<!-- /wp:separator -->
<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontSize":"12px"},"color":{"text":"#5e5e5e"},"elements":{"link":{"color":{"text":"#5e5e5e"}}}}} -->
<p class="has-text-color has-link-color" style="color:#5e5e5e;font-size:12px">Standout Features</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"right"} -->
<p class="has-text-align-right">Free domain name & SSL for a year.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:separator {"className":"is-style-wide","style":{"spacing":{"margin":{"top":"32px","bottom":"32px"}},"color":{"background":"#c6c6c6"}}} -->
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="margin-top:32px;margin-bottom:32px;background-color:#c6c6c6;color:#c6c6c6"/>
<!-- /wp:separator -->
<!-- wp:ub/button {"blockID":"0d75cfa2-dbb2-45bd-8ae7-761bf7513c3d","buttons":[{"buttonText":"Learn More ","url":"","size":"medium","buttonColor":"#313131","buttonHoverColor":"#00729f","buttonTextColor":"#ffffff","buttonTextHoverColor":"#ffffff","buttonRounded":true,"buttonRadius":10,"buttonRadiusUnit":"px","topLeftRadius":10,"topLeftRadiusUnit":"px","topRightRadius":10,"topRightRadiusUnit":"px","bottomLeftRadius":10,"bottomLeftRadiusUnit":"px","bottomRightRadius":10,"bottomRightRadiusUnit":"px","iconType":"preset","chosenIcon":"arrow-right","imageID":0,"imageURL":"","imageAlt":"","iconPosition":"right","iconSize":16,"iconUnit":"px","buttonIsTransparent":false,"addNofollow":false,"openInNewTab":true,"addSponsored":false,"buttonWidth":"fixed","animation":"fade","wipeDirection":"right","applyDefaultStyle":false,"borderRadius":{"topLeft":"8px","topRight":"8px","bottomLeft":"8px","bottomRight":"8px"},"width":{"all":"200px"},"fontSize":"17px"}],"padding":{"top":"var:preset|spacing|x-small","bottom":"var:preset|spacing|x-small","left":"var:preset|spacing|x-small","right":"var:preset|spacing|x-small"},"margin":{"top":"0","bottom":"0","left":"0","right":"0"},"isBorderComponentChanged":true,"isOldSizeRemoved":true} /--></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->How to Use This Pattern
1. Copy and paste the pattern into any post or page.
2. Replace provider names and logos with your own services or products.
3. Edit the Starting Price, Storage Limit, and Standout Features text to match each offering.
4. Update the button text and links to direct users to pricing pages, product details, or affiliate URLs.
5. Optionally highlight one card as a recommended option by adjusting background color, border style, or adding a badge.
6. Customize spacing, typography, and colors using block settings to match your site’s design.
