@@ -21,5 +31,42 @@ import PricingCardEnterprise from '@shared/components/cards/PricingCardEnterpris
+
+
+ {
+ plans.map((plan) => (
+
+ {plan.label && (
+
+ {plan.label}
+
+ )}
+
{plan.title}
+
+
+ {plan.features.map((feature) => (
+ -
+
+ {feature}
+
+ ))}
+
+
+
+ ))
+ }
+
+
diff --git a/preview/pages/shape.astro b/preview/pages/shape.astro
new file mode 100644
index 000000000..cda315af2
--- /dev/null
+++ b/preview/pages/shape.astro
@@ -0,0 +1,162 @@
+---
+import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
+import Card from '@ui/Card.astro'
+import CardBody from '@ui/CardBody.astro'
+import CardTitle from '@ui/CardTitle.astro'
+import CardSubtitle from '@ui/CardSubtitle.astro'
+import DocsLink from '@ui/DocsLink.astro'
+import Icon from '@ui/Icon.astro'
+import { avatarSizes, extraColors } from '@shared/lib/tokens'
+
+const icons = ['devices', 'mailbox', 'palette', 'tools', 'brand-bootstrap', 'paint', 'rocket', 'shield-check']
+
+const radii = [
+ { label: 'Square', value: '0' },
+ { label: 'Default', value: undefined },
+ { label: 'Circle', value: '50%' },
+]
+
+const features = [
+ { icon: 'devices', title: 'Mobile-optimized', text: 'Every page works on any screen size, from a phone to a wide monitor.' },
+ { icon: 'mailbox', title: 'Tested email clients', text: 'Checked in more than 90 email clients and devices.' },
+ { icon: 'palette', title: 'Minimal design', text: 'Clean layouts based on Bootstrap and Material Design principles.' },
+]
+
+const featureList = [
+ { icon: 'tools', color: 'blue', title: 'Easy to customize', text: 'Change colors, fonts and spacing with Sass or CSS variables.' },
+ { icon: 'brand-bootstrap', color: 'purple', title: 'Built on Bootstrap', text: 'Every Bootstrap component works out of the box.' },
+ { icon: 'paint', color: 'green', title: 'Dark mode', text: 'One attribute switches the whole interface to a dark theme.' },
+]
+---
+
+
+
+
+
+
+
+
+ Sizes
+ Add .shape-{size}, from xxs to 2xl, the same sizes as an avatar.
+
+ {
+ avatarSizes.map((size) => (
+
+
+
+ ))
+ }
+
+
+
+
+
+
+
+
+ Colors
+ Add .shape-{color} to use another palette color.
+
+
+ {
+ extraColors.map((color) => (
+
+
+
+ ))
+ }
+
+
+
+
+
+
+
+
+ With icons
+ Put one .icon inside the shape; it is sized with the square.
+
+ {
+ icons.map((icon) => (
+
+
+
+ ))
+ }
+
+
+
+
+
+
+
+
+ Corner radius
+ Set --tblr-shape-border-radius to change the corners; the default is 35%.
+
+ {
+ radii.map((item) => (
+
+ ))
+ }
+
+
+
+
+
+
+ Feature list
+ A shape above each heading, with the same size and color on every item.
+
+ {
+ features.map((feature) => (
+
+
+
+
+
{feature.title}
+
{feature.text}
+
+ ))
+ }
+
+
+
+
+
+
+ Feature list, inline
+ A colored shape next to each heading, in a .row with an auto column.
+
+ {
+ featureList.map((feature) => (
+
+
+
+
+
+
+
+
+
{feature.title}
+
{feature.text}
+
+
+
+ ))
+ }
+
+
+
diff --git a/screenshots/pages/pricing.astro b/screenshots/pages/pricing.astro
new file mode 100644
index 000000000..f927b2c8c
--- /dev/null
+++ b/screenshots/pages/pricing.astro
@@ -0,0 +1,51 @@
+---
+// Pricing component: three plan cards joined into one table, the middle one
+// featured with a primary border and a "Popular" badge on its top edge. Same
+// plans as the docs page, so the picture matches the example.
+import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
+import Icon from '@ui/Icon.astro'
+
+const plans = [
+ { title: 'Free', price: '0', features: ['Up to 3 users', 'Basic components', 'Community support'], button: 'Get started', buttonClass: 'btn' },
+ { title: 'Premium', price: '49', featured: true, label: 'Popular', features: ['Up to 10 users', 'All components', 'Figma UI kit', 'Priority support'], button: 'Get started', buttonClass: 'btn btn-primary' },
+ { title: 'Enterprise', price: '99', features: ['Unlimited users', 'All components', 'Dedicated support'], button: 'Contact us', buttonClass: 'btn' },
+]
+---
+
+
+
+ {
+ plans.map((plan) => (
+
+ {plan.label && (
+
+ {plan.label}
+
+ )}
+
{plan.title}
+
+
+ {plan.features.map((feature) => (
+ -
+
+ {feature}
+
+ ))}
+
+
+
+ ))
+ }
+
diff --git a/screenshots/pages/shape.astro b/screenshots/pages/shape.astro
new file mode 100644
index 000000000..621508cd4
--- /dev/null
+++ b/screenshots/pages/shape.astro
@@ -0,0 +1,36 @@
+---
+// Shape component: a three-item feature list, each item with a colored shape
+// above its heading, the way the marketing pages use it. Three colors so the
+// tint and the icon color read as a pair; medium size so the icons are legible
+// at picture size.
+import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
+import Card from '@ui/Card.astro'
+import CardBody from '@ui/CardBody.astro'
+import Icon from '@ui/Icon.astro'
+
+const features = [
+ { icon: 'devices', color: 'blue', title: 'Mobile-optimized', text: 'Every page works on any screen size, from a phone to a wide monitor.' },
+ { icon: 'mailbox', color: 'purple', title: 'Tested email clients', text: 'Checked in more than 90 email clients and devices.' },
+ { icon: 'palette', color: 'green', title: 'Minimal design', text: 'Clean layouts based on Bootstrap and Material Design principles.' },
+]
+---
+
+
+
+
+
+ {
+ features.map((feature) => (
+
+
+
+
+
{feature.title}
+
{feature.text}
+
+ ))
+ }
+
diff --git a/shared/data/docs.json b/shared/data/docs.json
index c42bfaf71..4de1011c5 100644
--- a/shared/data/docs.json
+++ b/shared/data/docs.json
@@ -274,6 +274,10 @@
"title": "Popover",
"url": "/ui/components/popover"
},
+ {
+ "title": "Pricing",
+ "url": "/ui/components/pricing"
+ },
{
"title": "Progress bar",
"url": "/ui/components/progress"
@@ -290,6 +294,10 @@
"title": "Segmented control",
"url": "/ui/components/segmented-control"
},
+ {
+ "title": "Shape",
+ "url": "/ui/components/shape"
+ },
{
"title": "Signal",
"url": "/ui/components/signal"
diff --git a/shared/data/menu.json b/shared/data/menu.json
index 82ada0513..c81693429 100644
--- a/shared/data/menu.json
+++ b/shared/data/menu.json
@@ -236,6 +236,11 @@
"title": "Scroll spy",
"url": "scroll-spy.html"
},
+ "shape": {
+ "title": "Shape",
+ "url": "shape.html",
+ "badge": "New"
+ },
"signal": {
"title": "Signal",
"url": "signal.html"