Tiered Pricing Cards

Tabela de preçosRequires Pro
The Tiered Pricing Cards pattern is a visually structured pricing layout designed to help users quickly compare subscription or service tiers.
Back to Library
jul 28, 2025 Created
jul 30, 2025 Updated
0 Times Used

Básico

Learn a skill

Mais

Advance your career
Recommended

Profissional

Build a Career

$15.99/mo

Billed annually or $11.99 billed monthly

$15.99/mo

Billed annually or $15.99 billed monthly

$24.99/mo

Billed anually or $24.99 billed monthly

Start learning something new with basic access

Build in-demand technical skills for work

Develop the skills and experience to land a job in tech

Pattern Code

<!-- wp:tableberg/table {"version":"0.5.4","rows":4,"cols":3,"cells":16,"colWidths":["","",""],"rowHeights":["","",""],"colStyles":{"0":{"borderRadius":{"topLeft":"4px","topRight":"4px","bottomRight":"4px","bottomLeft":"4px"}},"1":{"borderRadius":{"topLeft":"4px","topRight":"4px","bottomRight":"4px","bottomLeft":"4px"}},"2":{"borderRadius":{"topLeft":"4px","topRight":"4px","bottomRight":"4px","bottomLeft":"4px"}},".":{}},"rowStyles":{"3":{"height":"100px"}},"cellPadding":{"top":"9px","bottom":"9px","left":"var:preset|spacing|small","right":"var:preset|spacing|small"},"cellSpacing":{"top":"0","bottom":"0","left":"var:preset|spacing|small","right":"var:preset|spacing|small"},"tableBorderRadius":{"topLeft":"5px","topRight":"5px","bottomRight":"5px","bottomLeft":"5px"},"responsive":{"last":"stack","breakpoints":{"mobile":{"enabled":true,"headerAsCol":false,"maxWidth":700,"mode":"stack","direction":"col","stackCount":1}}},"innerBorderType":"col"} -->
<table class="wp-block-tableberg-table"><!-- wp:tableberg/cell {"responsiveTarget":"#tableberg-29468ce5-924d-4090-9444-e94b708837b0-0","background":"#fdf1e7","isHorizontal":true,"justifyContent":"space-between"} -->
<td class="wp-block-tableberg-cell"><!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
<p style="margin-top:0;margin-bottom:0"><strong>Básico</strong></p>
<!-- /wp:paragraph -->

<!-- wp:tableberg/ribbon {"type":"badge","text":"Learn a skill","individual":{"x":"55%","y":"23%","originX":"left","originY":"top","padding":{"right":"var:preset|spacing|small","left":"var:preset|spacing|small"},"borderRadius":{"topLeft":"20px","topRight":"20px","bottomLeft":"20px","bottomRight":"20px"}},"fontSize":"1.05rem","color":"#ffffff","background":"#cf9927"} /--></td>
<!-- /wp:tableberg/cell -->

<!-- wp:tableberg/cell {"col":1,"responsiveTarget":"#tableberg-29468ce5-924d-4090-9444-e94b708837b0-4","background":"#fefae7","isHorizontal":true,"justifyContent":"space-between"} -->
<td class="wp-block-tableberg-cell"><!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
<p style="margin-top:0;margin-bottom:0"><strong>Mais</strong></p>
<!-- /wp:paragraph -->

<!-- wp:tableberg/ribbon {"type":"badge","text":"Advance your career","individual":{"x":"30%","y":"23%","originX":"left","originY":"top","padding":{"right":"var:preset|spacing|small","left":"var:preset|spacing|small"},"borderRadius":{"topLeft":"21px","topRight":"21px","bottomLeft":"21px","bottomRight":"21px"}},"fontSize":"1.05rem","color":"#ffffff","background":"#cf9927"} /-->

<!-- wp:tableberg/ribbon {"type":"badge","text":"Recommended","individual":{"x":"-2px","y":"-29px","originX":"left","originY":"top","padding":{"top":"0px","right":"4px","bottom":"0px","left":"4px"},"borderRadius":{"topLeft":"4px","topRight":"4px","bottomLeft":"4px","bottomRight":"4px"}},"color":"#fff","background":"#1E1E26"} /-->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></td>
<!-- /wp:tableberg/cell -->

<!-- wp:tableberg/cell {"col":2,"responsiveTarget":"#tableberg-29468ce5-924d-4090-9444-e94b708837b0-8","background":"#fefae7","isHorizontal":true,"justifyContent":"space-between"} -->
<td class="wp-block-tableberg-cell"><!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
<p style="margin-top:0;margin-bottom:0"><strong>Profissional</strong></p>
<!-- /wp:paragraph -->

<!-- wp:tableberg/ribbon {"type":"badge","text":"Build a Career","individual":{"x":"48%","y":"23%","originX":"left","originY":"top","padding":{"right":"var:preset|spacing|small","left":"var:preset|spacing|small"},"borderRadius":{"topLeft":"21px","topRight":"21px","bottomLeft":"21px","bottomRight":"21px"}},"fontSize":"1.05rem","color":"#ffffff","background":"#cf9927"} /--></td>
<!-- /wp:tableberg/cell -->

<!-- wp:tableberg/cell {"row":1,"responsiveTarget":"#tableberg-29468ce5-924d-4090-9444-e94b708837b0-1"} -->
<td class="wp-block-tableberg-cell"><!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"top":"var:preset|spacing|medium","bottom":"0"}}},"fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--medium);padding-bottom:0"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-main-color"><strong>$15<sup>.99</sup></strong></mark><sub><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-border-dark-color">/mo</mark></sub></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","style":{"spacing":{"padding":{"top":"var:preset|spacing|medium","bottom":"0"}}},"fontSize":"x-small"} -->
<p class="has-text-align-center has-x-small-font-size" style="padding-top:var(--wp--preset--spacing--medium);padding-bottom:0">Billed annually or $11.99 billed monthly</p>
<!-- /wp:paragraph -->

<!-- wp:tableberg/html {"content":"\u003csvg fill=\u0022currentColor\u0022 role=\u0022img\u0022 aria-hidden=\u0022true\u0022 class=\u0022e1fenry92 gamut-92hs5m e3tf18d0\u0022 style=\u0022height: 0.1rem;\u0022\u003e\u003ctitle\u003eChecker Dense\u003c/title\u003e\u003cpattern id=\u0022CheckerDense-pattern-:R4qjlal6lailb9l6:\u0022 x=\u00220\u0022 y=\u00220\u0022 width=\u00224\u0022 height=\u00224\u0022 patternUnits=\u0022userSpaceOnUse\u0022\u003e\u003crect width=\u00221\u0022 height=\u00221\u0022 fill=\u0022currentColor\u0022\u003e\u003c/rect\u003e\u003crect x=\u00222\u0022 y=\u00222\u0022 width=\u00221\u0022 height=\u00221\u0022 fill=\u0022currentColor\u0022\u003e\u003c/rect\u003e\u003c/pattern\u003e\u003crect width=\u0022100%\u0022 height=\u0022100%\u0022 fill=\u0022url(#CheckerDense-pattern-:R4qjlal6lailb9l6:)\u0022\u003e\u003c/rect\u003e\u003c/svg\u003e"} /--></td>
<!-- /wp:tableberg/cell -->

<!-- wp:tableberg/cell {"row":1,"col":1,"responsiveTarget":"#tableberg-29468ce5-924d-4090-9444-e94b708837b0-5"} -->
<td class="wp-block-tableberg-cell"><!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"top":"var:preset|spacing|medium","bottom":"0"}}},"fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--medium);padding-bottom:0"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-main-color"><strong>$15<sup>.99</sup></strong></mark><sub><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-border-dark-color">/mo</mark></sub></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","style":{"spacing":{"padding":{"top":"var:preset|spacing|medium","bottom":"0"}}},"fontSize":"x-small"} -->
<p class="has-text-align-center has-x-small-font-size" style="padding-top:var(--wp--preset--spacing--medium);padding-bottom:0">Billed annually or $15.99 billed monthly</p>
<!-- /wp:paragraph -->

<!-- wp:tableberg/html {"content":"\u003csvg fill=\u0022currentColor\u0022 role=\u0022img\u0022 aria-hidden=\u0022true\u0022 class=\u0022e1fenry92 gamut-92hs5m e3tf18d0\u0022 style=\u0022height: 0.1rem;\u0022\u003e\u003ctitle\u003eChecker Dense\u003c/title\u003e\u003cpattern id=\u0022CheckerDense-pattern-:R4qjlal6lailb9l6:\u0022 x=\u00220\u0022 y=\u00220\u0022 width=\u00224\u0022 height=\u00224\u0022 patternUnits=\u0022userSpaceOnUse\u0022\u003e\u003crect width=\u00221\u0022 height=\u00221\u0022 fill=\u0022currentColor\u0022\u003e\u003c/rect\u003e\u003crect x=\u00222\u0022 y=\u00222\u0022 width=\u00221\u0022 height=\u00221\u0022 fill=\u0022currentColor\u0022\u003e\u003c/rect\u003e\u003c/pattern\u003e\u003crect width=\u0022100%\u0022 height=\u0022100%\u0022 fill=\u0022url(#CheckerDense-pattern-:R4qjlal6lailb9l6:)\u0022\u003e\u003c/rect\u003e\u003c/svg\u003e"} /--></td>
<!-- /wp:tableberg/cell -->

<!-- wp:tableberg/cell {"row":1,"col":2,"responsiveTarget":"#tableberg-29468ce5-924d-4090-9444-e94b708837b0-9"} -->
<td class="wp-block-tableberg-cell"><!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"top":"var:preset|spacing|medium","bottom":"0"}}},"fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--medium);padding-bottom:0"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-main-color"><strong>$24<sup>.99</sup></strong></mark><sub><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-border-dark-color">/mo</mark></sub></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","style":{"spacing":{"padding":{"top":"var:preset|spacing|medium","bottom":"0"}}},"fontSize":"x-small"} -->
<p class="has-text-align-center has-x-small-font-size" style="padding-top:var(--wp--preset--spacing--medium);padding-bottom:0">Billed anually or $24.99 billed monthly</p>
<!-- /wp:paragraph -->

<!-- wp:tableberg/html {"content":"\u003csvg fill=\u0022currentColor\u0022 role=\u0022img\u0022 aria-hidden=\u0022true\u0022 class=\u0022e1fenry92 gamut-92hs5m e3tf18d0\u0022 style=\u0022height: 0.1rem;\u0022\u003e\u003ctitle\u003eChecker Dense\u003c/title\u003e\u003cpattern id=\u0022CheckerDense-pattern-:R4qjlal6lailb9l6:\u0022 x=\u00220\u0022 y=\u00220\u0022 width=\u00224\u0022 height=\u00224\u0022 patternUnits=\u0022userSpaceOnUse\u0022\u003e\u003crect width=\u00221\u0022 height=\u00221\u0022 fill=\u0022currentColor\u0022\u003e\u003c/rect\u003e\u003crect x=\u00222\u0022 y=\u00222\u0022 width=\u00221\u0022 height=\u00221\u0022 fill=\u0022currentColor\u0022\u003e\u003c/rect\u003e\u003c/pattern\u003e\u003crect width=\u0022100%\u0022 height=\u0022100%\u0022 fill=\u0022url(#CheckerDense-pattern-:R4qjlal6lailb9l6:)\u0022\u003e\u003c/rect\u003e\u003c/svg\u003e"} /--></td>
<!-- /wp:tableberg/cell -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
<p style="margin-top:0;margin-bottom:0">Develop the skills and experience to land a job in tech</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
<p style="margin-top:0;margin-bottom:0">Develop the skills and experience to land a job in tech</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
<p style="margin-top:0;margin-bottom:0">Develop the skills and experience to land a job in tech</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
<p style="margin-top:0;margin-bottom:0">Develop the skills and experience to land a job in tech</p>
<!-- /wp:paragraph -->

<!-- wp:tableberg/cell {"row":2,"responsiveTarget":"#tableberg-29468ce5-924d-4090-9444-e94b708837b0-2"} -->
<td class="wp-block-tableberg-cell"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Start learning something new with basic access </p>
<!-- /wp:paragraph --></td>
<!-- /wp:tableberg/cell -->

<!-- wp:tableberg/cell {"row":2,"col":1,"responsiveTarget":"#tableberg-29468ce5-924d-4090-9444-e94b708837b0-6"} -->
<td class="wp-block-tableberg-cell"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Build in-demand technical skills for work</p>
<!-- /wp:paragraph --></td>
<!-- /wp:tableberg/cell -->

<!-- wp:tableberg/cell {"row":2,"col":2,"responsiveTarget":"#tableberg-29468ce5-924d-4090-9444-e94b708837b0-10"} -->
<td class="wp-block-tableberg-cell"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Develop the skills and experience to land a job in tech</p>
<!-- /wp:paragraph --></td>
<!-- /wp:tableberg/cell -->

<!-- wp:tableberg/cell {"row":3,"responsiveTarget":"#tableberg-29468ce5-924d-4090-9444-e94b708837b0-3"} -->
<td class="wp-block-tableberg-cell"><!-- wp:tableberg/button {"text":"Try Plus for free","align":"center"} /--></td>
<!-- /wp:tableberg/cell -->

<!-- wp:tableberg/cell {"row":3,"col":1,"responsiveTarget":"#tableberg-29468ce5-924d-4090-9444-e94b708837b0-7"} -->
<td class="wp-block-tableberg-cell"><!-- wp:tableberg/button {"text":"Try Plus for free","padding":{"top":"9px","bottom":"9px"},"textColor":"#fff","align":"center"} /--></td>
<!-- /wp:tableberg/cell -->

<!-- wp:tableberg/cell {"row":3,"col":2,"responsiveTarget":"#tableberg-29468ce5-924d-4090-9444-e94b708837b0-11"} -->
<td class="wp-block-tableberg-cell"><!-- wp:tableberg/button {"text":"Try Pro for free","padding":{"top":"9px","bottom":"9px"},"textColor":"#fff","align":"center"} /--></td>
<!-- /wp:tableberg/cell --></table>
<!-- /wp:tableberg/table -->

Usage Instructions

Simply copy the pattern and paste it your WordPress Editor.
🛒 Novo: Crie lindas tabelas de produtos do WooCommerce!
Esse é o texto padrão da barra de notificação