Uilora
Uilora.
Uilora
Uilora.
Content Blocks
Playground

The Blueprint

Hand-drawn blueprint pricing section with sketch aesthetics.

pricingblueprintsketchhand-drawn

Props

Customize the component with these props

PropertyTypeDefaultDescription
title
stringRough EstimatesSection title text.
plans
Array<{name: string, price: number}>[]Array of pricing plans with name and price.
features
string[][]Array of feature strings to display.
backgroundColor
string#FFFDF5Background color (hex, rgb, or hsl).
patternColor
string#000000Grid pattern color.
underlineColor
string#facc15Title underline color.
shadowBgColor
string#e2e8f0Shadow background color.
shadowBorderColor
string#1e293bShadow border color.
cardBgColor
string#ffffffCard background color.
cardBorderColor
string#1e293bCard border color.
tapeBgColor
stringrgba(254, 240, 138, 0.8)Tape background color.
planNameColor
string#0f172aPlan name text color.
priceColor
string#0f172aPrice text color.
priceUnderlineColor
string#f87171Price underline color.
featureTextColor
string#0f172aFeature text color.
featureBulletColor
string#94a3b8Feature bullet color.
buttonBorderColor
string#1e293bButton border color.
buttonTextColor
string#0f172aButton text color.
buttonHoverBgColor
string#1e293bButton hover background color.
buttonHoverTextColor
string#ffffffButton hover text color.
buttonText
stringCircle ItButton text.
The Blueprint - Content Blocks Component | UILora