Price Component
Parameters:
- plans: array - Array of pricing plans (required)
Each plan should have:
- title: string - Plan title (e.g., 'Free', 'Pro')
- price: number - Plan price (e.g., 0, 15)
- period: string - Billing period (e.g., '/mo')
- features: array - List of features included in the plan
- button: object - Button configuration
- text: string - Button text (e.g., 'Sign up for free')
- variant: string - Button variant (e.g., 'primary', 'outline-primary')
- highlighted: boolean - Whether this is a highlighted/featured plan (optional)
- class: string - Additional CSS classes for the container (optional)
All available options for the Price component
ThemedComponent::make("content/price")
->addAttribute('value') //Add an attribute to the element. This is a string like 'data-foo="bar"' or multiple attributes in a single string like 'data-foo="bar" data-bar="baz"' (optional)
->addCss('value') //string - Add css styles to the element. This should be '<style> custom-class {...} </style>' (optional)
->addJavaScript('value') //string - Add a script to the element. This is a string like '<script>console.log('Hello World!')</script>' (optional)
->button('value') //object - Button configuration
->canSee('value') //bool - Whether the component should be visible or not (optional)
->class('value') //string - Additional CSS classes for the container (optional)
->features('value') //array - List of features included in the plan
->highlighted('value') //boolean - Whether this is a highlighted/featured plan (optional)
->id('value') //string - The id of the element. If no id is supplied, a random one will be generated (optional)
->period('value') //string - Billing period (e.g., '/mo')
->plans('value') //array - Array of pricing plans (required)
->price('value') //number - Plan price (e.g., 0, 15)
->text('value') //string - Button text (e.g., 'Sign up for free')
->title('value') //string - Plan title (e.g., 'Free', 'Pro')
->variant('value') //string - Button variant (e.g., 'primary', 'outline-primary')
->render();
A standard three-tier pricing plan layout with a highlighted enterprise option
// Basic pricing plans with three tiers
echo ThemedComponent::make('content/price')
->plans([
[
'title' => 'Free',
'price' => 0,
'period' => '/mo',
'features' => [
'10 users included',
'2 GB of storage',
'Email support',
'Help center access'
],
'button' => [
'text' => 'Sign up for free',
'variant' => 'outline-primary'
]
],
[
'title' => 'Pro',
'price' => 15,
'period' => '/mo',
'features' => [
'20 users included',
'10 GB of storage',
'Priority email support',
'Help center access'
],
'button' => [
'text' => 'Get started',
'variant' => 'primary'
]
],
[
'title' => 'Enterprise',
'price' => 29,
'period' => '/mo',
'features' => [
'30 users included',
'15 GB of storage',
'Phone and email support',
'Help center access'
],
'button' => [
'text' => 'Contact us',
'variant' => 'primary'
],
'highlighted' => true
]
])
->render();Customized pricing plans with yearly billing and different features
// Custom pricing plans with different features and pricing periods
echo ThemedComponent::make('content/price')
->plans([
[
'title' => 'Basic',
'price' => 99,
'period' => '/year',
'features' => [
'Single user',
'5 GB storage',
'Basic support',
'Community access'
],
'button' => [
'text' => 'Choose Basic',
'variant' => 'outline-primary'
]
],
[
'title' => 'Team',
'price' => 299,
'period' => '/year',
'features' => [
'Up to 10 users',
'50 GB storage',
'Priority support',
'Team collaboration'
],
'button' => [
'text' => 'Choose Team',
'variant' => 'primary'
],
'highlighted' => true
]
])
->class('mt-4')
->render();The Twig template file for the Price component
{# Price Component
Parameters:
- plans: array - Array of pricing plans (required)
Each plan should have:
- title: string - Plan title (e.g., 'Free', 'Pro')
- price: number - Plan price (e.g., 0, 15)
- period: string - Billing period (e.g., '/mo')
- features: array - List of features included in the plan
- button: object - Button configuration
- text: string - Button text (e.g., 'Sign up for free')
- variant: string - Button variant (e.g., 'primary', 'outline-primary')
- highlighted: boolean - Whether this is a highlighted/featured plan (optional)
- class: string - Additional CSS classes for the container (optional)
#}
{%- set containerClasses = [
'row',
'row-cols-1',
'row-cols-md-3',
'mb-3',
'text-center',
content.class
]|filter(v => v)|join(' ') -%}
<div class="{{ containerClasses }}">
{%- for plan in content.plans -%}
{%- set cardClasses = [
'card',
'mb-4',
'rounded-3',
'shadow-sm',
plan.highlighted ? 'border-primary'
]|filter(v => v)|join(' ') -%}
{%- set headerClasses = [
'card-header',
'py-3',
plan.highlighted ? 'text-bg-primary border-primary'
]|filter(v => v)|join(' ') -%}
<div class="col">
<div class="{{ cardClasses }}">
<div class="{{ headerClasses }}">
<h4 class="my-0 fw-normal">{{ plan.title }}</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">
${{ plan.price }}<small class="text-body-secondary fw-light">{{ plan.period }}</small>
</h1>
<ul class="list-unstyled mt-3 mb-4">
{%- for feature in plan.features -%}
<li>{{ feature }}</li>
{%- endfor -%}
</ul>
<button type="button" class="w-100 btn btn-lg btn-{{ plan.button.variant }}">
{{- plan.button.text -}}
</button>
</div>
</div>
</div>
{%- endfor -%}
</div>