Pricing Card - Laravel Blade

Use the pricing card component to display pricing plans with a title, price, features list, and call-to-action button.

Default Pricing Card

Starter

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

Blade code

<x-fwb.pricing-card
    title="Starter"
    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>

With Description

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

Blade code

<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>

With Excluded Features

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

Blade code

<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: <span class="font-semibold">6 months</span></x-fwb.pricing-card.feature>
    <x-fwb.pricing-card.feature :included="false">Free updates: <span class="font-semibold">6 months</span></x-fwb.pricing-card.feature>
</x-fwb.pricing-card>

Custom Footer Slot

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

Blade code

<x-fwb.pricing-card
    title="Enterprise"
    description="Best for large scale uses and extended redistribution rights."
    price="499"
    period="/month"
>
    <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-slot:footer>
        <x-fwb.button color="light" class="w-full">Contact sales</x-fwb.button>
    </x-slot:footer>
</x-fwb.pricing-card>

Component Properties

Pricing Card x-fwb.pricing-card

Prop Type Default Description
title string '' The plan name displayed as a heading.
description string|null null Optional description text below the title.
price string '' The price value to display.
currency string $ Currency symbol displayed before the price.
period string|null null Billing period text (e.g. /month).
button-text string|null null Text for the CTA button. Omit to hide the default button.
button-href string|null null URL for the CTA button link.
button-color string blue Color variant for the CTA button (any x-fwb.button color).
footer slot - Named slot to override the default CTA button with custom content.

Feature x-fwb.pricing-card.feature

Prop Type Default Description
included bool true Whether the feature is included. When false, the text is shown with a strikethrough and an X icon.