Content Blocks
Swiss Grid
Swiss grid pricing section with precision typography.
pricingswissgridprecision
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
title | string | PRI | Section title text (first part). |
title2 | string | CING | Section title text (second part). |
badgeText | string | International Style System | Badge text (can include newlines). |
tiers | Array<{letter: string, name: string, price: number}> | [] | Array of pricing tiers with letter, name, and price. |
backgroundColor | string | #F2F2F2 | Background color (hex, rgb, or hsl). |
containerBgColor | string | #ffffff | Container background color. |
containerBorderColor | string | #111111 | Container border color. |
containerShadowColor | string | #111111 | Container shadow color. |
titleColor | string | #111111 | Title text color. |
badgeBgColor | string | #FF4400 | Badge background color. |
badgeTextColor | string | #ffffff | Badge text color. |
tierBgColor | string | #ffffff | Tier background color. |
tierHoverBgColor | string | #FFD700 | Tier hover background color. |
tierBorderColor | string | #111111 | Tier border color. |
tierLetterColor | string | #111111 | Tier letter text color. |
tierNameColor | string | #111111 | Tier name text color. |
tierPriceColor | string | #111111 | Tier price text color. |
tierPriceLabelColor | string | #111111 | Tier price label text color. |
buttonBgColor | string | #000000 | Button background color. |
buttonTextColor | string | #ffffff | Button text color. |
buttonHoverBgColor | string | #ffffff | Button hover background color. |
buttonHoverTextColor | string | #000000 | Button hover text color. |
buttonBorderColor | string | #000000 | Button border color. |
buttonText | string | Select | Button text. |