Pricing

A pricing section component with a heading, description, and a three-column grid for pricing cards. Use the x-fwb.pricing-card component inside the default slot.

Default Pricing Section

Starter

Best option for personal use & for your next project.

$29 /month
  • Individual configuration
  • No setup, or hidden fees
  • Team size: 1 developer
  • Premium support: 6 months
  • Free updates: 6 months
Get started

Company

Relevant for multiple users, extended & premium support.

$99 /month
  • Individual configuration
  • No setup, or hidden fees
  • Team size: 10 developers
  • Premium support: 24 months
  • Free updates: 24 months
Get started

Enterprise

Best for large scale uses and extended redistribution rights.

$499 /month
  • Individual configuration
  • No setup, or hidden fees
  • Team size: 100+ developers
  • Premium support: 36 months
  • Free updates: 36 months
Get started

Blade code

<x-fwb.blocks.marketing.pricing>
    <x-fwb.pricing-card
        title="Starter"
        description="Best option for personal use & for your next project."
        price="29"
        period="/month"
        button-text="Get started"
        button-href="#"
    >
        <x-fwb.pricing-card.feature>Individual configuration</x-fwb.pricing-card.feature>
        <x-fwb.pricing-card.feature>No setup, or hidden fees</x-fwb.pricing-card.feature>
        <x-fwb.pricing-card.feature>Team size: <span class="font-semibold">1 developer</span></x-fwb.pricing-card.feature>
        <x-fwb.pricing-card.feature>Premium support: <span class="font-semibold">6 months</span></x-fwb.pricing-card.feature>
        <x-fwb.pricing-card.feature>Free updates: <span class="font-semibold">6 months</span></x-fwb.pricing-card.feature>
    </x-fwb.pricing-card>

    <x-fwb.pricing-card
        title="Company"
        description="Relevant for multiple users, extended & premium support."
        price="99"
        period="/month"
        button-text="Get started"
        button-href="#"
    >
        <x-fwb.pricing-card.feature>Individual configuration</x-fwb.pricing-card.feature>
        <x-fwb.pricing-card.feature>No setup, or hidden fees</x-fwb.pricing-card.feature>
        <x-fwb.pricing-card.feature>Team size: <span class="font-semibold">10 developers</span></x-fwb.pricing-card.feature>
        <x-fwb.pricing-card.feature>Premium support: <span class="font-semibold">24 months</span></x-fwb.pricing-card.feature>
        <x-fwb.pricing-card.feature>Free updates: <span class="font-semibold">24 months</span></x-fwb.pricing-card.feature>
    </x-fwb.pricing-card>

    <x-fwb.pricing-card
        title="Enterprise"
        description="Best for large scale uses and extended redistribution rights."
        price="499"
        period="/month"
        button-text="Get started"
        button-href="#"
    >
        <x-fwb.pricing-card.feature>Individual configuration</x-fwb.pricing-card.feature>
        <x-fwb.pricing-card.feature>No setup, or hidden fees</x-fwb.pricing-card.feature>
        <x-fwb.pricing-card.feature>Team size: <span class="font-semibold">100+ developers</span></x-fwb.pricing-card.feature>
        <x-fwb.pricing-card.feature>Premium support: <span class="font-semibold">36 months</span></x-fwb.pricing-card.feature>
        <x-fwb.pricing-card.feature>Free updates: <span class="font-semibold">36 months</span></x-fwb.pricing-card.feature>
    </x-fwb.pricing-card>
</x-fwb.blocks.marketing.pricing>

Custom Title and Excluded Features

Simple, transparent pricing

Choose the perfect plan for your team. All plans include access to our full component library and priority support.

Starter

Best option for personal use & for your next project.

$29 /month
  • Individual configuration
  • No setup, or hidden fees
  • Team size: 1 developer
  • Premium support
  • Free updates
Get started

Company

Relevant for multiple users, extended & premium support.

$99 /month
  • Individual configuration
  • No setup, or hidden fees
  • Team size: 10 developers
  • Premium support: 24 months
  • Free updates
Get started

Enterprise

Best for large scale uses and extended redistribution rights.

$499 /month
  • Individual configuration
  • No setup, or hidden fees
  • Team size: 100+ developers
  • Premium support: 36 months
  • Free updates: 36 months
Get started

Blade code

<x-fwb.blocks.marketing.pricing
    title="Simple, transparent pricing"
    description="Choose the perfect plan for your team. All plans include access to our full component library and priority support."
>
    <x-fwb.pricing-card
        title="Starter"
        description="Best option for personal use & for your next project."
        price="29"
        period="/month"
        button-text="Get started"
        button-href="#"
    >
        <x-fwb.pricing-card.feature>Individual configuration</x-fwb.pricing-card.feature>
        <x-fwb.pricing-card.feature>No setup, or hidden fees</x-fwb.pricing-card.feature>
        <x-fwb.pricing-card.feature>Team size: <span class="font-semibold">1 developer</span></x-fwb.pricing-card.feature>
        <x-fwb.pricing-card.feature :included="false">Premium support</x-fwb.pricing-card.feature>
        <x-fwb.pricing-card.feature :included="false">Free updates</x-fwb.pricing-card.feature>
    </x-fwb.pricing-card>

    <x-fwb.pricing-card
        title="Company"
        description="Relevant for multiple users, extended & premium support."
        price="99"
        period="/month"
        button-text="Get started"
        button-href="#"
    >
        <x-fwb.pricing-card.feature>Individual configuration</x-fwb.pricing-card.feature>
        <x-fwb.pricing-card.feature>No setup, or hidden fees</x-fwb.pricing-card.feature>
        <x-fwb.pricing-card.feature>Team size: <span class="font-semibold">10 developers</span></x-fwb.pricing-card.feature>
        <x-fwb.pricing-card.feature>Premium support: <span class="font-semibold">24 months</span></x-fwb.pricing-card.feature>
        <x-fwb.pricing-card.feature :included="false">Free updates</x-fwb.pricing-card.feature>
    </x-fwb.pricing-card>

    <x-fwb.pricing-card
        title="Enterprise"
        description="Best for large scale uses and extended redistribution rights."
        price="499"
        period="/month"
        button-text="Get started"
        button-href="#"
    >
        <x-fwb.pricing-card.feature>Individual configuration</x-fwb.pricing-card.feature>
        <x-fwb.pricing-card.feature>No setup, or hidden fees</x-fwb.pricing-card.feature>
        <x-fwb.pricing-card.feature>Team size: <span class="font-semibold">100+ developers</span></x-fwb.pricing-card.feature>
        <x-fwb.pricing-card.feature>Premium support: <span class="font-semibold">36 months</span></x-fwb.pricing-card.feature>
        <x-fwb.pricing-card.feature>Free updates: <span class="font-semibold">36 months</span></x-fwb.pricing-card.feature>
    </x-fwb.pricing-card>
</x-fwb.blocks.marketing.pricing>

Component Properties

Pricing x-fwb.blocks.marketing.pricing

Prop Type Default Description
title string '' The section heading text. Hidden when empty.
description string '' The paragraph text below the heading. Hidden when empty.
slot slot - Default slot for pricing cards. Rendered inside a three-column grid. Use x-fwb.pricing-card components as children.