Gallery / Demo Components / Card / Slotted card / Product Pricing Card Gallery / / Product Pricing Card
Demo Components / Card / Slotted card /
Documentation
Variant

Product Pricing Card

Multi-slot showcase card with an illustrated header banner, detailed body copy, and CTA button in the footer slot.

Preview

{% slotted_card "Professional Plan" variant="elevated" %}
  {% slot "header" %}<div style='height: 100px; background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); display:flex; align-items:center; justify-content:center; color:white; font-size:18px; font-weight:700;'>$29 / mo</div>{% endslot %}
  {% slot "body" %}<p style='margin:0; color:#475569;'>Includes all enterprise components, full variant previews, and visual regression testing.</p>{% endslot %}
  {% slot "footer" %}<button type='button' style='width: 100%; padding: 8px; background: #4f46e5; color: white; border: none; border-radius: 4px; font-weight: 600; cursor: pointer;'>Subscribe Now</button>{% endslot %}
{% endslotted_card %}

Parameters

Name Type Required Default Choices Description
title str No — — Optional card title displayed above the body.
variant str Yes default default , elevated , outlined Visual variant of the card.
Sandbox
{% slotted_card "Welcome Card" variant="default" %}
  {% slot "body" %}This is a basic card body with clean layout.{% endslot %}
{% endslotted_card %}

<div class='slotted-card elevated'><div class='slotted-card__header'><div style='height: 100px; background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); display:flex; align-items:center; justify-content:center; color:white; font-size:18px; font-weight:700;'>$29 / mo</div></div><h3 class='slotted-card__title'>Professional Plan</h3><div class='slotted-card__body'><p style='margin:0; color:#475569;'>Includes all enterprise components, full variant previews, and visual regression testing.</p></div><div class='slotted-card__footer'><button type='button' style='width: 100%; padding: 8px; background: #4f46e5; color: white; border: none; border-radius: 4px; font-weight: 600; cursor: pointer;'>Subscribe Now</button></div></div>