From 6c348b44a770a2456cd096925eeadf13d910daa1 Mon Sep 17 00:00:00 2001 From: codecalm Date: Tue, 6 Oct 2026 10:32:35 +0200 Subject: [PATCH] Add more Icon list examples and use it in demo pages - more cards on the demo page and sections in docs - license, pricing cards, trial-ended and user info use IconList --- docs/content/ui/components/icon-list.mdx | 57 ++++++ preview/pages/icon-lists.astro | 169 ++++++++++++++++++ preview/pages/license.astro | 28 +-- preview/pages/trial-ended.astro | 28 ++- shared/components/cards/PricingCard.astro | 25 ++- shared/components/cards/PricingPlan.astro | 33 ++-- shared/components/cards/UserInfo.astro | 47 +++-- .../marketing/sections/Pricing.astro | 56 ++---- .../marketing/sections/PricingBanner.astro | 22 +-- 9 files changed, 326 insertions(+), 139 deletions(-) diff --git a/docs/content/ui/components/icon-list.mdx b/docs/content/ui/components/icon-list.mdx index cada60b97..dc485ad03 100644 --- a/docs/content/ui/components/icon-list.mdx +++ b/docs/content/ui/components/icon-list.mdx @@ -99,6 +99,63 @@ When an entry wraps to more lines, the marker stays on the first line. The marke +## Pros and cons + +Put two lists side by side to compare: green checks on one side, red crosses on the other. + + +
+
+
    +
  • Fast to set up
    • +
  • No vendor lock-in
    • +
  • Great documentation
    • +
+
+
+
    +
  • No built-in auth
    • +
  • Smaller community
    • +
+
+
+ + +## Entries with a description + +An entry can hold more than one line: wrap the content in an element with a title and a muted description. The marker stays next to the title. Raise `--tblr-list-icon-row-gap` to give the entries more room. + + + + + +## Links + +The marker can describe the entry instead of ticking it off, for example in a list of contact details with links. + + + + + ## Custom look Set the `--tblr-list-icon-*` variables on the list to change the size of the markers and the gaps between the entries. diff --git a/preview/pages/icon-lists.astro b/preview/pages/icon-lists.astro index cb241c305..bc36a1260 100644 --- a/preview/pages/icon-lists.astro +++ b/preview/pages/icon-lists.astro @@ -17,6 +17,41 @@ const plans = [ { name: 'Pro', price: '$29', included: 4 }, ] +const overview = [ + ['Boxed', 'Combined', 'Condensed', 'Fluid', 'Horizontal', 'Vertical'], + ['Dark mode', 'RTL mode', 'Navbar sticky', 'Navbar overlap', 'Folded sidebar', 'Auto color mode'], +] + +const pros = ['Fast to set up', 'No vendor lock-in', 'Great documentation'] +const cons = ['No built-in auth', 'Smaller community'] + +const requirements = [ + { text: 'At least 8 characters', met: true }, + { text: 'One upper case letter', met: true }, + { text: 'One number', met: false }, + { text: 'One special character', met: false }, +] + +const changes = [ + { icon: 'plus', color: 'green', text: 'Added the icon list component' }, + { icon: 'arrow-up', color: 'blue', text: 'Faster rendering of large tables' }, + { icon: 'bug', color: 'red', text: 'Fixed the dropdown position in RTL mode' }, + { icon: 'trash', color: 'secondary', text: 'Removed the old inline list dots' }, +] + +const contact = [ + { icon: 'mail', text: 'hello@tabler.io', href: 'mailto:hello@tabler.io' }, + { icon: 'phone', text: '+1 (555) 123-4567', href: 'tel:+15551234567' }, + { icon: 'map-pin', text: '1 Market Street, San Francisco' }, + { icon: 'world', text: 'tabler.io', href: 'https://tabler.io' }, +] + +const details = [ + { title: 'Unlimited projects', text: 'Create as many projects as you need, with no extra charge.' }, + { title: 'Priority support', text: 'Your questions go to the top of the queue.' }, + { title: 'Custom domains', text: 'Serve every project from your own domain with a free certificate.' }, +] + const steps = [ { icon: 'circle-check', color: 'green', text: 'Account created' }, { icon: 'circle-check', color: 'green', text: 'Email confirmed' }, @@ -135,6 +170,140 @@ const steps = [ +
+ + + Pros and cons + Two lists side by side, green checks against red crosses. +
+
+ + {pros.map((text) => {text})} + +
+
+ + {cons.map((text) => {text})} + +
+
+ + +
+ +
+ + + Password requirements + A checklist under a form field, each rule marked as met or not. +
+ + +
+ + { + requirements.map((rule) => + rule.met ? ( + + {rule.text} + + ) : ( + + {rule.text} + + ), + ) + } + + + +
+ +
+ + + Release notes + An icon per kind of change: added, improved, fixed, removed. + + { + changes.map((change) => ( + + {change.text} + + )) + } + + + +
+ +
+ + + Contact details + Icons as markers for a list of links. + + {contact.map((row) => {row.href ? {row.text} : row.text})} + + + +
+ +
+ + + Entries with a description + A title and a muted second line in each entry; the marker stays on the title. + + { + details.map((row) => ( + +
+
{row.title}
+
{row.text}
+
+ + )) + } + + + +
+ +
+ + + Large text + Raise the font size and the marker size together for a landing page. + + {features.slice(0, 3).map((text) => {text})} + + + +
+ +
+ + + Feature overview + A long list split into columns, as on a comparison or a landing page. +
+ { + overview.map((column) => ( +
+ + {column.map((text) => ( + {text} + ))} + +
+ )) + } +
+ + +
+ { plans.map((plan) => (
diff --git a/preview/pages/license.astro b/preview/pages/license.astro index 279835a2a..0cd0f513e 100644 --- a/preview/pages/license.astro +++ b/preview/pages/license.astro @@ -1,6 +1,8 @@ --- import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import Icon from '@ui/Icon.astro' +import IconList from '@ui/IconList.astro' +import IconListItem from '@ui/IconListItem.astro' import Card from '@ui/Card.astro' import CardBody from '@ui/CardBody.astro' import CardFooter from '@ui/CardFooter.astro' @@ -62,23 +64,23 @@ const licenseHtml = `

Permissions

- + + Commercial use + Modification + Distribution + Private use +

Limitations

- + + Liability + Warranty +

Conditions

- + + License and copyright notice + This is not legal advice. diff --git a/preview/pages/trial-ended.astro b/preview/pages/trial-ended.astro index 56716878d..2aba7084d 100644 --- a/preview/pages/trial-ended.astro +++ b/preview/pages/trial-ended.astro @@ -1,6 +1,7 @@ --- import SingleLayout from '@shared/layouts/SingleLayout.astro' -import Icon from '@ui/Icon.astro' +import IconList from '@ui/IconList.astro' +import IconListItem from '@ui/IconListItem.astro' --- @@ -10,29 +11,26 @@ import Icon from '@ui/Icon.astro'

If you want to continue to benefit from Tabler, it's time to upgrade your plan.

-
    -
  • - - + + + Over 800+ productions Unlimited movies, TV shows and more. -
    • -
  • - - + + + Watch everywhere Watch on smart TVs, PlayStation, Xbox, Apple TV, Blu-ray players and more. -
    • -
  • - - + + + Personalize Choose your own style, watch what you like. -
    • -
+ +
Upgrade to a paid plan diff --git a/shared/components/cards/PricingCard.astro b/shared/components/cards/PricingCard.astro index 9616edd2e..cbd11f93d 100644 --- a/shared/components/cards/PricingCard.astro +++ b/shared/components/cards/PricingCard.astro @@ -1,6 +1,8 @@ --- // Feature names are a fixed list; the `features` string is split per-character into a 1/0 availability mask. import Icon from '@ui/Icon.astro' +import IconList from '@ui/IconList.astro' +import IconListItem from '@ui/IconListItem.astro' interface Props { price?: string @@ -31,17 +33,22 @@ const availableFeatures = features.split('')
${price}
-
    -
  • {users} Users
    • + + + {users} Users + { - featureNames.map((feature, i) => ( -
  • - {availableFeatures[i] === '1' ? : } - {feature} -
    • - )) + featureNames.map((feature, i) => + availableFeatures[i] === '1' ? ( + {feature} + ) : ( + + {feature} + + ), + ) } -
+
Choose plan diff --git a/shared/components/cards/PricingPlan.astro b/shared/components/cards/PricingPlan.astro index 20bf4c2ed..b2e76cd89 100644 --- a/shared/components/cards/PricingPlan.astro +++ b/shared/components/cards/PricingPlan.astro @@ -1,6 +1,7 @@ --- -import Icon from '@ui/Icon.astro' import Button from '@ui/Button.astro' +import IconList from '@ui/IconList.astro' +import IconListItem from '@ui/IconListItem.astro' ---
@@ -11,24 +12,18 @@ import Button from '@ui/Button.astro'
$199
/ month
-
    -
  • -
    -
    Unlimited Target Audience
    -
    • -
  • -
    -
    1 User Account
    -
    • -
  • -
    -
    100+ Video Tuts
    -
    • -
  • -
    -
    Public Displays
    -
    • -
+ + + Unlimited Target Audience + + + 1 User Account + + + 100+ Video Tuts + + Public Displays +

This plan is perfect for small businesses and startups. It includes all the features you need to get started.

-
    -
  • - Up to 5 developers -
    • -
  • - All marketing + app components -
    • -
  • - Figma UI Kit -
    • -
  • - Lifetime free updates -
    • -
+ + {features.map((text) => {text})} +
Get started
@@ -48,20 +40,9 @@ const sectionClass = ['section', className]
per year
- + + {features.map((text) => {text})} +
Get started
@@ -73,20 +54,9 @@ const sectionClass = ['section', className]
per year
- + + {features.map((text) => {text})} +
Get started
diff --git a/shared/components/marketing/sections/PricingBanner.astro b/shared/components/marketing/sections/PricingBanner.astro index 5a192e7a6..f663070a0 100644 --- a/shared/components/marketing/sections/PricingBanner.astro +++ b/shared/components/marketing/sections/PricingBanner.astro @@ -1,7 +1,10 @@ --- -import Icon from '@ui/Icon.astro' +import IconList from '@ui/IconList.astro' +import IconListItem from '@ui/IconListItem.astro' const sectionClass = ['section'] + +const features = ['Up to 5 developers', 'All marketing + app components', 'Figma UI Kit', 'Lifetime free updates'] ---
@@ -13,20 +16,9 @@ const sectionClass = ['section']

Get Marketing + Application UI for you and your team

-
    -
  • - Up to 5 developers -
    • -
  • - All marketing + app components -
    • -
  • - Figma UI Kit -
    • -
  • - Lifetime free updates -
    • -
+ + {features.map((text) => {text})} +