There are no ACF fields assigned to this component.
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.block-pricing {
padding-top: clamp(40px, 8vw, 140px);
padding-bottom: clamp(40px, 8vw, 140px);
background-color: var(--grey-primary);
--text-color: var(--primary);
.heading {
padding-top: 2rem;
padding-bottom: 2rem;
text-align: center;
font-family: 'Montserrat' sans-serif;
font-size: clamp(24px, 3vw, 44px);
font-weight: 600;
color: var(--primary);
}
&__grid {
/* two column autoflow */
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1.5rem;
.pricing-table {
width: 100%;
@include bp($md) {
width: calc(50% - 0.75rem);
}
@include bp($lg) {
width: calc(33.3333% - 1.5rem);
}
}
}
&__cta {
padding-top: 4rem;
font-family: Montserrat;
font-size: clamp(18px, 2vw, 22px);
font-weight: 600;
text-align: center;
p, ul, ol, li, a {
font-size: clamp(18px, 2vw, 22px);
}
p:last-child {
margin-bottom: 0;
}
}
.button-wrapper {
text-align: center;
padding-top: 3rem;
padding-bottom: 3rem;
}
}
class Pricing {
block;
constructor(block) {
this.block = block;
this.init();
}
init() {
/* Swiper Example
this.swiperElem = this.block.querySelector('.swiper');
this.swiper = new Swiper(this.swiperElem, {
pagination: {
el: '.swiper-pagination',
clickable: true,
type: 'custom',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
});
*/
}
}
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.block-pricing').forEach((block) => {
new Pricing(block);
})
});
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "strategiq/pricing",
"title": "Pricing",
"description": "Example block to be used as a template",
"category": "strategiq",
"icon": "strategiq",
"acf": {
"mode": "preview",
"renderTemplate": "block-pricing.php"
},
"supports": {
"anchor": true,
"align": false,
"color": {
"background": false,
"text": false,
"gradients": false
},
"spacing": {
"padding": [
"top",
"bottom"
],
"margin": [
"top",
"bottom"
]
}
},
"example": {
"attributes": {
"mode": "preview",
"data": {
"heading_type": "h2",
"heading_text": "Example - Pricing",
"content": "This is some example content to represent what the content will look like"
}
}
},
"style": "file:../../assets/css/pricing/block-pricing.css"
}
This component is not currently used on any pages.
There are is no readme file with this component.