Skip to content

Instantly share code, notes, and snippets.

@BiancaNL

BiancaNL/acf-gb-pricingtables.css

Last active February 13, 2023 14:19
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save BiancaNL/c9cc1e08f1cc4c84f93eadb92f061a64 to your computer and use it in GitHub Desktop.
Save BiancaNL/c9cc1e08f1cc4c84f93eadb92f061a64 to your computer and use it in GitHub Desktop.
Download ZIP
ACF Gutenberg Blocks Pricing Tables
Raw
acf-gb-pricingtables.css
.acf-pricing-table {
float: left;
padding: 2%;
box-sizing: border-box;
}
.acf-pricing-table:first-of-type:nth-last-of-type(2),
.acf-pricing-table:first-of-type:nth-last-of-type(2) ~ .acf-pricing-table {
width: 50%;
}
.acf-pricing-table:first-of-type:nth-last-of-type(3),
.acf-pricing-table:first-of-type:nth-last-of-type(3) ~ .acf-pricing-table {
width: 33%;
}
.acf-pricing-table:first-of-type:nth-last-of-type(4),
.acf-pricing-table:first-of-type:nth-last-of-type(4) ~ .acf-pricing-table {
width: 25%;
}
.acf-pricing-table-inner {
box-shadow: 0 8px 12px 0 rgba(100,130,155,0.1);
padding: 4%;
}
.acf-pricing-table-inner:hover {
box-shadow: 0 4px 6px 0 rgba(100,130,155,0.1);
}
.acf-pricing-table-title {
padding: 4%;
text-align: center;
font-size: 2em;
}
.acf-pricing-table-price {
padding: 3%;
text-align: center;
font-size: 3em;
}
.acf-pricing-table-features{
list-style-type: none;
margin: 0;
padding: 4% 0;
}
.acf-pricing-table-features li {
text-align: center;
line-height: 1.5;
}
.acf-pricing-table-cta {
text-align: center;
padding: 10% 0;
}
.cta-button {
border: 2px solid #000;
padding: 10px;
max-width: 70%;
font-weight: 700;
}
@media only screen and (max-width: 600px) {
.acf-pricing-table:first-of-type:nth-last-of-type(2),
.acf-pricing-table:first-of-type:nth-last-of-type(2) ~ .acf-pricing-table,
.acf-pricing-table:first-of-type:nth-last-of-type(3),
.acf-pricing-table:first-of-type:nth-last-of-type(3) ~ .acf-pricing-table,
.acf-pricing-table:first-of-type:nth-last-of-type(4),
.acf-pricing-table:first-of-type:nth-last-of-type(4) ~ .acf-pricing-table {
width: 100%;
}
}
Raw
acf-gb-pricingtables.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.acf-pricing-table {
float: left;
padding: 2%;
box-sizing: border-box;
}
.acf-pricing-table:first-of-type:nth-last-of-type(2),
.acf-pricing-table:first-of-type:nth-last-of-type(2) ~ .acf-pricing-table {
width: 50%;
}
.acf-pricing-table:first-of-type:nth-last-of-type(3),
.acf-pricing-table:first-of-type:nth-last-of-type(3) ~ .acf-pricing-table {
width: 33%;
}
.acf-pricing-table:first-of-type:nth-last-of-type(4),
.acf-pricing-table:first-of-type:nth-last-of-type(4) ~ .acf-pricing-table {
width: 25%;
}
.acf-pricing-table-inner {
box-shadow: 0 8px 12px 0 rgba(100,130,155,0.1);
padding: 4%;
}
.acf-pricing-table-inner:hover {
box-shadow: 0 4px 6px 0 rgba(100,130,155,0.1);
}
.acf-pricing-table-title {
padding: 4%;
text-align: center;
font-size: 2em;
}
.acf-pricing-table-price {
padding: 3%;
text-align: center;
font-size: 3em;
}
.acf-pricing-table-features{
list-style-type: none;
margin: 0;
padding: 4% 0;
}
.acf-pricing-table-features li {
text-align: center;
line-height: 1.5;
}
.acf-pricing-table-cta {
text-align: center;
padding: 10% 0;
}
.cta-button {
border: 2px solid #000;
padding: 10px;
max-width: 70%;
font-weight: 700;
}
@media only screen and (max-width: 600px) {
.acf-pricing-table:first-of-type:nth-last-of-type(2),
.acf-pricing-table:first-of-type:nth-last-of-type(2) ~ .acf-pricing-table,
.acf-pricing-table:first-of-type:nth-last-of-type(3),
.acf-pricing-table:first-of-type:nth-last-of-type(3) ~ .acf-pricing-table,
.acf-pricing-table:first-of-type:nth-last-of-type(4),
.acf-pricing-table:first-of-type:nth-last-of-type(4) ~ .acf-pricing-table {
width: 100%;
}
}
</style>
</head>
<body>
<div class="acf-pricing-table">
<div class="acf-pricing-table-inner">
<div class="acf-pricing-table-title">
Amazing title
</div>
<div class="acf-pricing-table-price">
$8.00
</div>
<ul class="acf-pricing-table-features">
<li>25GB Storage</li>
<li>25 Emails</li>
<li>25 Domains</li>
<li>2GB Bandwidth</li>
</ul>
<div class="acf-pricing-table-cta">
<a class="cta-button">Buy now</a>
</div>
</div>
</div>
<div class="acf-pricing-table">
<div class="acf-pricing-table-inner">
<div class="acf-pricing-table-title">
Amazing title
</div>
<div class="acf-pricing-table-price">
$8.00
</div>
<ul class="acf-pricing-table-features">
<li>25GB Storage</li>
<li>25 Emails</li>
<li>25 Domains</li>
<li>2GB Bandwidth</li>
</ul>
<div class="acf-pricing-table-cta">
<a class="cta-button">Buy now</a>
</div>
</div>
</div>
<div class="acf-pricing-table">
<div class="acf-pricing-table-inner">
<div class="acf-pricing-table-title">
Amazing title
</div>
<div class="acf-pricing-table-price">
$8.00
</div>
<ul class="acf-pricing-table-features">
<li>25GB Storage</li>
<li>25 Emails</li>
<li>25 Domains</li>
<li>2GB Bandwidth</li>
</ul>
<div class="acf-pricing-table-cta">
<a class="cta-button">Buy now</a>
</div>
</div>
</div>
<div class="acf-pricing-table">
<div class="acf-pricing-table-inner">
<div class="acf-pricing-table-title">
Amazing title
</div>
<div class="acf-pricing-table-price">
$8.00
</div>
<ul class="acf-pricing-table-features">
<li>25GB Storage</li>
<li>25 Emails</li>
<li>25 Domains</li>
<li>2GB Bandwidth</li>
</ul>
<div class="acf-pricing-table-cta">
<a class="cta-button">Buy now</a>
</div>
</div>
</div>
</body>
</html>
Raw
acf-gb-pricingtables.php
/**
* ACF Gutenberg pricing table
*
*/
if( function_exists('acf_register_block') ) {
$result = acf_register_block(array(
'name' => 'acf-pricing-tables',
'title' => __('Pricing Tables'),
'description' => __('A pricing table block called by ACF'),
'render_callback' => 'my_acf_pricing_table_html'
//'category' => '',
//'icon' => '',
//'keywords' => array(),
));
}
// Callback to render the ACF pricing tables
function my_acf_pricing_table_html() {
// vars
$title = get_field('acf-pricing-title');
$price = get_field('acf-pricing-price');
$feature = get_field('acf-pricing-feature');
$button = get_field('acf-pricing-button');
?>
<div class="acf-pricing-table">
<div class="acf-pricing-table-inner">
<div class="acf-pricing-table-title">
<?php echo $title; ?>
</div>
<div class="acf-pricing-table-price">
<?php echo $price; ?>
</div>
<div class="acf-pricing-table-features">
</div>
<div class="acf-pricing-table-cta">
<a class="cta-button"><?php echo $button; ?></a>
</div>
</div>
</div>
<?php
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment