/
Pricing Card Block
Pricing Card Block
A card container for pricing plans. Add headings, paragraphs, lists, and buttons inside. Supports an optional floating badge, flex layout, background color or gradient, and full border/radius/shadow control.
PRICING CARDS
Starter
$9/mo
For personal projects and small sites.
5 pages- Basic blocks
- Email support
Pro
$29/mo
For growing businesses and teams.
Unlimited pages- All blocks
- Priority support
Enterprise
$99/mo
For large-scale projects and agencies.
- Everything in Pro
- Custom integrations
- Dedicated support
Pro card has a centered “Most Popular” badge. Each card is a Pricing Card Block with inner blocks.
When to use this block
- Pricing plan cards with feature lists and CTAs
- Highlighting a recommended plan with a floating badge
- Side-by-side comparison layouts inside a Grid or Flex container
- Any card container that benefits from badge, flex, and background controls
Badge
Add a floating badge label to highlight a plan. The badge is absolutely positioned at the top of the card and supports left, center, or right placement.
Badge
Sidebar Panel
Show Badge
Text
Position
Background
#171717
Text Color
#FFFFFF
Border Radius
px
Typography
BADGE POSITIONS
left: 24px
left: 50% + translateX(-50%)
right: 24px
All badges use position:absolute; top:-14px. Default style is pill-shaped (999px radius) with dark background.
Background & Flex Layout
Set a solid background color or CSS gradient. The card uses flex layout to arrange inner blocks — same controls as the Flex Block.
Background
Sidebar Panel
Color
Gradient
Flex Layout
Sidebar Panel
Direction
Wrap
Justify
Align
Gap
px
Flex direction, wrap, justify, align, and gap are all responsive across breakpoints. Gradient overrides solid color when both are set. Same flex system as the Flex Block.
Border, Radius & Shadow
Per-corner radius (responsive), per-side borders, and shadow presets. Uses the same GridItemBorderStyles system as Grid Item and other container blocks.
Border Radius
Per-corner objects, responsive across 3 breakpoints. Use large values like 24px for rounded cards.
Border & Shadow
Border width, color per side. Shadow presets: sm through 2xl, plus inner. Shadow takes priority over border when both are set.
Spacing
Padding (all 4 sides) controls inner breathing room. Margin (top/bottom) controls spacing between the card and surrounding content. Both are responsive.
Padding
Inner spacing in px. Controls how much room inner blocks (headings, lists, buttons) have from the card edges.
Margin
Top and bottom margin in px. Use to add vertical space between pricing cards in a vertical layout.
Responsive: Mobile Tablet Desktop
All Available Controls
Background Solid color or CSS gradient
backgroundColor: hex color. backgroundGradient: CSS gradient string (overrides solid color when set). Applied to the card container element.
Flex Layout Direction, wrap, justify, align, gap
flexDirection/flexWrap/justifyContent/alignItems/gap (+Md/Lg): all responsive. Same controls as the Flex Block. Default direction is column.
Badge Toggle, text, position, colors, radius, typography
showBadge: boolean toggle. badgeText: label string. badgePosition: "left" (24px), "center" (50% translateX), "right" (24px). badgeBgColor: default #171717. badgeTextColor: default #ffffff. badgeBorderRadius: default 999px (pill). badgeTypography: font size/weight/family overrides. Positioned absolute; top:-14px.
Border & Shadow Per-corner radius, border, shadow presets
Radius: borderRadiusMobile/Tablet/Desktop (per-corner objects). Border: borderMobile/Tablet/Desktop (per-side) + borderSides[]/Md/Lg. Shadow: sm–2xl, inner — wins over border when both set. Uses GridItemBorderStyles, the same helper as absolute-box-block.
Padding Inner spacing, 3 breakpoints
paddingTop/Bottom/Left/Right (+Md/Lg) in px. Applied to the card container. Controls inner breathing room for child blocks.
Margin Outer spacing, 3 breakpoints
marginTop/Bottom (+Md/Lg) in px. Controls vertical spacing between the card and surrounding elements.