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.
+
+
+
+
+
+
+
Unlimited projects
+
Create as many projects as you need, with no extra charge.
+
+
+
+
+
+
Priority support
+
Your questions go to the top of the queue.
+
+
+
+
+
+## Links
+
+The marker can describe the entry instead of ticking it off, for example in a list of contact details with links.
+
+
+
+
+
+ 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
-
+
+ Commercial use
+ Modification
+ Distribution
+ Private use
+
Limitations
-
-
Liability
-
Warranty
-
+
+ Liability
+ Warranty
+
Conditions
-
-
License and copyright notice
-
+
+ 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+ productionsUnlimited movies, TV shows and more.
-
-
-
-
+
+
+ Watch everywhereWatch on smart TVs, PlayStation, Xbox, Apple TV, Blu-ray players and more.
-
-
-
-
+
+
+ PersonalizeChoose 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('')
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.
diff --git a/shared/components/cards/UserInfo.astro b/shared/components/cards/UserInfo.astro
index d9372f874..2d6b544c7 100644
--- a/shared/components/cards/UserInfo.astro
+++ b/shared/components/cards/UserInfo.astro
@@ -1,5 +1,6 @@
---
-import Icon from '@ui/Icon.astro'
+import IconList from '@ui/IconList.astro'
+import IconListItem from '@ui/IconListItem.astro'
import type { FlagCountry } from '@shared/lib/tokens'
import { people } from '@shared/lib/people'
import Flag from '@ui/Flag.astro'
@@ -12,29 +13,25 @@ const person = requireIndex(people, 24)
Basic info
-
-
- Went to: {person.university}
-
-
-
- Worked at: {person.company}
-
-
-
- Lives in: {person.city}, {person.country}
-
-
-
- From: {person.country}
-
-
-
- Birth date: {person.birth_date}
-
-
-
- Time zone: {person.time_zone}
-
+
+
+ Went to: {person.university}
+
+
+ Worked at: {person.company}
+
+
+ Lives in: {person.city}, {person.country}
+
+
+ From: {person.country}
+
+
+ Birth date: {person.birth_date}
+
+
+ Time zone: {person.time_zone}
+
+