```
-To match the artwork to your brand, use the CSS-variables version and override its custom properties — for example the primary color and the skin tone:
+To match the artwork to your brand, use the CSS-variables version and override its custom properties - for example the primary color and the skin tone:
```css
:root {
diff --git a/docs/content/illustrations/preview.mdx b/docs/content/illustrations/preview.mdx
index 0347e741b..f0b3fb343 100644
--- a/docs/content/illustrations/preview.mdx
+++ b/docs/content/illustrations/preview.mdx
@@ -1,7 +1,7 @@
---
title: Preview
order: 1
-summary: 'Tabler Illustrations offers 80 illustrations in two themes: light and dark. You can use them in your projects to enhance the visual appeal and convey messages effectively.'
+summary: All Tabler Illustrations in the light and the dark variant, with the file name under each one.
description: Browse all Tabler Illustrations in light and dark themes.
---
@@ -33,7 +33,7 @@ The `svg-css-autodark` folder holds a single-file version that follows the color
## All illustrations
-Find out more and purchase Tabler Illustrations at [our website](https://tabler.io/illustrations).
+You can buy Tabler Illustrations at [tabler.io/illustrations](https://tabler.io/illustrations).
-Find all the guides and resources you need to develop with Tabler and our other tools. Explore our UI components, icons, illustrations, and email templates to enhance your web development experience. Our tools are designed to be easy to use, customizable, and fully responsive, ensuring that your projects look great on
-any device.
+This is the documentation for Tabler and the tools around it: the UI kit, its plugins, Tabler Icons, Illustrations and the email templates. Pick a section below to get started.
diff --git a/docs/content/payments/css.mdx b/docs/content/payments/css.mdx
index ca81f38e7..a5264d60a 100644
--- a/docs/content/payments/css.mdx
+++ b/docs/content/payments/css.mdx
@@ -1,7 +1,7 @@
---
title: CSS plugin
seoTitle: Payments CSS plugin
-summary: The Tabler payments plug-in will let you use a set of payment provider icons to facilitate the payment process and make it more user-friendly.
+summary: The payments plugin adds payment provider logos, such as Visa or PayPal, as CSS classes for checkout pages and forms.
description: Show payment provider logos like Visa, Mastercard, and PayPal with the payments CSS plugin to make checkout pages clearer.
order: 1
css-plugins: [payments]
@@ -13,7 +13,7 @@ import CdnImportPlugin from '@components/CdnImportPlugin.astro'
## Installation
-This part of Tabler is distributed as a plugin. To enable it you should include `tabler-payments.css` or `tabler-payments.min.css` file in your page.
+The payment logos are a plugin. Include `tabler-payments.css` or `tabler-payments.min.css` in your page to enable them.
You can also include the plugin via CDN:
@@ -21,7 +21,7 @@ You can also include the plugin via CDN:
## Payment
-To create a payment provider icon, add the `payment` class to a component and specify the payment provider with the `payment-provider-*` class. The full list of payment providers can be found at the end of this page.
+Add the `payment` class to an element and a `payment-provider-*` class with the provider name. The full list is at the end of this page.
@@ -31,7 +31,7 @@ To create a payment provider icon, add the `payment` class to a component and sp
## Payment sizes
-Using Bootstrap’s typical naming structure, you can create a standard payment, or scale it up or down to different sizes based on what’s needed.
+Add a size class such as `payment-lg` to scale the logo. The names follow the usual Bootstrap pattern.
@@ -68,7 +68,7 @@ The usual place for these logos is under a payment form, to say which cards you
## List of available payment providers
-Select an icon from the list of payment providers. Each icon comes in two color variants - light and dark, so you can choose the one that goes well with your design.
+Every provider below comes in a light and a dark variant. Pick the one that matches the surface it sits on.
@@ -30,8 +30,8 @@ Tabler Payments is a collection of { payments.length } payment provider logos, f
You can use the logos in two ways:
-- **[CSS plugin](/payments/css)** — add the `payment` and `payment-provider-*` classes to a ``. Works with plain HTML and any framework, and needs only one extra stylesheet.
-- **[Libraries](/payments/libraries)** — render logos as native, tree-shakable components in [React](/payments/libraries/react), [Vue](/payments/libraries/vue), [Preact](/payments/libraries/preact) or [Astro](/payments/libraries/astro), with type-checked props and no separate CSS file.
+- **[CSS plugin](/payments/css)**: add the `payment` and `payment-provider-*` classes to a ``. Works with plain HTML and any framework, and needs only one extra stylesheet.
+- **[Libraries](/payments/libraries)**: render logos as native, tree-shakable components in [React](/payments/libraries/react), [Vue](/payments/libraries/vue), [Preact](/payments/libraries/preact) or [Astro](/payments/libraries/astro), with type-checked props and no separate CSS file.
Both ways use the same set of providers and the same light and dark artwork, so you can mix them or switch between them without visual changes.
@@ -43,7 +43,7 @@ For the CSS plugin, include the stylesheet from a CDN and add a `` with th
`. Import the one you need in your frontmatter and render it in your template:
+Every provider - Visa, Mastercard, PayPal, and so on - is exported as its own named component, following the pattern `Payment`. Import the one you need in your frontmatter and render it in your template:
```astro
---
@@ -28,11 +28,11 @@ import { PaymentVisa } from '@tabler/payments-astro';
` element as the first child inside the SVG, which screen readers announce when they reach the logo. This does **not** happen automatically — without `title` (or an `aria-label` on a wrapping element), the logo is invisible to assistive technology, which is correct when it's purely decorative but wrong when it's the only way to identify a payment method:
+Adds an accessible `<title>` element as the first child inside the SVG, which screen readers announce when they reach the logo. This does **not** happen automatically - without `title` (or an `aria-label` on a wrapping element), the logo is invisible to assistive technology, which is correct when it's purely decorative but wrong when it's the only way to identify a payment method:
```astro
<PaymentVisa title="Visa" />
@@ -95,7 +95,7 @@ See the [Accessibility](/payments/css#accessibility) section on the CSS plugin p
### Everything else
-Any other prop you pass — `class`, `stroke-width`, `data-*`, and so on — is forwarded as-is to the root `<svg>` element, exactly like it would be on a plain HTML element:
+Any other prop you pass - `class`, `stroke-width`, `data-*`, and so on - is forwarded as-is to the root `<svg>` element, exactly like it would be on a plain HTML element:
```astro
<PaymentVisa class="rounded shadow-sm" data-testid="visa-logo" />
@@ -103,7 +103,7 @@ Any other prop you pass — `class`, `stroke-width`, `data-*`, and so on — is
### `provider` (dynamic `Payment` component only)
-Required when using `Payment` instead of a named import. Takes the provider's slug as a string: the component name without the `Payment` prefix, in kebab-case. For example, `PaymentGooglePay` → `"google-pay"`. Any of the 100+ supported providers works here, not just the ones shown in the examples on this page — see the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-astro/README.md) for the full list. See [Rendering a provider by name at runtime](#rendering-a-provider-by-name-at-runtime) above.
+Required when using `Payment` instead of a named import. Takes the provider's slug as a string: the component name without the `Payment` prefix, in kebab-case. For example, `PaymentGooglePay` → `"google-pay"`. Any of the 100+ supported providers works here, not just the ones shown in the examples on this page - see the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-astro/README.md) for the full list. See [Rendering a provider by name at runtime](#rendering-a-provider-by-name-at-runtime) above.
## Available providers
diff --git a/docs/content/payments/libraries/index.mdx b/docs/content/payments/libraries/index.mdx
index 536f143a7..1a1f2cc91 100644
--- a/docs/content/payments/libraries/index.mdx
+++ b/docs/content/payments/libraries/index.mdx
@@ -1,7 +1,7 @@
---
title: Libraries
description: Official Tabler Payments packages for React, Vue, Preact and Astro. Use over 100 payment provider logos as native, tree-shakable components.
-summary: The libraries section offers official Tabler Payments packages for popular frameworks, so you can render payment provider logos as native components instead of CSS classes.
+summary: Official Tabler Payments packages for popular frameworks, which render payment provider logos as native components.
order: 2
---
diff --git a/docs/content/payments/libraries/preact.mdx b/docs/content/payments/libraries/preact.mdx
index 60dec37d3..982ad8a4a 100644
--- a/docs/content/payments/libraries/preact.mdx
+++ b/docs/content/payments/libraries/preact.mdx
@@ -6,7 +6,7 @@ summary: Tabler Payments for Preact offers payment provider logos as tree-shakab
import TabsPackage from '@components/TabsPackage.astro'
-This is an alternative to the [CSS payments plugin](/payments/css) for Preact projects: instead of adding `payment`/`payment-provider-*` classes to a `<span>`, you render a real Preact component. This gives you type-checked props, no separate CSS file to load, and tree-shaking — a page that only uses `PaymentVisa` doesn't ship the SVG markup for the other 99 providers.
+This is an alternative to the [CSS payments plugin](/payments/css) for Preact projects: instead of adding `payment`/`payment-provider-*` classes to a `<span>`, you render a real Preact component. This gives you type-checked props, no separate CSS file to load, and tree-shaking - a page that only uses `PaymentVisa` doesn't ship the SVG markup for the other 99 providers.
This package is pre-1.0: the API may still change before a 1.0 release.
@@ -14,11 +14,11 @@ This package is pre-1.0: the API may still change before a 1.0 release.
<TabsPackage name="@tabler/payments-preact" />
-`preact` is a peer dependency — the package reuses the Preact version already in your project instead of bundling its own.
+`preact` is a peer dependency - the package reuses the Preact version already in your project instead of bundling its own.
## How to use
-Every provider — Visa, Mastercard, PayPal, and so on — is exported as its own named component, following the pattern `Payment<ProviderName>`. Import the one you need and render it like any other Preact component:
+Every provider - Visa, Mastercard, PayPal, and so on - is exported as its own named component, following the pattern `Payment<ProviderName>`. Import the one you need and render it like any other Preact component:
```jsx
import { PaymentVisa } from '@tabler/payments-preact';
@@ -28,11 +28,11 @@ function AcceptedCards() {
}
```
-This works well when you know exactly which providers you want to show, and you write their names directly in your code — for example a fixed row of cards you accept.
+This works well when you know exactly which providers you want to show, and you write their names directly in your code - for example a fixed row of cards you accept.
### Rendering a provider by name at runtime
-Sometimes the provider isn't known ahead of time in your source code — for example, it's a string coming from an API response or a CMS field.
+Sometimes the provider isn't known ahead of time in your source code - for example, it's a string coming from an API response or a CMS field.
For this case, use the `Payment` component instead: pass the provider's slug as a `provider` prop and it renders the right logo for you.
@@ -42,9 +42,9 @@ import { Payment } from '@tabler/payments-preact';
<Payment provider="visa" variant="dark" size={32} />
```
-The slug is the component name without the `Payment` prefix, in kebab-case — for example `PaymentGooglePay` is `"google-pay"`. This works the same way for any of the 100+ supported payment providers.
+The slug is the component name without the `Payment` prefix, in kebab-case - for example `PaymentGooglePay` is `"google-pay"`. This works the same way for any of the 100+ supported payment providers.
-If `provider` doesn't match a known slug, `Payment` renders nothing rather than throwing — useful when the data driving it isn't fully trusted (for example, a slug typed by hand in a CMS).
+If `provider` doesn't match a known slug, `Payment` renders nothing rather than throwing - useful when the data driving it isn't fully trusted (for example, a slug typed by hand in a CMS).
## Props
@@ -54,12 +54,12 @@ Both the named provider components (`PaymentVisa`, `PaymentMastercard`, ...) and
| ---------- | ------------------- | ------- | -------------- |
| `variant` | `'light' \| 'dark'` | `light` | no |
| `size` | `string \| number` | `24` | no |
-| `title` | `string` | — | no |
-| `provider` | `string` | — | `Payment` only |
+| `title` | `string` | - | no |
+| `provider` | `string` | - | `Payment` only |
### `variant`
-Every logo ships in two pre-baked color versions, `light` and `dark` — exactly like the CSS plugin's `payment-provider-*` (light) and `payment-provider-*-dark` classes. Pick `variant="dark"` when the logo sits on a dark surface (a dark navbar, a dark card, dark mode), and leave it at the `light` default everywhere else. There's no automatic detection of the surrounding background — you choose explicitly:
+Every logo ships in two pre-baked color versions, `light` and `dark` - exactly like the CSS plugin's `payment-provider-*` (light) and `payment-provider-*-dark` classes. Pick `variant="dark"` when the logo sits on a dark surface (a dark navbar, a dark card, dark mode), and leave it at the `light` default everywhere else. There's no automatic detection of the surrounding background - you choose explicitly:
```jsx
<PaymentVisa variant="light" /> {/* default, for light backgrounds */}
@@ -75,7 +75,7 @@ Sets the rendered SVG **height**, in pixels. The width is calculated for you fro
<PaymentVisa size={48} /> {/* 48px tall, 80px wide */}
```
-If you need a specific width instead — for example to fit a fixed-width column — pass `width` directly. An explicit `width` prop overrides the calculated one, while `size` still controls the height:
+If you need a specific width instead - for example to fit a fixed-width column - pass `width` directly. An explicit `width` prop overrides the calculated one, while `size` still controls the height:
```jsx
<PaymentVisa size={24} width={64} /> {/* 24px tall, but exactly 64px wide */}
@@ -83,7 +83,7 @@ If you need a specific width instead — for example to fit a fixed-width column
### `title`
-Adds an accessible `<title>` element as the first child inside the SVG, which screen readers announce when they reach the logo. This does **not** happen automatically — without `title` (or an `aria-label` on a wrapping element), the logo is invisible to assistive technology, which is correct when it's purely decorative but wrong when it's the only way to identify a payment method:
+Adds an accessible `<title>` element as the first child inside the SVG, which screen readers announce when they reach the logo. This does **not** happen automatically - without `title` (or an `aria-label` on a wrapping element), the logo is invisible to assistive technology, which is correct when it's purely decorative but wrong when it's the only way to identify a payment method:
```jsx
<PaymentVisa title="Visa" />
@@ -93,7 +93,7 @@ See the [Accessibility](/payments/css#accessibility) section on the CSS plugin p
### Everything else
-Any other prop you pass — `class`, `onClick`, `style`, `data-*`, and so on — is forwarded as-is to the root `<svg>` element, exactly like it would be on a plain HTML element:
+Any other prop you pass - `class`, `onClick`, `style`, `data-*`, and so on - is forwarded as-is to the root `<svg>` element, exactly like it would be on a plain HTML element:
```jsx
<PaymentVisa class="rounded shadow-sm" onClick={() => selectMethod('visa')} data-testid="visa-logo" />
@@ -101,7 +101,7 @@ Any other prop you pass — `class`, `onClick`, `style`, `data-*`, and so on —
### `provider` (dynamic `Payment` component only)
-Required when using `Payment` instead of a named import. Takes the provider's slug as a string: the component name without the `Payment` prefix, in kebab-case. For example, `PaymentGooglePay` → `"google-pay"`. Any of the 100+ supported providers works here, not just the ones shown in the examples on this page — see the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-preact/README.md) for the full list. See [Rendering a provider by name at runtime](#rendering-a-provider-by-name-at-runtime) above.
+Required when using `Payment` instead of a named import. Takes the provider's slug as a string: the component name without the `Payment` prefix, in kebab-case. For example, `PaymentGooglePay` → `"google-pay"`. Any of the 100+ supported providers works here, not just the ones shown in the examples on this page - see the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-preact/README.md) for the full list. See [Rendering a provider by name at runtime](#rendering-a-provider-by-name-at-runtime) above.
## Available providers
diff --git a/docs/content/payments/libraries/react.mdx b/docs/content/payments/libraries/react.mdx
index 3951bdc40..3815b0434 100644
--- a/docs/content/payments/libraries/react.mdx
+++ b/docs/content/payments/libraries/react.mdx
@@ -6,7 +6,7 @@ summary: Tabler Payments for React offers payment provider logos as tree-shakabl
import TabsPackage from '@components/TabsPackage.astro'
-This is an alternative to the [CSS payments plugin](/payments/css) for React projects: instead of adding `payment`/`payment-provider-*` classes to a `<span>`, you render a real React component. This gives you type-checked props, no separate CSS file to load, and tree-shaking — a page that only uses `PaymentVisa` doesn't ship the SVG markup for the other 99 providers.
+This is an alternative to the [CSS payments plugin](/payments/css) for React projects: instead of adding `payment`/`payment-provider-*` classes to a `<span>`, you render a real React component. This gives you type-checked props, no separate CSS file to load, and tree-shaking - a page that only uses `PaymentVisa` doesn't ship the SVG markup for the other 99 providers.
This package is pre-1.0: the API may still change before a 1.0 release.
@@ -14,11 +14,11 @@ This package is pre-1.0: the API may still change before a 1.0 release.
<TabsPackage name="@tabler/payments-react" />
-`react` is a peer dependency — the package reuses the React version already in your project instead of bundling its own.
+`react` is a peer dependency - the package reuses the React version already in your project instead of bundling its own.
## How to use
-Every provider — Visa, Mastercard, PayPal, and so on — is exported as its own named component, following the pattern `Payment<ProviderName>`. Import the one you need and render it like any other React component:
+Every provider - Visa, Mastercard, PayPal, and so on - is exported as its own named component, following the pattern `Payment<ProviderName>`. Import the one you need and render it like any other React component:
```jsx
import { PaymentVisa } from '@tabler/payments-react';
@@ -28,11 +28,11 @@ function AcceptedCards() {
}
```
-This works well when you know exactly which providers you want to show, and you write their names directly in your code — for example a fixed row of cards you accept.
+This works well when you know exactly which providers you want to show, and you write their names directly in your code - for example a fixed row of cards you accept.
### Rendering a provider by name at runtime
-Sometimes the provider isn't known ahead of time in your source code — for example, it's a string coming from an API response or a CMS field.
+Sometimes the provider isn't known ahead of time in your source code - for example, it's a string coming from an API response or a CMS field.
For this case, use the `Payment` component instead: pass the provider's slug as a `provider` prop and it renders the right logo for you.
@@ -42,9 +42,9 @@ import { Payment } from '@tabler/payments-react';
<Payment provider="visa" variant="dark" size={32} />
```
-The slug is the component name without the `Payment` prefix, in kebab-case — for example `PaymentGooglePay` is `"google-pay"`. This works the same way for any of the 100+ supported payment providers.
+The slug is the component name without the `Payment` prefix, in kebab-case - for example `PaymentGooglePay` is `"google-pay"`. This works the same way for any of the 100+ supported payment providers.
-If `provider` doesn't match a known slug, `Payment` renders nothing rather than throwing — useful when the data driving it isn't fully trusted (for example, a slug typed by hand in a CMS).
+If `provider` doesn't match a known slug, `Payment` renders nothing rather than throwing - useful when the data driving it isn't fully trusted (for example, a slug typed by hand in a CMS).
## Props
@@ -54,12 +54,12 @@ Both the named provider components (`PaymentVisa`, `PaymentMastercard`, ...) and
| ---------- | ------------------- | ------- | -------------- |
| `variant` | `'light' \| 'dark'` | `light` | no |
| `size` | `string \| number` | `24` | no |
-| `title` | `string` | — | no |
-| `provider` | `string` | — | `Payment` only |
+| `title` | `string` | - | no |
+| `provider` | `string` | - | `Payment` only |
### `variant`
-Every logo ships in two pre-baked color versions, `light` and `dark` — exactly like the CSS plugin's `payment-provider-*` (light) and `payment-provider-*-dark` classes. Pick `variant="dark"` when the logo sits on a dark surface (a dark navbar, a dark card, dark mode), and leave it at the `light` default everywhere else. There's no automatic detection of the surrounding background — you choose explicitly:
+Every logo ships in two pre-baked color versions, `light` and `dark` - exactly like the CSS plugin's `payment-provider-*` (light) and `payment-provider-*-dark` classes. Pick `variant="dark"` when the logo sits on a dark surface (a dark navbar, a dark card, dark mode), and leave it at the `light` default everywhere else. There's no automatic detection of the surrounding background - you choose explicitly:
```jsx
<PaymentVisa variant="light" /> {/* default, for light backgrounds */}
@@ -75,7 +75,7 @@ Sets the rendered SVG **height**, in pixels. The width is calculated for you fro
<PaymentVisa size={48} /> {/* 48px tall, 80px wide */}
```
-If you need a specific width instead — for example to fit a fixed-width column — pass `width` directly. An explicit `width` prop overrides the calculated one, while `size` still controls the height:
+If you need a specific width instead - for example to fit a fixed-width column - pass `width` directly. An explicit `width` prop overrides the calculated one, while `size` still controls the height:
```jsx
<PaymentVisa size={24} width={64} /> {/* 24px tall, but exactly 64px wide */}
@@ -83,7 +83,7 @@ If you need a specific width instead — for example to fit a fixed-width column
### `title`
-Adds an accessible `<title>` element as the first child inside the SVG, which screen readers announce when they reach the logo. This does **not** happen automatically — without `title` (or an `aria-label` on a wrapping element), the logo is invisible to assistive technology, which is correct when it's purely decorative but wrong when it's the only way to identify a payment method:
+Adds an accessible `<title>` element as the first child inside the SVG, which screen readers announce when they reach the logo. This does **not** happen automatically - without `title` (or an `aria-label` on a wrapping element), the logo is invisible to assistive technology, which is correct when it's purely decorative but wrong when it's the only way to identify a payment method:
```jsx
<PaymentVisa title="Visa" />
@@ -93,7 +93,7 @@ See the [Accessibility](/payments/css#accessibility) section on the CSS plugin p
### Everything else
-Any other prop you pass — `className`, `onClick`, `style`, `data-*`, `aria-*`, and so on — is forwarded as-is to the root `<svg>` element, exactly like it would be on a plain HTML element:
+Any other prop you pass - `className`, `onClick`, `style`, `data-*`, `aria-*`, and so on - is forwarded as-is to the root `<svg>` element, exactly like it would be on a plain HTML element:
```jsx
<PaymentVisa className="rounded shadow-sm" onClick={() => selectMethod('visa')} data-testid="visa-logo" />
@@ -101,7 +101,7 @@ Any other prop you pass — `className`, `onClick`, `style`, `data-*`, `aria-*`,
### `provider` (dynamic `Payment` component only)
-Required when using `Payment` instead of a named import. Takes the provider's slug as a string: the component name without the `Payment` prefix, in kebab-case. For example, `PaymentGooglePay` → `"google-pay"`. Any of the 100+ supported providers works here, not just the ones shown in the examples on this page — see the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-react/README.md) for the full list. See [Rendering a provider by name at runtime](#rendering-a-provider-by-name-at-runtime) above.
+Required when using `Payment` instead of a named import. Takes the provider's slug as a string: the component name without the `Payment` prefix, in kebab-case. For example, `PaymentGooglePay` → `"google-pay"`. Any of the 100+ supported providers works here, not just the ones shown in the examples on this page - see the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-react/README.md) for the full list. See [Rendering a provider by name at runtime](#rendering-a-provider-by-name-at-runtime) above.
## Available providers
diff --git a/docs/content/payments/libraries/vue.mdx b/docs/content/payments/libraries/vue.mdx
index 45a19d42f..907b8a9da 100644
--- a/docs/content/payments/libraries/vue.mdx
+++ b/docs/content/payments/libraries/vue.mdx
@@ -6,7 +6,7 @@ summary: Tabler Payments for Vue offers payment provider logos as tree-shakable
import TabsPackage from '@components/TabsPackage.astro'
-This is an alternative to the [CSS payments plugin](/payments/css) for Vue projects: instead of adding `payment`/`payment-provider-*` classes to a `<span>`, you render a real Vue component. This gives you type-checked props, no separate CSS file to load, and tree-shaking — a page that only uses `PaymentVisa` doesn't ship the SVG markup for the other 99 providers.
+This is an alternative to the [CSS payments plugin](/payments/css) for Vue projects: instead of adding `payment`/`payment-provider-*` classes to a `<span>`, you render a real Vue component. This gives you type-checked props, no separate CSS file to load, and tree-shaking - a page that only uses `PaymentVisa` doesn't ship the SVG markup for the other 99 providers.
This package is pre-1.0: the API may still change before a 1.0 release.
@@ -14,11 +14,11 @@ This package is pre-1.0: the API may still change before a 1.0 release.
<TabsPackage name="@tabler/payments-vue" />
-`vue` is a peer dependency — the package reuses the Vue 3 version already in your project instead of bundling its own.
+`vue` is a peer dependency - the package reuses the Vue 3 version already in your project instead of bundling its own.
## How to use
-Every provider — Visa, Mastercard, PayPal, and so on — is exported as its own named component, following the pattern `Payment<ProviderName>`. Import the one you need and render it like any other Vue component:
+Every provider - Visa, Mastercard, PayPal, and so on - is exported as its own named component, following the pattern `Payment<ProviderName>`. Import the one you need and render it like any other Vue component:
```vue
<script setup>
@@ -30,11 +30,11 @@ import { PaymentVisa } from '@tabler/payments-vue';
</template>
```
-This works well when you know exactly which providers you want to show, and you write their names directly in your template — for example a fixed row of cards you accept.
+This works well when you know exactly which providers you want to show, and you write their names directly in your template - for example a fixed row of cards you accept.
### Rendering a provider by name at runtime
-Sometimes the provider isn't known ahead of time in your template — for example, it's a string coming from an API response or a CMS field.
+Sometimes the provider isn't known ahead of time in your template - for example, it's a string coming from an API response or a CMS field.
For this case, use the `Payment` component instead: pass the provider's slug as a `provider` prop and it renders the right logo for you.
@@ -48,9 +48,9 @@ import { Payment } from '@tabler/payments-vue';
</template>
```
-The slug is the component name without the `Payment` prefix, in kebab-case — for example `PaymentGooglePay` is `"google-pay"`. This works the same way for any of the 100+ supported payment providers.
+The slug is the component name without the `Payment` prefix, in kebab-case - for example `PaymentGooglePay` is `"google-pay"`. This works the same way for any of the 100+ supported payment providers.
-If `provider` doesn't match a known slug, `Payment` renders nothing rather than throwing — useful when the data driving it isn't fully trusted (for example, a slug typed by hand in a CMS).
+If `provider` doesn't match a known slug, `Payment` renders nothing rather than throwing - useful when the data driving it isn't fully trusted (for example, a slug typed by hand in a CMS).
## Props
@@ -60,12 +60,12 @@ Both the named provider components (`PaymentVisa`, `PaymentMastercard`, ...) and
| ---------- | ------------------- | ------- | -------------- |
| `variant` | `'light' \| 'dark'` | `light` | no |
| `size` | `string \| number` | `24` | no |
-| `title` | `string` | — | no |
-| `provider` | `string` | — | `Payment` only |
+| `title` | `string` | - | no |
+| `provider` | `string` | - | `Payment` only |
### `variant`
-Every logo ships in two pre-baked color versions, `light` and `dark` — exactly like the CSS plugin's `payment-provider-*` (light) and `payment-provider-*-dark` classes. Pick `variant="dark"` when the logo sits on a dark surface (a dark navbar, a dark card, dark mode), and leave it at the `light` default everywhere else. There's no automatic detection of the surrounding background — you choose explicitly:
+Every logo ships in two pre-baked color versions, `light` and `dark` - exactly like the CSS plugin's `payment-provider-*` (light) and `payment-provider-*-dark` classes. Pick `variant="dark"` when the logo sits on a dark surface (a dark navbar, a dark card, dark mode), and leave it at the `light` default everywhere else. There's no automatic detection of the surrounding background - you choose explicitly:
```vue
<PaymentVisa variant="light" /> <!-- default, for light backgrounds -->
@@ -81,7 +81,7 @@ Sets the rendered SVG **height**, in pixels. The width is calculated for you fro
<PaymentVisa :size="48" /> <!-- 48px tall, 80px wide -->
```
-If you need a specific width instead — for example to fit a fixed-width column — pass `width` directly. An explicit `width` prop overrides the calculated one, while `size` still controls the height:
+If you need a specific width instead - for example to fit a fixed-width column - pass `width` directly. An explicit `width` prop overrides the calculated one, while `size` still controls the height:
```vue
<PaymentVisa :size="24" :width="64" /> <!-- 24px tall, but exactly 64px wide -->
@@ -89,7 +89,7 @@ If you need a specific width instead — for example to fit a fixed-width column
### `title`
-Adds an accessible `<title>` element as the first child inside the SVG, which screen readers announce when they reach the logo. This does **not** happen automatically — without `title` (or an `aria-label` on a wrapping element), the logo is invisible to assistive technology, which is correct when it's purely decorative but wrong when it's the only way to identify a payment method:
+Adds an accessible `<title>` element as the first child inside the SVG, which screen readers announce when they reach the logo. This does **not** happen automatically - without `title` (or an `aria-label` on a wrapping element), the logo is invisible to assistive technology, which is correct when it's purely decorative but wrong when it's the only way to identify a payment method:
```vue
<PaymentVisa title="Visa" />
@@ -99,7 +99,7 @@ See the [Accessibility](/payments/css#accessibility) section on the CSS plugin p
### Everything else
-Any other attribute you pass — `class`, `stroke-width`, `onClick`, and so on — is forwarded as-is to the root `<svg>` element, exactly like it would be on a plain HTML element. This package keeps attributes **kebab-case** (`stroke-width`, not `strokeWidth`), matching how Vue and the DOM already write them:
+Any other attribute you pass - `class`, `stroke-width`, `onClick`, and so on - is forwarded as-is to the root `<svg>` element, exactly like it would be on a plain HTML element. This package keeps attributes **kebab-case** (`stroke-width`, not `strokeWidth`), matching how Vue and the DOM already write them:
```vue
<PaymentVisa class="rounded shadow-sm" @click="selectMethod('visa')" data-testid="visa-logo" />
@@ -107,7 +107,7 @@ Any other attribute you pass — `class`, `stroke-width`, `onClick`, and so on
### `provider` (dynamic `Payment` component only)
-Required when using `Payment` instead of a named import. Takes the provider's slug as a string: the component name without the `Payment` prefix, in kebab-case. For example, `PaymentGooglePay` → `"google-pay"`. Any of the 100+ supported providers works here, not just the ones shown in the examples on this page — see the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-vue/README.md) for the full list. See [Rendering a provider by name at runtime](#rendering-a-provider-by-name-at-runtime) above.
+Required when using `Payment` instead of a named import. Takes the provider's slug as a string: the component name without the `Payment` prefix, in kebab-case. For example, `PaymentGooglePay` → `"google-pay"`. Any of the 100+ supported providers works here, not just the ones shown in the examples on this page - see the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-vue/README.md) for the full list. See [Rendering a provider by name at runtime](#rendering-a-provider-by-name-at-runtime) above.
## Available providers
diff --git a/docs/content/ui/base/colors.mdx b/docs/content/ui/base/colors.mdx
index 165f4cd39..6657d4791 100644
--- a/docs/content/ui/base/colors.mdx
+++ b/docs/content/ui/base/colors.mdx
@@ -1,9 +1,7 @@
---
title: Colors
-summary:
- The choice of colors for a website or app interface has a big influence on how users interact with the product and what decisions they make. Harmonious colors can contribute to a nice first impression and encourage users to engage with your product, so it's a very important aspect of a successful design, which needs
- to be well thought out.
-description: Explore the Tabler color palette and learn how to use base and pastel shades to style components, indicate states, and guide user actions.
+summary: The Tabler color palette with base colors, light variants, the gray scale and social brand colors, each with background and text utilities.
+description: The Tabler color palette, with base and light shades, the gray scale and social brand colors.
---
import Colors from '@components/Colors.astro'
@@ -12,19 +10,19 @@ import site from '@data/site.json'
## Base colors
-Choose one of the available colors from the basic color palette and make your design attractive for users. You can use the colors to customize the design of components, indicate different states or suggest actions you want users to take.
+These are the base colors. Each one has `bg-*` and `text-*` utilities, and the components use the same names for their color variants.
<Colors colors={site.colors} />
## Light colors
-All available colors can come in pastel shades, which are perfect for more subtle designs and can be easily combined with the basic palette to create eye-catching designs.
+Every base color also has a light shade with the `-lt` suffix. It works as a background for text or an icon in the base color.
<Colors colors={site.lightColors} />
## Gray palette
-The gray palette is a great choice for creating a neutral background for your design. It can be used to create a clean and professional look, and can be combined with other colors to create a harmonious design.
+The gray scale is used for backgrounds, borders and muted text. Tabler ships several gray palettes and switches between them with `data-bs-theme-base`; see [theme base colors](/ui/plugins/theme-base-colors).
<Colors colors={site.grayColors} />
@@ -40,14 +38,14 @@ Every shade of the gray palette has a background and a text utility, from `50` t
## Social colors
-Use the colors of popular social networks to create a recognizable design and make it easier for users to interact with your product.
+The brand colors of popular services are available too, for social buttons and icons.
<Colors colors={site.socialColors} />
## Accessibility
-- A colour name is not a meaning. `text-red` looks like an error to most users, but a screen reader announces nothing, so keep the meaning in the text.
-- Body text needs a contrast ratio of at least 4.5:1, and large text at least 3:1. The lighter `-lt` variants are backgrounds for dark text, not text colours.
-- Check both colour modes. A pair that passes in light can fail in dark, and Tabler switches many tokens with `light-dark()`.
-- The social colours are brand colours. They are picked to be recognisable, not readable - do not use them for text on a white background without checking.
+- A color name is not a meaning. `text-red` looks like an error to most users, but a screen reader announces nothing, so keep the meaning in the text.
+- Body text needs a contrast ratio of at least 4.5:1, and large text at least 3:1. The lighter `-lt` variants are backgrounds for dark text, not text colors.
+- Check both color modes. A pair that passes in light can fail in dark, and Tabler switches many tokens with `light-dark()`.
+- The social colors are brand colors. They are picked to be recognizable, not readable - do not use them for text on a white background without checking.
- Never separate two states by hue alone. Add a label, an icon, or a shape.
diff --git a/docs/content/ui/base/index.mdx b/docs/content/ui/base/index.mdx
index 70f4afe01..a7ea2132d 100644
--- a/docs/content/ui/base/index.mdx
+++ b/docs/content/ui/base/index.mdx
@@ -2,7 +2,7 @@
title: Base
order: 2
description: Foundational styles that every Tabler project builds on - colors, typography, and long-form content - for a consistent user interface.
-summary: The base section includes foundational elements such as colors, typography, and spacing that form the building blocks of a cohesive and consistent user interface.
+summary: The base section covers colors, typography and the other foundations that every component builds on.
---
Base styles are the foundation every Tabler project builds on. They define colors, typography, and long-form content styles, so all components share one consistent look. Start here before you customize anything else.
diff --git a/docs/content/ui/base/prose.mdx b/docs/content/ui/base/prose.mdx
index 31f469472..ffc794667 100644
--- a/docs/content/ui/base/prose.mdx
+++ b/docs/content/ui/base/prose.mdx
@@ -9,7 +9,7 @@ import Prose from '@ui/Prose.astro';
## How it works
-Wrap your content in the `.prose` class to apply long-form typography styles to headings, paragraphs, lists, tables, and other common elements. This is especially useful when rendering Markdown, MDX, or content from a [WYSIWYG editor](/ui/plugins/wysiwyg).
+Wrap your content in the `.prose` class to apply long-form typography styles to headings, paragraphs, lists, tables and other common elements. Use it when you render Markdown, MDX or the output of a [WYSIWYG editor](/ui/plugins/wysiwyg), where you can't add classes to every element.
- Sets a base `font-size` and `line-height` for comfortable reading.
- Normalizes list spacing and nested list indentation.
@@ -57,7 +57,7 @@ Most of these elements are styled by browsers with only light adjustments from T
## Headings
-Headings help readers scan long documents quickly. Use them to create a clear hierarchy and maintain a logical flow.
+Headings inside `.prose` get their sizes and margins from the wrapper. Keep them in order, so the document has one outline.
### Code
@@ -147,4 +147,4 @@ Tables work best for comparing related data points.
- Images in prose need `alt` text. Use `alt=""` only when the caption already says the same thing.
- Links should make sense on their own. "Read more" repeated ten times gives a screen reader user a list of identical entries.
- Tables in prose need a `th` row. Prose styles them, but only the markup makes them readable.
-- Do not rely on the prose colours for meaning. Keep the emphasis in `strong` and `em`.
+- Do not rely on the prose colors for meaning. Keep the emphasis in `strong` and `em`.
diff --git a/docs/content/ui/base/typography.mdx b/docs/content/ui/base/typography.mdx
index 4eb751eb6..9772ac644 100644
--- a/docs/content/ui/base/typography.mdx
+++ b/docs/content/ui/base/typography.mdx
@@ -1,15 +1,14 @@
---
title: Typography
-summary: Typography plays an important role in creating an attractive and clear interface design. Good typography will make the content easy to follow and improve the usability of your website.
-description: Learn how Tabler styles headings, paragraphs, and text elements to keep content readable and interfaces clear and easy to follow.
+summary: How Tabler styles headings, paragraphs, semantic text elements, horizontal rules and the text utilities.
+description: How Tabler styles headings, paragraphs and text elements to keep content readable.
related: [/ui/base/prose]
---
import Example from '@components/Example.astro';
## Headings
-Use HTML headings to organize content on your website and make the structure clear and user-friendly. The `h1` to `h6` tags are used to define HTML headings.
-The `h1` tag is the highest level and the `h6` tag is the lowest level.
+Use the `h1` to `h6` tags for headings. `h1` is the top level and `h6` the lowest, and the size follows the level.
Below are examples of headings with different levels:
@@ -56,7 +55,7 @@ Add the `lead` class to the opening paragraph of a section. In Tabler it does no
## Semantic text elements
-Use a variety of semantic text elements, depending on how you want to display particular fragments of content.
+HTML has elements for different kinds of inline text: emphasis, deleted or inserted text, abbreviations, code and more. Tabler styles all of them.
Here are examples of semantic text elements:
@@ -94,7 +93,7 @@ Use the `hr` tag to represent a thematic break between paragraphs within one sec
## Horizontal rules with label
-You can also add a label to a horizontal rule and align it as you see fit. Centered label is the default.
+The `hr-text` element draws a rule with a label. The label is centered by default; `hr-text-start` and `hr-text-end` move it to either end.
<Example>
<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
@@ -110,7 +109,7 @@ You can also add a label to a horizontal rule and align it as you see fit. Cente
## Optimized for different alphabets
-Tabler has been optimized to correctly display content in any language. It supports most Asian, African and Middle Eastern languages.
+Tabler doesn't restrict the character set. Text in Asian, African and Middle Eastern scripts renders with the system fonts, as the examples below show.
<Example>
<p>汉字</p>
diff --git a/docs/content/ui/components/alert.mdx b/docs/content/ui/components/alert.mdx
index 075178053..2a03639c3 100644
--- a/docs/content/ui/components/alert.mdx
+++ b/docs/content/ui/components/alert.mdx
@@ -1,6 +1,6 @@
---
title: Alert
-summary: An alert message is used to inform users about the status of their action and help them solve problems that may occur. Good alert design is important for the overall user experience of a website or app.
+summary: Alerts report the result of an action or a problem to fix, in success, info, warning and danger variants, with icons, links and a dismiss button.
description: Show alert messages that inform users about success, info, warning, or danger states, with icons, links, and dismissible options.
related: [/ui/components/toast]
source: core/scss/ui/_alerts.scss
@@ -39,7 +39,7 @@ import Icon from '@ui/Icon.astro'
## Default markup
-Depending on the information you need to convey, you can use one of the following types of alert messages - **success**, **info**, **warning** or **danger**. Using the right type of alert modal will help draw users' attention to the message and prompt them to take action.
+An alert comes in four types: success, info, warning and danger. Pick the one that matches the message, so the color says at a glance whether something went right or wrong.
Combine `alert` class with one of the following: `alert-success`, `alert-info`, `alert-warning`, `alert-danger` to get the alert that you need.
@@ -99,7 +99,7 @@ Add `alert-minor` for a quieter alert. It drops the tinted background and keeps
## Dismissible alerts
-Add the `x` close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only when the user closes it.
+Add a close button to let the user dismiss the alert. It stays on the page until they do.
```html
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
@@ -111,7 +111,7 @@ Add the `x` close button to make an alert modal dismissible. Thanks to that, you
## Alerts with icons
-Add an icon to your alert modal to make it more user-friendly and help users easily identify the message.
+An icon in front of the text repeats the type of the alert, which helps when several alerts are on the page.
Use the `alert-icon` class on an `<svg>` (or on an `<i>` when using the webfont) to provide the proper styling.
@@ -173,7 +173,7 @@ Use the `alert-icon` class on an `<svg>` (or on an `<i>` when using the webfont)
## Alert with avatar
-Add an [avatar](/ui/components/avatar) to your alert modal to make it more personalized.
+Put an [avatar](/ui/components/avatar) in the alert when the message is about a person, such as a mention or a request.
<Example>
<div class="alert alert-success" role="alert">
@@ -210,7 +210,7 @@ Add an [avatar](/ui/components/avatar) to your alert modal to make it more perso
## Alert with buttons
-Add primary and secondary [buttons](/ui/components/button) to your alert modals if you want users to take a particular action based on the information included in the modal message.
+Add [buttons](/ui/components/button) when the alert asks the user to do something, for example to confirm or to retry.
Buttons don't inherit the alert's color, so you should set the proper class if you want it to be matched. For example, `btn-success` for `alert-success`.
@@ -255,7 +255,7 @@ Buttons don't inherit the alert's color, so you should set the proper class if y
## Important alerts
-If you want your alert to be really eye-catching, you can add an `alert-important` class. It will use the selected color as a background for the alert.
+Add `alert-important` to fill the whole alert with its color. Use it for messages that must not be missed.
```html
<div class="alert alert-important alert-success alert-dismissible" role="alert">...</div>
diff --git a/docs/content/ui/components/avatar.mdx b/docs/content/ui/components/avatar.mdx
index e92250a10..492010ba3 100644
--- a/docs/content/ui/components/avatar.mdx
+++ b/docs/content/ui/components/avatar.mdx
@@ -1,6 +1,6 @@
---
title: Avatar
-summary: An avatar helps customize interface elements and make the product experience more personalized. It is often used in communication apps, collaboration tools, and social media.
+summary: An avatar shows a user's picture, initials or an icon in a fixed-size circle or square, with sizes, statuses and stacked lists.
description: Display user avatars with images, initials, or icons. Change sizes, shapes, and colors, or group them into stacked avatar lists.
related: [/ui/components/status, /ui/components/badge]
source: core/scss/ui/_avatars.scss
@@ -41,7 +41,7 @@ import CodeDocs from '@components/CodeDocs.astro';
## Default markup
-Use the `avatar` class to add an avatar to your interface design for greater customization.
+Add the `avatar` class to a `span`. Fill it with a picture as a `background-image`, or with initials as text.
<Example centered>
<AvatarList>
@@ -53,7 +53,7 @@ Use the `avatar` class to add an avatar to your interface design for greater cus
## Avatar image
-Set an image as the background to make users easy to indentify and create a personalized experience.
+Set the picture as a `background-image` on the avatar. It's cropped to the avatar's shape and size.
<Example centered>
<AvatarList>
@@ -65,7 +65,7 @@ Set an image as the background to make users easy to indentify and create a pers
## Initials
-You can also use initials instead of pictures.
+When there is no picture, put the initials as text inside the avatar.
<Example centered>
<AvatarList>
@@ -79,7 +79,7 @@ You can also use initials instead of pictures.
## Avatar icons
-Besides pictures and initials, you can also use [icons](/ui/components/icon) to make the avatars more universal.
+An [icon](/ui/components/icon) inside the avatar works as a placeholder, or for an account that isn't a person, such as a system user.
<Example centered>
<AvatarList>
@@ -91,7 +91,7 @@ Besides pictures and initials, you can also use [icons](/ui/components/icon) to
## Avatar initials color
-Customize the color of the avatars' background. See the [full list of available colors](/ui/base/colors) for more details.
+Set the background with a `bg-*` class from the [color palette](/ui/base/colors). It's most useful with initials.
<Example centered>
<AvatarList>
@@ -105,7 +105,7 @@ Customize the color of the avatars' background. See the [full list of available
## Avatar size
-Using Bootstrap’s typical naming structure, you can create a standard avatar or scale it up or down to different sizes based on what you need.
+Add a size class from `avatar-xxs` to `avatar-2xl`. The names follow the usual Bootstrap pattern.
<Example centered>
<AvatarList>
@@ -119,7 +119,7 @@ Using Bootstrap’s typical naming structure, you can create a standard avatar o
## Avatar status
-Add a [status indicator](/ui/components/status) to your avatar to show, for instance, if a user is online or offline or indicate the number of messages they have received.
+Add a [status indicator](/ui/components/status) to show whether a user is online, or a small count such as unread messages.
<Example centered>
<AvatarList>
@@ -260,7 +260,7 @@ To pick a real file, use a `label` with the upload classes and connect it to a h
## Avatar list
-Use the `.avatar-list` container to create a list of avatars within one parent container. It keeps consistent spacing between items and wraps them when there is not enough space.
+Put several avatars in an `.avatar-list` container. It keeps consistent spacing between them and wraps them when there isn't enough space.
<Example centered>
<AvatarList>
@@ -274,7 +274,7 @@ Use the `.avatar-list` container to create a list of avatars within one parent c
## Stacked list
-Make the list stack once a certain number of avatars is reached to make it look clear and display well regardless of the screen size.
+Add `avatar-list-stacked` to overlap the avatars, which fits a long list of participants into a small space.
<Example centered>
<AvatarList stacked={true}> <span class="avatar">EB</span> <span class="avatar" style="background-image: url(/static/avatars/026m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/028m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/030m.jpg)"></span> <span class="avatar">+8</span> </AvatarList>
diff --git a/docs/content/ui/components/badge.mdx b/docs/content/ui/components/badge.mdx
index 7037730a4..207a27b9a 100644
--- a/docs/content/ui/components/badge.mdx
+++ b/docs/content/ui/components/badge.mdx
@@ -1,6 +1,6 @@
---
title: Badge
-summary: A badge is a small count and labeling component used to add extra information to an interface element. You can use it to draw user attention to a new element, notify about unread messages, or provide additional context.
+summary: A badge is a small label for a count, a status or a tag. It comes in colors, light and outline styles, pills, dots and notification badges.
description: Add badges to show counts, labels, or statuses. Use colors, outline and pill styles, links, and notification dots to add context.
related: [/ui/components/status, /ui/components/tag]
source: core/scss/ui/_badges.scss
@@ -64,7 +64,7 @@ Use the `.badge-list` container whenever you show more than one badge next to ea
## Headings
-Badges can be used in headings to draw attention to new or important information. You can use them in any heading level, from `<h1>` to `<h6>`. The example below shows how to use badges in headings.
+A badge scales with the heading it sits in, from `<h1>` to `<h6>`, so it can mark a section as new or in beta.
<Example>
<h1>Example heading <Badge text="New" /></h1>
@@ -77,7 +77,7 @@ Badges can be used in headings to draw attention to new or important information
## Light versions of badges
-You can use the `-lt` classes to create a light version of the badge. This is useful for creating a more subtle look.
+The `-lt` classes give a badge a light tint instead of a solid fill.
For example you can use the `bg-blue-lt` class to create a light blue badge. The class also sets the text color, so the label stays readable on the tint.
@@ -87,13 +87,13 @@ For example you can use the `bg-blue-lt` class to create a light blue badge. The
## Pill badges
-Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text.
+The `.badge-pill` class gives a badge fully rounded ends. Its width follows the label.
<Example centered>
<BadgeList>{colors.map(([key, val]) => <Badge color={key} text={val.title} class="badge-pill" />)}</BadgeList>
</Example>
-You can use it to create a pill with numbers, for example, to show the number of unread messages. The badge will adjust its width to the number of digits.
+A pill with a number works as a counter, for example for unread messages.
<Example centered>
<BadgeList>{colors.map(([key, val], i) => <Badge color={key} text={String(i + 1)} class="badge-pill" />)}</BadgeList>
@@ -101,7 +101,7 @@ You can use it to create a pill with numbers, for example, to show the number of
## Badges with icons
-You can use [icons](/ui/components/icon) in badges to make them more visually appealing. The example below demonstrates how to use icons in badges.
+A badge can hold an [icon](/ui/components/icon) in front of the text.
<Example centered>
<BadgeList>
@@ -114,7 +114,7 @@ You can use [icons](/ui/components/icon) in badges to make them more visually ap
</BadgeList>
</Example>
-You can also use an icon on the right side of the badge. The example below demonstrates how to use icons on the right side of badges.
+The icon can also go after the text.
<Example centered>
<BadgeList>
@@ -129,7 +129,7 @@ You can also use an icon on the right side of the badge. The example below demon
## Links
-Place the badge within an `<a>` element if you want it to perform the function of a link and make it clickable.
+Put the badge classes on an `<a>` element to make the badge a link.
<Example centered>
<BadgeList>
@@ -150,9 +150,9 @@ Place the badge within an `<a>` element if you want it to perform the function o
## Button with badge
-Badges can be used as parts of links or [buttons](/ui/components/button) to provide, for example, a counter. Use the `.badge-notification` class to create a notification badge. This class will position the badge in the top right corner of the button.
+A badge inside a [button](/ui/components/button) or a link works as a counter. Add the `.badge-notification` class to pin it to the top right corner of the control.
-If you don't provide text for the badge, you end up with a small dot. This is useful for creating a simple notification button.
+A notification badge with no text is a small dot, which is enough to say that something is new.
<Example centered>
<div class="btn-list">
@@ -164,7 +164,7 @@ If you don't provide text for the badge, you end up with a small dot. This is us
## Animated badges
-You can use the `.badge-blink` class to create a blinking effect. This class will add a CSS animation to the badge, so it will blink to draw attention.
+The `.badge-blink` class makes a badge blink with a CSS animation, for a live status or something the user must notice.
<Example centered>
<button type="button" class="btn">Profile <Badge text="" color="red" class="badge-notification badge-blink" /></button>
@@ -172,7 +172,7 @@ You can use the `.badge-blink` class to create a blinking effect. This class wil
## Size options
-Use `.badge-sm` or `.badge-lg` to change badge size according to your needs. The default size is `.badge` and it is used in the examples above.
+Use `.badge-sm` or `.badge-lg` to change the size. The examples above use the default.
<Example centered vertical>
<BadgeList>
@@ -237,7 +237,7 @@ A badge is text, not a control, so most of the work is in the words you put in i
## More examples
-If you want to see more examples of badges, you can check out the [Bootstrap documentation](https://getbootstrap.com/docs/5.3/components/badge/) for badges. You can also find more examples in the Tabler [Badges](https://preview.tabler.io/badges.html) preview.
+More examples are in the [Bootstrap documentation](https://getbootstrap.com/docs/5.3/components/badge/) and on the Tabler [Badges](https://preview.tabler.io/badges.html) preview page.
## SCSS variables
diff --git a/docs/content/ui/components/breadcrumb.mdx b/docs/content/ui/components/breadcrumb.mdx
index 62b1e17c6..58118aa0f 100644
--- a/docs/content/ui/components/breadcrumb.mdx
+++ b/docs/content/ui/components/breadcrumb.mdx
@@ -1,7 +1,7 @@
---
title: Breadcrumb
-summary: A breadcrumb is used to show the current website or app location and reduce the number of actions users need to take. It helps users navigate the website hierarchy and better understand its structure.
-description: Show the current page location with a breadcrumb trail. Help users navigate your site hierarchy and understand its structure.
+summary: A breadcrumb shows where the current page sits in the site hierarchy and links to the levels above it.
+description: A breadcrumb trail for the current page location, with separators, icons and a muted style.
related: [/ui/components/pagination]
source: core/scss/ui/_breadcrumbs.scss
classnames:
@@ -28,9 +28,7 @@ import CodeDocs from '@components/CodeDocs.astro';
## Default markup
-Use the `breadcrumb` class to add a breadcrumb to your interface design for better navigation. The `active` modifier in a `li` tag will help you indicate the current page location and facilitate navigation within your website or app.
-
-Look at the example below to see how breadcrumbs work in practice.
+Add the `breadcrumb` class to the list and `breadcrumb-item` to each item. Mark the current page with the `active` class on its `li`.
<Example centered>
<Breadcrumb pages={['Home', 'Library', 'Data']} />
@@ -38,9 +36,7 @@ Look at the example below to see how breadcrumbs work in practice.
## Different separators
-You can use different breadcrumb styles to match your website or app design. Choose between `breadcrumb-dots`, `breadcrumb-arrows`, and `breadcrumb-bullets` to create a unique look.
-
-This example shows how to use different breadcrumb styles.
+The separator is drawn in CSS and is a slash by default. `breadcrumb-dots`, `breadcrumb-arrows` and `breadcrumb-bullets` change it.
<Example vertical separated centered>
<Breadcrumb pages={['Home', 'Library', 'Data']} separator="dots" /> <Breadcrumb pages={['Home', 'Library', 'Data']} separator="arrows" /> <Breadcrumb pages={['Home', 'Library', 'Data']} separator="bullets" />
@@ -48,7 +44,7 @@ This example shows how to use different breadcrumb styles.
## With icon
-You can use [icons](/ui/components/icon) in breadcrumbs to make them more visually appealing. The example below demonstrates how to use icons in breadcrumbs.
+An item can hold an [icon](/ui/components/icon) next to or instead of the text.
<Example vertical separated>
<Breadcrumb pages={['Home', 'Library', 'Data']} homeIcon />
@@ -56,7 +52,7 @@ You can use [icons](/ui/components/icon) in breadcrumbs to make them more visual
## Muted breadcrumbs
-You can use the `breadcrumb-muted` class to create a muted breadcrumb style. This style is perfect for breadcrumbs that are not the main focus of your website or app.
+The `breadcrumb-muted` class renders the trail in the secondary text color, so it takes less attention than the page title next to it.
<Example>
<Breadcrumb pages={['Home', 'Library', 'Data']} class="breadcrumb-muted" />
@@ -64,7 +60,7 @@ You can use the `breadcrumb-muted` class to create a muted breadcrumb style. Thi
## Breadcrumb in headers
-You can use breadcrumbs in [headers](/ui/layout/page-headers) to show the current page location and provide a better navigation experience. The example below demonstrates how to use breadcrumbs in headers.
+A breadcrumb usually sits in the [page header](/ui/layout/page-headers), above the title:
<Example centered vertical>
<div class="page-header"> <div class="row align-items-center mw-100"> <div class="col"> <Breadcrumb pages={['Home', 'Library', 'Articles']} /> <h2 class="page-title"> <span class="text-truncate">How to Build a Modern Dashboard with Tabler</span> </h2> </div> <div class="col-auto"> <div class="btn-list"> <a href="#" class="btn d-none d-md-inline-flex"> <Icon name="edit" /> Edit </a> <a href="#" class="btn btn-primary">Publish</a> </div> </div> </div> </div>
diff --git a/docs/content/ui/components/button.mdx b/docs/content/ui/components/button.mdx
index 24a52dd95..32e90d3e6 100644
--- a/docs/content/ui/components/button.mdx
+++ b/docs/content/ui/components/button.mdx
@@ -1,7 +1,7 @@
---
title: Button
-summary: Use a button style that best suits your design and encourages users to take the desired action. You can customize button properties to improve user experience by changing size, shape, color, and more.
-description: Create buttons in many colors, sizes, and shapes. Add icons, loading states, and social styles to guide users to the right action.
+summary: Buttons in every color, size and shape, with icons, loading states, social styles and button groups.
+description: Buttons in many colors, sizes and shapes, with icons, loading states and social styles.
related: [/ui/components/dropdown]
source: core/scss/ui/_buttons.scss
classnames:
@@ -60,7 +60,7 @@ import CodeDocs from '@components/CodeDocs.astro';
## Button tag
-As one of the most common elements of UI design, buttons have a very important function of engaging users within your website or app and guiding them in their actions. Use the `.btn` classes with the `<button>` element and add additional styling that will make your buttons serve their purpose and draw users' attention.
+Add the `.btn` class to a `<button>` element. The other classes on this page change its color, shape and size, or add an icon, a badge or a loading state.
<Example centered>
<div class="btn-list">
@@ -74,7 +74,7 @@ As one of the most common elements of UI design, buttons have a very important f
## Default button
-The standard button creates a white background and subtle hover animation. It's meant to look and behave as an interactive element of your page.
+The default button has a white background, a border and a short hover animation.
<Example centered>
<a href="#" class="btn" role="button">Link</a>
@@ -82,7 +82,7 @@ The standard button creates a white background and subtle hover animation. It's
## Button variations
-Use the button classes that correspond to the function of your button. The big range of available colors will help you show your button's purpose and make it easy to spot.
+Pick the class that matches what the button does, for example `.btn-primary` for the main action on the page or `.btn-danger` for one that deletes something.
<Example separated centered>
<div class="btn-list">
@@ -99,7 +99,7 @@ Use the button classes that correspond to the function of your button. The big r
## Disabled buttons
-Make buttons look inactive to show that an action is possible once the user meets certain criteria, such as completing the required fields to submit a form.
+A disabled button shows that an action isn't available yet, for example until the required fields of a form are filled in.
On a `button` element use the `disabled` attribute. On a link the `disabled` class only changes how it looks, so add `aria-disabled="true"` and `tabindex="-1"` as well - otherwise the link still takes focus and still follows on Enter.
@@ -118,7 +118,7 @@ On a `button` element use the `disabled` attribute. On a link the `disabled` cla
## Color variations
-Choose the right color for your button to make it go well with your design and draw users' attention. Button colors can have a big influence on users' decisions, which is why it's important to choose them based on the intended purpose.
+Every theme color has a button class, so a button can match the color of the status, tag or chart it belongs to.
<Example separated centered>
<div class="btn-list">
@@ -139,7 +139,7 @@ Choose the right color for your button to make it go well with your design and d
## Ghost buttons
-Use the `.btn-ghost-*` class to make your button look simple yet aesthetically appealing. Ghost buttons help focus users' attention on the website's primary design, encouraging them to take action at the same time.
+The `.btn-ghost-*` classes give a button no border and no background until it's hovered. Use them for secondary actions that shouldn't compete with the main button.
<Example separated vertical>
<div class="btn-list">
@@ -164,7 +164,7 @@ Use the `.btn-square` class to remove the border radius, if you want the corners
## Pill buttons
-Add the `.btn-pill` class to your button to make it rounded and give it a modern and attractive look.
+Add the `.btn-pill` class to give a button fully rounded ends.
<Example centered>
<a href="#" class="btn btn-pill">Pill button</a>
@@ -172,7 +172,7 @@ Add the `.btn-pill` class to your button to make it rounded and give it a modern
## Outline buttons
-Replace the default modifier class with the `.btn-outline-*` class, if you want to remove the color and the background of your button and give it a more subtle look. Outline buttons are perfect to use as secondary buttons, as they don't distract users from the main action.
+The `.btn-outline-*` classes keep the color on the border and the text and leave the background empty. They work as secondary buttons next to a solid one.
<Example centered>
<div class="btn-list">
@@ -187,27 +187,20 @@ Replace the default modifier class with the `.btn-outline-*` class, if you want
</div>
</Example>
-## Button size
+## Button sizes
-Add `.btn-lg` or `.btn-sm` to change the size of your button and differentiate those which should have primary focus from those of secondary importance. Adapt the button size to your design and encourage users to take actions.
+Add `.btn-sm`, `.btn-lg` or `.btn-xl` to change the size. A larger button draws the eye to the main action, and a smaller one fits into toolbars and table rows.
-<Example centered>
-<div class="btn-list">
- <button type="button" class="btn btn-primary btn-lg">Large button</button>
- <button type="button" class="btn btn-lg">Large button</button>
-</div>
-</Example>
-
-<Example centered>
-<div class="btn-list">
- <button type="button" class="btn btn-primary btn-sm">Small button</button>
- <button type="button" class="btn btn-sm">Small button</button>
-</div>
+<Example separated centered vertical>
+<button type="button" class="btn btn-sm">Small button</button>
+<button type="button" class="btn">Default button</button>
+<button type="button" class="btn btn-lg">Large button</button>
+<button type="button" class="btn btn-xl">Extra large button</button>
</Example>
## Buttons with icons
-Label your button with text and add an icon to communicate the action and make it easy to identify for users. Icons are easily recognized and improve the aesthetics of your button design, giving it a modern and attractive look.
+Put an icon in front of the label to make the action easier to recognize at a glance. The button styles add the spacing between the two.
See all icons at [tabler.io/icons](https://tabler.io/icons).
@@ -224,7 +217,7 @@ See all icons at [tabler.io/icons](https://tabler.io/icons).
## Social buttons
-You can use the icons of popular social networking sites, which users are familiar with. Thanks to buttons with social media icons users can share content or follow a website with just one click, without leaving the website.
+Social buttons use the brand colors and icons of popular services, so a share or follow button is recognized at once.
<Example separated centered hideCode>
<div class="btn-list">
@@ -252,7 +245,7 @@ You can use the icons of popular social networking sites, which users are famili
</a>
```
-You can also add an icon without the name of a social networking site, if you want to display more buttons in a small space.
+You can also drop the name and keep only the icon, which fits more buttons into a small space.
<Example separated vertical hideCode>
<div class="btn-list">
@@ -293,7 +286,7 @@ You can also add an icon without the name of a social networking site, if you wa
## Icon buttons
-Add the `.btn-icon` class to remove unnecessary padding from your button and use an icon without any additional label. Thanks to that, you can save space and make the action easy to recognize for international users.
+Add the `.btn-icon` class for a button that holds only an icon. It removes the horizontal padding so the button is square. Give it an `aria-label`, because there is no text to read.
<Example separated centered hideCode>
<div class="btn-list">
@@ -315,7 +308,7 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
## Dropdown buttons
-Create a [dropdown](/ui/components/dropdown) button that will encourage users to click for more options. You can add a label with an icon or remove the label and add an icon on its own if you want to save space. Choose the option that will best suit your design and improve the user experience.
+A [dropdown](/ui/components/dropdown) button opens a menu with more options. It can have a label with an icon, or only an icon when space is tight.
<Example centered hideCode height="260px">
<div class="btn-list">
@@ -359,7 +352,7 @@ Create a [dropdown](/ui/components/dropdown) button that will encourage users to
## Loading buttons
-Add the `.btn-loading` class to show a button's loading state, which can be useful in the case of operations that take longer to process. Thanks to that, users will be aware of the current state of their action and won't give it up before it's finished.
+Add the `.btn-loading` class while an action is in progress, so the user sees that the click was registered and doesn't press again.
The class hides the label and draws a spinner in its place. It sets `pointer-events: none`, which stops the mouse but not the keyboard, so add `aria-busy="true"` and disable the control while it works.
@@ -376,7 +369,7 @@ The class hides the label and draws a spinner in its place. It sets `pointer-eve
## Full width buttons
-Add the `.w-100` class to make buttons span the full width of their container. This is useful for mobile-first designs or when you want buttons to take up the entire available space.
+Add the `.w-100` class to make a button span the full width of its container, for example the submit button of a sign-in form.
<Example separated>
<a href="#" class="btn btn-primary w-100">Full width button</a> <a href="#" class="btn btn-outline-secondary w-100">Full width outline button</a>
@@ -384,7 +377,7 @@ Add the `.w-100` class to make buttons span the full width of their container. T
## List of buttons
-Create a list of buttons using the `.btn-list` container to display different actions a user can take. If you add additional styling, such as colors, you will be able to focus users' attention on a particular action or suggest the result.
+Put several buttons in a `.btn-list` container to lay them out in a row with a consistent gap. Give one of them a color to mark it as the main action.
<Example centered>
<div class="btn-list">
@@ -420,7 +413,7 @@ If the list is long, it will be wrapped and some buttons will be moved to the ne
</div>
</Example>
-Use the `.text-center` or the `.text-end` modifiers to change the buttons' alignment and place them where they suit best.
+Use `.text-center` or `.text-end` on the list to change its alignment.
<Example>
<div class="btn-list justify-content-center">
@@ -458,7 +451,7 @@ Add [badges](/ui/components/badge) to buttons to display additional information
## Buttons with avatars
-Use buttons with [avatars](/ui/components/avatar) to simplify the process of interaction and make your design more personalized. Buttons can contain avatars and labels or only avatars, if displayed on a smaller space.
+A button can hold an [avatar](/ui/components/avatar) next to the label, or only the avatar when space is tight. Use it for actions tied to a person, such as opening a profile.
<Example centered>
<div class="btn-list">
@@ -470,7 +463,7 @@ Use buttons with [avatars](/ui/components/avatar) to simplify the process of int
## Buttons with animations on hover
-Add a subtle animation effect to your buttons when users hover over them. This can enhance the interactivity and provide visual feedback to improve the user experience.
+Add `.btn-animate-icon` to move the icon on hover. The `-rotate`, `-shake`, `-pulse`, `-tada` and `-move-start` variants change the motion, and `icon-end` places the icon after the text.
<Example>
<div class="btn-list">
@@ -486,20 +479,9 @@ Add a subtle animation effect to your buttons when users hover over them. This c
</div>
</Example>
-## Button sizes
-
-Use size modifiers to change the size of your buttons. Available sizes: `.btn-sm`, default, `.btn-lg`, `.btn-xl`.
-
-<Example separated centered vertical>
-<button type="button" class="btn btn-sm">Small button</button>
-<button type="button" class="btn">Default button</button>
-<button type="button" class="btn btn-lg">Large button</button>
-<button type="button" class="btn btn-xl">Extra large button</button>
-</Example>
-
## Link buttons
-Use the `.btn-link` class to create buttons that look like links but maintain button functionality. These are useful for secondary actions that shouldn't compete with primary buttons for attention.
+The `.btn-link` class makes a button look like a link while it keeps the button behavior. Use it for a secondary action next to a solid button, such as Cancel.
<Example centered>
<div class="btn-list">
@@ -510,7 +492,7 @@ Use the `.btn-link` class to create buttons that look like links but maintain bu
## Action buttons
-Use the `.btn-action` class to create subtle action buttons that are perfect for card headers, toolbars, or other interface elements where you want minimal visual impact. Always combine it with the `btn` class — use `btn btn-action`, never `btn-action` on its own. Add `btn-sm` for a smaller action button.
+The `.btn-action` class makes a small, quiet button for card headers and toolbars. Always combine it with the `btn` class: use `btn btn-action`, never `btn-action` on its own. Add `btn-sm` for a smaller one.
<Example centered>
<div class="btn-actions">
@@ -523,7 +505,7 @@ Use the `.btn-action` class to create subtle action buttons that are perfect for
## Action button groups
-Use the `.btn-actions` container to group multiple action buttons together. This creates a cohesive set of related actions that work well in card headers, toolbars, or other interface elements.
+Put several action buttons in a `.btn-actions` container to group them with a consistent gap, for example in a card header.
<Example centered>
<div class="btn-actions">
@@ -536,7 +518,7 @@ Use the `.btn-actions` container to group multiple action buttons together. This
## Button groups
-Use button groups to combine related buttons together. Button groups are perfect for creating toolbars, [segmented controls](/ui/components/segmented-control), or any interface where multiple related actions should be visually grouped.
+A button group joins related buttons into one bar with shared borders. Use it for toolbars and [segmented controls](/ui/components/segmented-control).
<Example centered>
<ButtonGroup>
diff --git a/docs/content/ui/components/card-gradient.mdx b/docs/content/ui/components/card-gradient.mdx
index b65521d5c..baad4ca6e 100644
--- a/docs/content/ui/components/card-gradient.mdx
+++ b/docs/content/ui/components/card-gradient.mdx
@@ -1,7 +1,7 @@
---
title: Card gradient
-summary: Card gradients add rich color backgrounds to cards and help emphasize key information in dashboards and marketing sections.
-description: Build eye-catching cards with gradient variants, directions, and animated backgrounds.
+summary: Card gradients give a card a colored gradient background, in single-color, multi-color, directional and animated variants.
+description: Gradient card backgrounds, with color variants, multi-color themes, directions and animation.
added-in: '1.5.0'
related: [/ui/components/card]
source: core/scss/ui/_cards.scss
@@ -11,7 +11,7 @@ classnames:
desc: Applied with card, fills the card with a gradient
style:
- class: card-gradient-{preset}
- desc: Ready-made blends — disco, gold, love, mellow, ocean, psychedelic, rainbow, snow, sun
+ desc: Ready-made blends - disco, gold, love, mellow, ocean, psychedelic, rainbow, snow, sun
behavior:
- class: card-gradient-animated
desc: Slowly shifts the gradient
@@ -38,7 +38,7 @@ Use the `.card-gradient` class on a `.card` element to apply the default gradien
<div class="card card-gradient">...</div>
```
-The example below shows the base gradient card style.
+The base gradient card:
<Example column>
<div class="card card-gradient">
@@ -51,7 +51,7 @@ The example below shows the base gradient card style.
## Color variants
-You can change the color of card gradient by adding a color class like `.card-gradient-primary` or `.card-gradient-success` to the `.card-gradient` element. You can choose any color from [full list of available colors](/ui/base/colors).
+Add a color class such as `.card-gradient-primary` or `.card-gradient-success` next to `.card-gradient`. Any name from the [color palette](/ui/base/colors) works.
<Example column>
<div class="card card-gradient card-gradient-primary">
@@ -78,9 +78,7 @@ You can change the color of card gradient by adding a color class like `.card-gr
## Named gradients
-In addition to color-based variants, card gradients include predefined multi-color themes.
-
-Here is a list of classes:
+There are also multi-color themes with their own names:
<ul>
{gradients.map((gradient, i) => { return ( <li class={`card-gradient-${gradient}`}>{gradient.charAt(0).toUpperCase() + gradient.slice(1)}</li> ) })}
</ul>
@@ -100,7 +98,7 @@ Here is a list of classes:
## Direction modifiers
-Use direction modifiers to control where the gradient flow starts.
+The direction classes set where the gradient starts.
```html
<div class="card card-gradient card-gradient-start">...</div>
diff --git a/docs/content/ui/components/card.mdx b/docs/content/ui/components/card.mdx
index 481dd145e..bd13804af 100644
--- a/docs/content/ui/components/card.mdx
+++ b/docs/content/ui/components/card.mdx
@@ -1,6 +1,6 @@
---
title: Card
-summary: A card is a flexible user interface element that helps organize content into meaningful sections and display it across different screen sizes. It can contain smaller elements such as images, text, links, and buttons, and can act as an entry point to more detailed information.
+summary: A card groups related content in one box, with an optional header, footer, image and actions, and it's the building block of most Tabler pages.
description: Organize content with flexible cards. Combine headers, footers, images, and actions to build sections that work on any screen size.
related: [/ui/components/card-gradient, /ui/components/ribbon]
source: core/scss/ui/_cards.scss
@@ -82,7 +82,7 @@ import CodeDocs from '@components/CodeDocs.astro';
## Default card
-Use the `.card` and `.card-body` classes to create a card and use it as the basis for a more advanced card design. A card is a perfect way to organize content and make it look neat and tidy.
+Use the `.card` and `.card-body` classes to create a card and use it as the basis for a more advanced card design. A card groups related content in one box with a border and a background, and it's the building block of most Tabler pages.
<Example column>
<div class="card">
@@ -94,7 +94,7 @@ Use the `.card` and `.card-body` classes to create a card and use it as the basi
You can change the padding of a newly created card. To do it, use the `.card-sm`, `.card-md` or `.card-lg` classes.
-Cards with the `.card-sm` class are well suited for small items such as widgets, etc., while the `.card-lg` class can be used for large blocks of text. Padding will be automatically reduced on small devices, to fit the screen size.
+`.card-sm` fits small items such as widgets, and `.card-lg` gives long text more room. On small screens the padding shrinks on its own.
<Example column>
<div class="card card-sm"><div class="card-body">This is some text within a card body.</div></div>
@@ -122,7 +122,7 @@ Add a title to your card by including the `.card-title` class within `.card-body
## Card with title and image
-To create a more visually appealing card, add a title and an image. Thanks to that, the card will go well with your interface design and draw users' attention.
+Combine a title with an image at the top. The image takes the full card width and the title sits in the body below it.
<Example column>
<div class="card">
@@ -136,7 +136,7 @@ To create a more visually appealing card, add a title and an image. Thanks to th
## Blog post card
-Add an image to your blog post card to make it eye-catching. You can do it by adding the image, with a `.card-img-top` class, inside the `.card` element. Thanks to the `.d-flex` and `.flex-column` classes within `.card-body`, the author details will be displayed at the bottom of the card.
+A blog post card puts an image with the `.card-img-top` class at the top of the `.card`. The `.d-flex` and `.flex-column` classes on `.card-body`, together with `mt-auto` on the author row, keep the author details at the bottom even when the excerpt is short.
<Example column>
<div class="card d-flex flex-column">
@@ -162,7 +162,7 @@ Add an image to your blog post card to make it eye-catching. You can do it by ad
## Row deck
-Add the `.row-deck` class to `.row`, if you want to display several cards next to one another. Thanks to that, they will all have the same height.
+Add the `.row-deck` class to `.row` to display several cards next to one another with the same height.
<Example>
<div class="row row-deck">
@@ -214,33 +214,6 @@ You can also put the image beside the text instead of above it. Use a `row row-0
</div>
</Example>
-## Color variations
-
-Add a status color to your card, either at the top or on the side of the card, to customize it and make it more eye-catching. Use `card-status-*` and `bg-*` classes to change the placement and color of the status border.
-
-<Example>
-<div class="row row-deck">
- <div class="col-md-6">
- <div class="card">
- <div class="card-status-top bg-danger"></div>
- <div class="card-body">
- <h3 class="card-title">Card with top status</h3>
- <p class="text-secondary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. </p>
- </div>
- </div>
- </div>
- <div class="col-md-6">
- <div class="card">
- <div class="card-status-start bg-green"></div>
- <div class="card-body">
- <h3 class="card-title">Card with side status</h3>
- <p class="text-secondary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. </p>
- </div>
- </div>
- </div>
-</div>
-</Example>
-
## Card stamp
Use a card stamp to put a large, faded icon in the top corner of a card. It is only a decoration, so it never covers the text and it does not react to clicks.
@@ -292,7 +265,7 @@ Add the `card-stamp-lg` class to make the stamp bigger. Change the circle color
## Stacked card
-Use the `card-stacked` class to stack up multiple cards, if you want to save screen space or create a visually appealing effect.
+The `card-stacked` class draws a second card edge behind the card, so it looks like a small pile. Use it to hint that there is more than one item, for example a group of similar entries.
<Example column>
<div class="card card-stacked">
@@ -305,7 +278,7 @@ Use the `card-stacked` class to stack up multiple cards, if you want to save scr
## Tabbed card
-Organize multiple cards into [tabs](/ui/components/tab) to be able to display more content in a well-organized way and allow users to alternate between them easily.
+Wrap several cards in `.card-tabs` and put a `.nav-tabs` list above them to switch between them with [tabs](/ui/components/tab). Only one card is visible at a time, so it's a way to fit more content into the same space.
<Example column>
<div class="card-tabs">
diff --git a/docs/content/ui/components/carousel.mdx b/docs/content/ui/components/carousel.mdx
index 431177f01..e824ea058 100644
--- a/docs/content/ui/components/carousel.mdx
+++ b/docs/content/ui/components/carousel.mdx
@@ -1,6 +1,6 @@
---
title: Carousel
-summary: A carousel is used to display multiple pieces of visual content without taking up too much space. It eliminates the need to scroll down the page to see all content and is a popular method of presenting marketing information.
+summary: A carousel shows several images or slides in the space of one, with arrows, indicators and captions.
description: Display multiple images or slides in a compact carousel with indicators, captions, and automatic or manual navigation.
related: [/ui/plugins/inline-player]
source: core/scss/ui/_carousel.scss
@@ -39,7 +39,7 @@ import CodeDocs from '@components/CodeDocs.astro';
## Default markup
-Use a carousel to make your website design more visually appealing for users. In the default carousel design, respective elements slide automatically and users can go to the next slide by clicking an arrow.
+The default carousel slides on its own and has an arrow on each side for going to the previous or the next slide.
<Example>
<div id="carousel-sample" class="carousel slide" data-bs-ride="carousel">
@@ -113,7 +113,7 @@ You can replace the standard indicators with dots. Just add the `carousel-indica
## Thumb indicators
-The syntax is similar for thumbnails. Add class `carousel-indicators-thumb` and add `background-image` to element `[data-bs-target]`. Default thumbnails have an aspect ratio of 1:1. To change this use `ratio` utils.
+Thumbnails work the same way. Add the `carousel-indicators-thumb` class and set a `background-image` on each `[data-bs-target]` element. Thumbnails are square by default; change that with the `ratio` utilities.
<Example>
<div id="carousel-indicators-thumb" class="carousel slide carousel-fade" data-bs-ride="carousel">
@@ -146,7 +146,7 @@ The syntax is similar for thumbnails. Add class `carousel-indicators-thumb` and
## Vertical indicators
-To make the indicators go to the right side, add the `carousel-indicators-vertical` class. You can combine it with other classes that are responsible for dots or thumbnails.
+Add the `carousel-indicators-vertical` class to stack the indicators on the right side. It combines with the dot and thumbnail classes.
<Example>
<div id="carousel-indicators-dot-vertical" class="carousel slide carousel-fade" data-bs-ride="carousel">
@@ -177,7 +177,7 @@ To make the indicators go to the right side, add the `carousel-indicators-vertic
</div>
</Example>
-An example of adding thumbnails on the right side:
+Thumbnails on the right side:
<Example>
<div id="carousel-indicators-thumb-vertical" class="carousel slide carousel-fade" data-bs-ride="carousel">
@@ -210,8 +210,9 @@ An example of adding thumbnails on the right side:
## Carousel with captions
-Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. To make the text more readable on the image you can add `carousel-caption-background` which will add a black overlay over the image.
-Below the `md` responsive breakpoint, the captions on the following example will be hidden as they have the `d-none` class applied to them.
+Put a `.carousel-caption` element inside a `.carousel-item` to add a caption. Add `carousel-caption-background` to lay a dark overlay over the image, so light text stays readable.
+
+The captions in this example have the `d-none` class, so they are hidden below the `md` breakpoint.
<Example>
<div id="carousel-captions" class="carousel slide" data-bs-ride="carousel">
diff --git a/docs/content/ui/components/chat.mdx b/docs/content/ui/components/chat.mdx
index 4d1c1834f..a961978db 100644
--- a/docs/content/ui/components/chat.mdx
+++ b/docs/content/ui/components/chat.mdx
@@ -84,7 +84,7 @@ Put the avatar and the bubble in the order you want them to read: avatar first f
### Typing indicator
-While you wait for a reply, show a bubble with `animated-dots` after the text — it types itself out and loops.
+While you wait for a reply, show a bubble with `animated-dots` after the text - it types itself out and loops.
<Example background="primary">
<div class="chat-bubble">
@@ -176,6 +176,6 @@ A card with a scrollable message list and a message input in the footer.
## Accessibility
- Keep messages in reading order in the markup. Screen reader users go through the conversation top to bottom, the same as sighted users see it top to bottom.
-- Do not rely on bubble color or side alone to show who sent a message — keep `chat-bubble-title` with the sender's name, or repeat it for assistive technology with a visually hidden label.
+- Do not rely on bubble color or side alone to show who sent a message - keep `chat-bubble-title` with the sender's name, or repeat it for assistive technology with a visually hidden label.
- Label icon-only controls in the message input, for example the send button, with `aria-label`.
-- The typing indicator is an animated "…" — pair it with real text such as "Alice is typing", so the state does not depend on the animation alone.
+- The typing indicator is an animated "…" - pair it with real text such as "Alice is typing", so the state does not depend on the animation alone.
diff --git a/docs/content/ui/components/divider.mdx b/docs/content/ui/components/divider.mdx
index 325416f98..46e4aa585 100644
--- a/docs/content/ui/components/divider.mdx
+++ b/docs/content/ui/components/divider.mdx
@@ -1,6 +1,6 @@
---
title: Divider
-summary: Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app.
+summary: A divider is a horizontal line between blocks of content, with an optional text label on the left, in the center or on the right.
description: Separate content with horizontal dividers. Add optional text labels aligned left, center, or right to keep layouts clear.
source: core/scss/ui/_type.scss
classnames:
@@ -26,7 +26,7 @@ import Example from '@components/Example.astro';
## Default markup
-Use dividers to visually separate content into parts. You can use a line only or add text that will be centered by default.
+The `.hr-text` element draws a line with a label in the middle. For a line without text, use a plain `hr`.
<Example>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.</p>
@@ -36,7 +36,7 @@ Use dividers to visually separate content into parts. You can use a line only or
## Text position
-You can modify the position of the text which is to be included in a separator and make it left- or right-aligned. Otherwise, the text will remain centered.
+Add `.hr-text-start` or `.hr-text-end` to move the label to the start or the end of the line. Without them it's centered.
<Example>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.</p>
@@ -50,7 +50,7 @@ You can modify the position of the text which is to be included in a separator a
## Divider color
-Customize the color of dividers to make them go well with your design. See the [full list of available colors](/ui/base/colors) for more details.
+A `text-*` class from the [color palette](/ui/base/colors) colors the divider.
<Example>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.</p>
diff --git a/docs/content/ui/components/dropdown.mdx b/docs/content/ui/components/dropdown.mdx
index 2f7aedb45..50a6b2043 100644
--- a/docs/content/ui/components/dropdown.mdx
+++ b/docs/content/ui/components/dropdown.mdx
@@ -1,6 +1,6 @@
---
title: Dropdown
-summary: A dropdown is used to display a list of options or include more items in a menu without overwhelming users with too many buttons and long lists. It improves interaction with your website or software and keeps the interface clear.
+summary: A dropdown is a menu that opens from a button or a link and holds options or actions, so the toolbar stays short.
description: Build dropdown menus that reveal lists of options or actions. Add icons, dividers, and custom triggers to keep the interface clean.
related: [/ui/components/button, /ui/components/popover]
source: core/scss/ui/_dropdowns.scss
@@ -50,7 +50,7 @@ import CodeDocs from '@components/CodeDocs.astro';
## Default dropdown
-With small markup changes, you can turn any `.btn` into a dropdown toggle and use it to display more options for users to choose from. Start with the default dropdown and then use additional classes to make your dropdown more user-friendly.
+Any `.btn` becomes a dropdown toggle with `data-bs-toggle="dropdown"` and a `.dropdown-menu` next to it. The classes below add dividers, headers, icons and other details to the menu.
<Example height="220px">
<div class="dropdown">
@@ -65,7 +65,7 @@ With small markup changes, you can turn any `.btn` into a dropdown toggle and us
## Dropdown divider
-Use dropdown dividers to separate groups of dropdown items for greater clarity.
+A `.dropdown-divider` separates groups of items.
<Example height="240px">
<div class="dropdown">
@@ -81,7 +81,7 @@ Use dropdown dividers to separate groups of dropdown items for greater clarity.
## Active state
-Make a dropdown item look active, so that it highlights when a user hovers over a given option.
+The `active` class marks the current item.
<Example height="220px">
<div class="dropdown">
@@ -96,7 +96,7 @@ Make a dropdown item look active, so that it highlights when a user hovers over
## Disabled state
-Make a dropdown item look disabled to display options which are currently not available but can activate once certain conditions are met.
+The `disabled` class shows an item that isn't available right now.
<Example height="220px">
<div class="dropdown">
@@ -111,7 +111,7 @@ Make a dropdown item look disabled to display options which are currently not av
## Dropdown header
-Add a dropdown header to group dropdown items into sections and name them accordingly.
+A `.dropdown-header` names a group of items.
<Example height="210px">
<div class="dropdown">
@@ -126,7 +126,7 @@ Add a dropdown header to group dropdown items into sections and name them accord
## Dropdown with icons
-Use [icons](/ui/components/icon) in your dropdowns to add more visual content and make the options easy to identify for users.
+An [icon](/ui/components/icon) in front of each item makes the options faster to scan.
<Example height="210px">
<div class="dropdown">
@@ -159,7 +159,7 @@ Add an arrow that points at the dropdown button.
## Dropdown with badge
-Add a [badge](/ui/components/badge) to your dropdown items to show additional information related to an item or distinguish it from other elements.
+A [badge](/ui/components/badge) in an item shows a count or a status next to it.
<Example height="190px">
<div class="dropdown">
@@ -173,7 +173,7 @@ Add a [badge](/ui/components/badge) to your dropdown items to show additional in
## Dropdown with checkboxes
-Use dropdowns with [checkboxes](/ui/forms/elements) to allow users to select options from a predefined list. Dropdowns with checkboxes are particularly useful for filtering.
+Items can hold [checkboxes](/ui/forms/elements), which makes a dropdown work as a filter.
<Example height="220px">
<div class="dropdown">
@@ -188,7 +188,7 @@ Use dropdowns with [checkboxes](/ui/forms/elements) to allow users to select opt
## Dark dropdown
-Make your dropdown suit the dark mode of your website or software.
+Add `dropdown-menu-dark` to the menu for a dark menu on a light page.
<Example height="220px">
<div class="dropdown">
@@ -207,7 +207,7 @@ Make your dropdown suit the dark mode of your website or software.
## Dropdown with card content
-Use a dropdown with [card](/ui/components/card) content to make it easy for users to get more information on a given subject and avoid ovewhelming them with too much content at once.
+A menu can hold [card](/ui/components/card) content, such as a short profile or a summary, when a plain list isn't enough.
<Example height="520px">
<div class="dropdown">
@@ -297,7 +297,7 @@ Tabler automatically initializes all elements with `data-bs-toggle="dropdown"` o
- The trigger must be a `button`, or an `a` with an `href`. Bootstrap toggles `aria-expanded` on it for you, so do not set it by hand.
- Bootstrap moves focus into the menu and supports the arrow keys, <kbd>Home</kbd>, <kbd>End</kbd> and <kbd>Escape</kbd>. That only works while the items are `.dropdown-item` elements inside `.dropdown-menu`.
- An icon-only trigger needs an `aria-label`. The caret is decorative and carries no name.
-- A dropdown used as a menu of actions should hold `button` items; one used for navigation should hold links. Mixing them makes the keyboard behaviour inconsistent.
+- A dropdown used as a menu of actions should hold `button` items; one used for navigation should hold links. Mixing them makes the keyboard behavior inconsistent.
- Use `.dropdown-header` for a group title and `.dropdown-divider` for a separator, rather than styling a plain item to look like one.
## SCSS variables
diff --git a/docs/content/ui/components/empty.mdx b/docs/content/ui/components/empty.mdx
index de6a2e38e..96e4da5e9 100644
--- a/docs/content/ui/components/empty.mdx
+++ b/docs/content/ui/components/empty.mdx
@@ -1,7 +1,7 @@
---
title: Empty state
-summary: An empty state or blank page is commonly used as a placeholder for first-use, empty data, or an error screen. Its goal is to engage users when there is no content to display, which makes its design important for the overall user experience of your website or app.
-description: Design empty states that guide users when there is no content to show. Combine images, text, and actions for first-use and error screens.
+summary: An empty state is the placeholder shown when there is no content yet, on first use, after a search with no results or on an error screen.
+description: Empty states for first use, no results and error screens, with an image, text and an action.
related: [/ui/components/placeholder]
source: core/scss/ui/_empty.scss
classnames:
@@ -32,7 +32,7 @@ import Icon from '@ui/Icon.astro'
## Default markup
-Use the default empty state to engage users in the critical moments of their experience with your website or app. A good empty state screen should let users know what is happening and what they should do next as well as encourage them to take action.
+An empty state should say what happened and what to do next. The default markup has an icon, a title, a short text and an action button.
<Example>
<div class="empty">
@@ -47,9 +47,9 @@ Use the default empty state to engage users in the critical moments of their exp
## Empty state with illustration
-Make your empty state screen more attractive and engaging by adding an illustration. Thanks to a more personalized design, you will improve your brand image and make your website or app more user friendly.
+Replace the icon with an illustration when the empty state fills a whole page and there's room for a larger picture.
-Do you need an illustration to enhance your web designs? We've got something for you! Check out our premium SVG [illustrations](https://tabler.io/illustrations).
+The illustrations in the examples come from [Tabler Illustrations](https://tabler.io/illustrations).
<Example>
<div class="empty">
@@ -64,7 +64,7 @@ Do you need an illustration to enhance your web designs? We've got something for
## Empty state with header
-Instead of adding an icon or illustration you can simply give the text:
+You can also leave out the icon or illustration and show only the text:
<Example>
<div class="empty">
diff --git a/docs/content/ui/components/icon.mdx b/docs/content/ui/components/icon.mdx
index 5c3dd43cb..b3274773f 100644
--- a/docs/content/ui/components/icon.mdx
+++ b/docs/content/ui/components/icon.mdx
@@ -1,6 +1,6 @@
---
title: Icon
-summary: Use an icon from over 5000 options created specifically for Tabler to make your dashboard more attractive. Each icon is available under the MIT license, so it can be used in both private and commercial projects.
+summary: Tabler Icons are over 5,000 MIT-licensed SVG icons drawn for Tabler. This page shows how to embed, size, color and animate them.
description: Use over 5000 free MIT-licensed Tabler icons in your interface. Learn how to embed, size, and animate them in your projects.
related: [/ui/components/switch-icon]
source: core/scss/ui/_icons.scss
@@ -31,7 +31,7 @@ classnames:
import Example from '@components/Example.astro';
import Icon from '@ui/Icon.astro';
-If you need to add icons to your website, you can use the [Tabler Icons library](https://tabler.io/icons). It contains over 5000 icons that you can use in your projects. All icons are under the MIT license, so you can use them without any problem both in private and commercial projects.
+The [Tabler Icons library](https://tabler.io/icons) has over 5,000 icons under the MIT license, so you can use them in private and commercial projects.
## Base icon
@@ -46,7 +46,7 @@ To add an icon to your code copy the SVG code from the Tabler Icons website and
## Filled icons
-To use filled icons, you need to copy the SVG code of the selected filled Icon from the [Tabler Icons website](https://tabler.io/icons) and paste it into your HTML file.
+Filled icons are separate files. Copy the SVG code of the filled version from the [Tabler Icons website](https://tabler.io/icons).
To fill an outline icon instead of swapping it, add the `icon-filled` class. It sets `fill: currentColor`, so the shape is filled with the current text color.
@@ -77,7 +77,7 @@ Add `icon-inline` when the icon sits inside a line of text, so it lines up with
## Icon colors
-To change the color of the icon, you need to add the `text-*` class to the parent element of the icon. See the [full list of available colors](/ui/base/colors) for more details. Color classes can be used with any HTML element.
+Add a `text-*` class from the [color palette](/ui/base/colors) to the icon or its parent to change its color.
```html
<span class="text-red">
@@ -85,8 +85,6 @@ To change the color of the icon, you need to add the `text-*` class to the paren
</span>
```
-Look at the example below to see how the color of the icon changes.
-
<Example centered>
<span class="text-red"><Icon name="heart" filled /></span>
<span class="text-yellow"><Icon name="star" filled /></span>
@@ -96,7 +94,7 @@ Look at the example below to see how the color of the icon changes.
## Icon animations
-To add an animation to the icon, you need to add the `icon-pulse`, `icon-tada`, or `icon-rotate` class to the SVG element.
+Add `icon-pulse`, `icon-tada` or `icon-rotate` to the SVG to animate it.
<Example centered>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-pulse" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
diff --git a/docs/content/ui/components/index.mdx b/docs/content/ui/components/index.mdx
index 9365c434a..67b8e312c 100644
--- a/docs/content/ui/components/index.mdx
+++ b/docs/content/ui/components/index.mdx
@@ -2,7 +2,7 @@
title: Components
order: 4
description: Browse all Tabler UI components - buttons, cards, modals, tables, and more - with live previews and ready-to-copy HTML code.
-summary: Tabler UI includes a variety of components to help you build web applications that are both functional and visually appealing. From buttons and cards to modals and navigation, these components provide a wide range of features to enhance your site.
+summary: All Tabler UI components, from buttons and cards to modals and navigation, each with live previews and copyable HTML.
---
Components are the core of Tabler UI. Each one is built with plain HTML and CSS classes on top of Bootstrap, so you can copy an example and use it right away. Every page below shows live previews with ready-to-copy code.
diff --git a/docs/content/ui/components/list-group.mdx b/docs/content/ui/components/list-group.mdx
index 5279c8e2d..37b2377a5 100644
--- a/docs/content/ui/components/list-group.mdx
+++ b/docs/content/ui/components/list-group.mdx
@@ -264,7 +264,7 @@ This pattern joins several variants: a flush list inside a card, hoverable rows,
## Inline list
-`list-inline` is a separate, simpler pattern for a row of items — for example a footer or a page header with a few links. It is not a `list-group`: items have no border or background, only spacing between them.
+`list-inline` is a separate, simpler pattern for a row of items - for example a footer or a page header with a few links. It is not a `list-group`: items have no border or background, only spacing between them.
Use `list-inline` on a `ul` and `list-inline-item` on each `li`.
diff --git a/docs/content/ui/components/modal.mdx b/docs/content/ui/components/modal.mdx
index a14eb503c..f1459a754 100644
--- a/docs/content/ui/components/modal.mdx
+++ b/docs/content/ui/components/modal.mdx
@@ -1,6 +1,6 @@
---
title: Modal
-summary: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
+summary: A modal is a dialog shown over the page, for a confirmation, a form or other content the user has to deal with before going back to the page.
description: Create modal dialogs for notifications, confirmations, and custom content. Adjust sizes, add forms, and control them with JavaScript.
related: [/ui/components/offcanvas, /ui/components/toast]
source: core/scss/ui/_modals.scss
@@ -47,11 +47,11 @@ import Example from '@components/Example.astro';
import Icon from '@ui/Icon.astro';
import CodeDocs from '@components/CodeDocs.astro';
-Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the `<body>` so that modal content scrolls instead.
+Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the `<body>` so that modal content scrolls instead.
## Default markup
-To create a modal, you need to add a `.modal` element to the document. Inside the `.modal`, you need to add a `.modal-dialog` element, which contains a `.modal-content` element. The `.modal-content` element contains the modal’s header, body, and footer.
+To create a modal, you need to add a `.modal` element to the document. Inside the `.modal`, you need to add a `.modal-dialog` element, which contains a `.modal-content` element. The `.modal-content` element contains the modal's header, body, and footer.
```html
<div class="modal" tabindex="-1">
@@ -65,8 +65,6 @@ To create a modal, you need to add a `.modal` element to the document. Inside th
</div>
```
-Look at the example below to see how the modal looks.
-
<Example centered>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch demo modal</button>
<div class="modal" id="exampleModal" tabindex="-1">
@@ -88,7 +86,7 @@ Look at the example below to see how the modal looks.
## Prompt and alert
-You can use the modal to create a prompt or alert. Look at the example below to see how the prompt and alert look.
+A modal also works as a prompt or an alert: a short message with one or two buttons.
<Example raw>
<div class="modal" id="exampleModal2" tabindex="-1">
@@ -152,7 +150,7 @@ You can use the modal to create a prompt or alert. Look at the example below to
## Modal with form
-You can use the modal to create a form. Look at the example below to see how the form looks.
+A form inside a modal keeps the user on the page. Put the fields in the body and the submit button in the footer.
<Example raw class="px-5">
<div class="modal" id="exampleModal4" tabindex="-1">
diff --git a/docs/content/ui/components/offcanvas.mdx b/docs/content/ui/components/offcanvas.mdx
index d183fd1df..34873c6e7 100644
--- a/docs/content/ui/components/offcanvas.mdx
+++ b/docs/content/ui/components/offcanvas.mdx
@@ -1,6 +1,6 @@
---
title: Offcanvas
-summary: Offcanvas is a hidden sidebar that slides into view from the edge of the screen. Use it for navigation, filters or settings that should not take up space all the time.
+summary: An offcanvas is a hidden panel that slides in from the edge of the screen, for navigation, filters or settings.
description: Sidebar panel that slides in from the edge of the viewport.
related: [/ui/components/modal]
source: core/scss/ui/_offcanvas.scss
@@ -36,11 +36,11 @@ classnames:
import Example from '@components/Example.astro';
import CodeDocs from '@components/CodeDocs.astro';
-Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript.
+An offcanvas is a panel that slides in from the left, right, top or bottom edge of the viewport. A button or a link with `data-bs-toggle="offcanvas"` and `data-bs-target` opens it, and Bootstrap's JavaScript does the rest.
## Basic usage
-To create an offcanvas, add the `.offcanvas` class to a container element. You can also add the `.offcanvas-start`, `.offcanvas-end`, `.offcanvas-top`, or `.offcanvas-bottom` class to specify the position of the offcanvas. The `.show` class is used to display the offcanvas.
+Add the `.offcanvas` class to the panel and one of `.offcanvas-start`, `.offcanvas-end`, `.offcanvas-top` or `.offcanvas-bottom` for the edge it slides in from. Bootstrap adds the `.show` class while the panel is open.
<Example raw code={`<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-label="Sidebar" data-bs-scroll="true"> <div class="offcanvas-body"> Content for the offcanvas goes here. You can place just about any Tabler component or custom elements here. </div> </div>`}>
<div class="offcanvas offcanvas-start show position-static" tabindex="-1" id="offcanvas" aria-label="Sidebar" data-bs-scroll="true" > <div class="offcanvas-body"> Content for the offcanvas goes here. You can place just about any Tabler component or custom elements here. </div> </div>
@@ -66,7 +66,7 @@ Add `offcanvas-narrow` for a panel thinner than the default. It suits a short li
## Cookies banner
-The offcanvas component is used to display a cookies banner. It is a great way to inform users about the use of cookies on your website and to get their consent.
+An offcanvas at the bottom edge also works as a cookie banner. It stays visible until the user answers, and it doesn't cover the page.
<Example raw code={`<div class="offcanvas offcanvas-bottom h-auto" tabindex="-1" id="offcanvasBottom" aria-modal="true" role="dialog" data-bs-scroll="true"> <div class="offcanvas-body"> <div class="container"> <div class="row align-items-center"> <div class="col"> <strong>Do you like cookies?</strong> 🍪 We use cookies to ensure you get the best experience on our website. <a href="#">Learn more</a> </div> <div class="col-auto"> <button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas"> Essential Cookies Only </button> </div> <div class="col-auto"> <button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas"> Allow All Cookies </button> </div> </div> </div> </div> </div>`}>
<div class="offcanvas offcanvas-bottom h-auto show position-static" tabindex="-1" id="offcanvasBottom" aria-modal="true" role="dialog" data-bs-scroll="true" > <div class="offcanvas-body"> <div class="container"> <div class="row align-items-center"> <div class="col"> <strong>Do you like cookies?</strong> 🍪 We use cookies to ensure you get the best experience on our website. <a href="#">Learn more</a> </div> <div class="col-auto"> <button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas"> Essential Cookies Only </button> </div> <div class="col-auto"> <button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas"> Allow All Cookies </button> </div> </div> </div> </div> </div>
diff --git a/docs/content/ui/components/pagination.mdx b/docs/content/ui/components/pagination.mdx
index ee918c2b0..643fe16dd 100644
--- a/docs/content/ui/components/pagination.mdx
+++ b/docs/content/ui/components/pagination.mdx
@@ -1,6 +1,6 @@
---
title: Pagination
-summary: Pagination is a user interface element that allows users to navigate through a set of data or content that is divided into multiple pages. It is commonly used in web applications, blogs, and e-commerce sites to display large amounts of information in a manageable way.
+summary: Pagination splits a long list or table into pages and lets the user move between them, with sizes, icons and disabled states.
description: Navigate through multi-page content with pagination controls.
related: [/ui/components/table]
source: core/scss/ui/_pagination.scss
@@ -34,7 +34,7 @@ import CodeDocs from '@components/CodeDocs.astro';
## Basic example
-Use slightly customized pagination with previous and next icon links:
+The basic pagination has page numbers with previous and next icon links:
<Example centered vertical>
<Pagination count={5} activeItem={3} />
@@ -42,7 +42,7 @@ Use slightly customized pagination with previous and next icon links:
## With first and last links
-When you have a lot of pages, you can use first and last links to quickly navigate to the beginning or end of the pagination.
+With many pages, add first and last links to jump to either end.
<Example centered vertical>
<Pagination count={5} activeItem={3} firstLast />
@@ -50,7 +50,7 @@ When you have a lot of pages, you can use first and last links to quickly naviga
## Offset
-If the count of pages is too large, you can use offset to show only a few pages at a time.
+When there are too many pages to list, show only a few around the current one.
<Example centered vertical>
<Pagination offset={3} count={20} activeItem={3} />
@@ -58,7 +58,7 @@ If the count of pages is too large, you can use offset to show only a few pages
## Button with text
-When you want to use pagination with text, you can use text buttons. This will give you a more traditional look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.
+Text buttons give the previous and next links a label instead of an icon.
<Example centered vertical>
<Pagination count={5} activeItem={3} text />
@@ -66,7 +66,7 @@ When you want to use pagination with text, you can use text buttons. This will g
## Outline version
-If you want to use an outline version of the pagination, you can use the `.pagination-outline` class. This will give you a more subtle look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.
+The `.pagination-outline` class draws the items with a border and no fill.
<Example centered vertical>
<Pagination count={5} activeItem={3} class="pagination-outline" />
@@ -74,7 +74,7 @@ If you want to use an outline version of the pagination, you can use the `.pagin
## Circle version
-If you want to use a circle version of the pagination, you can use the `.pagination-circle` class. This will give you a more subtle look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation. This can also be combined with the `.pagination-outline` class for a more prominent look.
+The `.pagination-circle` class makes each item round. It combines with `.pagination-outline`.
<Example centered vertical separated>
<Pagination count={5} activeItem={3} class="pagination-circle" /> <Pagination count={5} activeItem={3} class="pagination-circle pagination-outline" />
diff --git a/docs/content/ui/components/placeholder.mdx b/docs/content/ui/components/placeholder.mdx
index 56f5eec8e..dad3c3e7f 100644
--- a/docs/content/ui/components/placeholder.mdx
+++ b/docs/content/ui/components/placeholder.mdx
@@ -35,7 +35,7 @@ Placeholder lines can contain lines of text. Their length is different and depen
<div class="placeholder col-8"></div>
</Example>
-However, it may be useful to specify the full width in order to fit the content more effectively.
+Use `col-12` for lines that will span the whole width:
<Example column>
<div class="placeholder col-12"></div>
@@ -83,7 +83,7 @@ You can use a placeholder that will look like an [avatar](/ui/components/avatar)
</div>
</Example>
-You can also use the `avatar` component with different sizes. Look at the example below to see how the avatar placeholder looks.
+The avatar size classes work here too:
<Example centered>
<div class="avatar-list">
diff --git a/docs/content/ui/components/popover.mdx b/docs/content/ui/components/popover.mdx
index 178996be6..47506660c 100644
--- a/docs/content/ui/components/popover.mdx
+++ b/docs/content/ui/components/popover.mdx
@@ -1,6 +1,6 @@
---
title: Popover
-summary: A popover is used to provide additional information for elements where a simple tooltip is not sufficient.
+summary: A popover is a small overlay with a title and a body, for information that doesn't fit in a tooltip.
description: Show extra information in popovers when a tooltip is not enough. Set the placement and trigger to control how they appear.
related: [/ui/components/tooltip, /ui/components/dropdown]
source: core/scss/ui/_popovers.scss
@@ -42,7 +42,7 @@ Four options are available: `top`, `right`, `bottom`, and `left` aligned. Direct
## Popover on hover
-Popover can be triggered in one or more of the following styles: `manual`, with a `click`, on `focus`, and on `hover`. This one reacts on hover. See more details on the Popover component page of [Bootstrap's documentation](https://getbootstrap.com/docs)
+A popover can open on `click`, `hover`, `focus` or `manual`, set with `data-bs-trigger`. This one opens on hover. See the [Bootstrap documentation](https://getbootstrap.com/docs) for the details.
<Example centered>
<button type="button" class="btn btn-primary" data-bs-trigger="hover" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?"> Hover to toggle popover </button>
@@ -58,7 +58,7 @@ Tabler automatically initializes all elements with `data-bs-toggle="popover"` on
- The trigger must be a `button` or a link with an `href`, so it can take focus. Bootstrap manages `aria-describedby` while the popover is open.
- Popovers open on click by default, which is what makes their content reachable. If you switch to `data-bs-trigger="hover"`, the content becomes unreachable by keyboard.
-- Set `data-bs-trigger="focus"` to make a popover dismiss itself when focus leaves, which is the closest thing to <kbd>Escape</kbd> behaviour.
+- Set `data-bs-trigger="focus"` to make a popover dismiss itself when focus leaves, which is the closest thing to <kbd>Escape</kbd> behavior.
- Tabler enables HTML in a popover only when you set `data-bs-html="true"`. Leave it off for content that comes from users.
- Keep the title and body as text. A popover holding a form is a modal in disguise - use a real dialog for that.
diff --git a/docs/content/ui/components/progress-step.mdx b/docs/content/ui/components/progress-step.mdx
index 1efddf8d6..2f231b232 100644
--- a/docs/content/ui/components/progress-step.mdx
+++ b/docs/content/ui/components/progress-step.mdx
@@ -1,6 +1,6 @@
---
title: Progress steps
-summary: A progress step helps users track their place in a short process by breaking it into clear, simple steps. This makes flows like setup or onboarding easier to follow and finish.
+summary: Progress steps show where the user is in a short flow such as setup or onboarding, with done, active and upcoming steps.
description: Use progress steps to display compact onboarding, checkout, and setup progress.
added-in: '1.5.0'
related: [/ui/components/progress, /ui/components/step]
@@ -18,7 +18,7 @@ import ProgressSteps from '@ui/ProgressSteps.astro';
## Default markup
-Use `.progress-steps` as the container and `.progress-steps-item` for each segment. These two classes are enough to create the base component structure.
+Use `.progress-steps` as the container and `.progress-steps-item` for each segment.
```html
<ol class="progress-steps" aria-label="Onboarding progress">
@@ -28,7 +28,7 @@ Use `.progress-steps` as the container and `.progress-steps-item` for each segme
</ol>
```
-The example below shows the default progress step structure.
+The default structure:
<Example>
<ol class="progress-steps" aria-label="Onboarding progress">
@@ -59,7 +59,7 @@ Use hidden labels so assistive technologies can announce meaningful step names.
### Color state
-Use contextual background classes on completed and current items. This helps match state color to your flow semantics.
+Use contextual background classes on completed and current items to match the state colors of your flow.
<Example>
<div class="mb-2">
@@ -101,4 +101,4 @@ Use utility classes on `.progress-steps` to control width and placement in layou
- Say where the user is in text as well - "Step 2 of 4" next to the bar, or in a `visually-hidden` span. The filled shape alone does not carry it.
- Mark the current step with `aria-current="step"`.
- If you use the underlying progress bar to draw the line, give it `role="progressbar"` with the step number as `aria-valuenow` and the total as `aria-valuemax`.
-- Do not rely on the colour of a circle to say "done". Add an icon or a word.
+- Do not rely on the color of a circle to say "done". Add an icon or a word.
diff --git a/docs/content/ui/components/progress.mdx b/docs/content/ui/components/progress.mdx
index d7c12c644..f16b8365d 100644
--- a/docs/content/ui/components/progress.mdx
+++ b/docs/content/ui/components/progress.mdx
@@ -1,6 +1,6 @@
---
title: Progress bar
-summary: A progress bar is used to provide feedback on an action status and inform users about current progress. Although it is a small interface element, it is extremely helpful in managing user expectations and preventing abandonment of an initiated process.
+summary: A progress bar shows how much of a task is done. It comes in sizes and colors, and in stacked, striped, animated and indeterminate variants.
description: Show task progress with progress bars. Set the value, color, and size, or use indeterminate bars for unknown durations.
related: [/ui/components/progress-step, /ui/components/spinner]
source: core/scss/ui/_progress.scss
@@ -41,7 +41,7 @@ import CodeDocs from '@components/CodeDocs.astro';
## Default markup
-To create a default progress bar, add a `.progress` class to a `<div>` element. Thanks to that, you will be able to notify users how long they have to wait for a process to complete.
+Add the `.progress` class to a `<div>` and put a `.progress-bar` inside it. The width of the inner bar is the value.
<Example>
<div class="progress">
@@ -53,14 +53,12 @@ To create a default progress bar, add a `.progress` class to a `<div>` element.
## Progress size
-Using Bootstrap’s typical naming structure, you can create a standard progress bar or scale it up or down to different sizes based on what’s needed.
+Add a size class such as `.progress-sm` to make the bar thinner or thicker. The names follow the usual Bootstrap pattern.
```html
<div class="progress progress-sm">...</div>
```
-Look at the example below to see how it works:
-
<Example columnFullWidth>
<div class="progress progress-sm">
<div class="progress-bar" style="width: 57%" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100" aria-label="57% Complete">
@@ -110,7 +108,7 @@ You can create a progress bar which shows indeterminate progress by adding `.pro
## Native progress element
-You can also use the native HTML5 `<progress>` element. It is a great way to create a progress bar without the need for additional HTML elements. This is what it looks like:
+The native `<progress>` element is styled too, so you can use it without any extra markup:
<Example>
<progress class="progress progress-sm" value="15" max="100" />
@@ -118,7 +116,7 @@ You can also use the native HTML5 `<progress>` element. It is a great way to cre
## Progress color
-You can change the color of the progress bar by adding a color class to the `.progress-bar` element. You can use the color classes like `.bg-primary`, `.bg-success`, etc. to change the color of the progress bar.
+Add a `bg-*` class such as `.bg-success` to the `.progress-bar` to change its color.
See the [full list of available colors](/ui/base/colors) for more details.
@@ -147,7 +145,7 @@ See the [full list of available colors](/ui/base/colors) for more details.
## Multiple progress bars
-You can stack multiple progress bars on top of each other to create a visually appealing design. This can be done by adding multiple `.progress` elements inside a `.progress-stacked` container.
+Put several `.progress` elements inside a `.progress-stacked` container to show the parts of a whole in one bar, for example the share of each file type in the used storage.
```html
<div class="progress-stacked">
@@ -155,8 +153,6 @@ You can stack multiple progress bars on top of each other to create a visually a
</div>
```
-This is how it looks:
-
<Example vertical column>
<div class="progress-stacked">
<div class="progress" style="width: 15%" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" aria-label="15% of total">
@@ -218,10 +214,9 @@ Use `.progress-separated` to make stacked segments easier to read when values ar
## Progress background
-By using a progress bar component as a background element, designers can create a dynamic and engaging visual experience for users. For example, the progress bar could be used to represent the completion of a long-term goal or project, such as a fundraising campaign or construction project. As users interact with the
-page, the progress bar could gradually fill up, creating a sense of momentum and progress.
+A progress bar can also be the background of a row or a tile, so the row itself fills up as the value grows. It suits a ranking or a long-running goal, such as a fundraising target.
-Thanks to this you can create a nice looking statistics section:
+This example uses it for a ranking of countries:
<Example columnFullWidth>
<ProgressBg value={65} text="Poland" showValue />
@@ -241,7 +236,7 @@ You can combine progress background with contextual light colors to better separ
## Accessibility
-- Put `role="progressbar"` with `aria-valuenow`, `aria-valuemin` and `aria-valuemax` on the element that carries the value, and give it an `aria-label`. Without them a bar is a coloured box with no meaning.
+- Put `role="progressbar"` with `aria-valuenow`, `aria-valuemin` and `aria-valuemax` on the element that carries the value, and give it an `aria-label`. Without them a bar is a colored box with no meaning.
- On a stacked bar the width sits on each `.progress` segment, so the role and the value belong there, not on the inner `.progress-bar`.
- An indeterminate bar keeps the role but has no `aria-valuenow`. A missing value is what says "unknown", while `aria-valuenow="0"` says "nothing done yet".
- Repeat the number in text next to the bar, or in a `visually-hidden` span inside it. Not every screen reader announces a progress value on its own.
diff --git a/docs/content/ui/components/ribbon.mdx b/docs/content/ui/components/ribbon.mdx
index f48c90cf1..f717e398f 100644
--- a/docs/content/ui/components/ribbon.mdx
+++ b/docs/content/ui/components/ribbon.mdx
@@ -1,6 +1,6 @@
---
title: Ribbon
-summary: A ribbon is a graphical element that attracts user attention to a given interface element and makes it stand out.
+summary: A ribbon is a small label pinned to the edge of a card, for a status such as new or featured.
description: Highlight cards and other elements with ribbons. Change the position, color, and shape, or add icons and text to draw attention.
related: [/ui/components/card, /ui/components/badge]
source: core/scss/ui/_ribbons.scss
@@ -28,7 +28,7 @@ import CodeDocs from '@components/CodeDocs.astro';
## Default markup
-Use the `ribbon` class to add the default ribbon to any section of your interface.
+Put a `.ribbon` element inside a card. It can hold an icon or a short text.
<Example card column>
<div class="card">
@@ -57,7 +57,7 @@ Using multiple classes at once will give you more position options. For example,
## Ribbon color
-Customize the ribbon's background color. See the [full list of available colors](/ui/base/colors) for more details.
+Set the ribbon color with a `bg-*` class from the [color palette](/ui/base/colors).
<Example column>
<div class="card">
@@ -68,7 +68,7 @@ Customize the ribbon's background color. See the [full list of available colors]
## Ribbon text
-Add your own text to a ribbon to display any additional information and make it easy to spot for users.
+A ribbon can hold a short text, such as NEW or SALE.
<Example column>
<div class="card">
@@ -79,7 +79,7 @@ Add your own text to a ribbon to display any additional information and make it
## Bookmark ribbon
-Use the `.ribbon-bookmark` class to create a bookmark ribbon. It is a special style of ribbon that is used to highlight important elements in your interface.
+Add `.ribbon-bookmark` to give the ribbon a bookmark shape.
<Example column>
<div class="card w-100">
diff --git a/docs/content/ui/components/segmented-control.mdx b/docs/content/ui/components/segmented-control.mdx
index 54c30ecfe..c13f400b6 100644
--- a/docs/content/ui/components/segmented-control.mdx
+++ b/docs/content/ui/components/segmented-control.mdx
@@ -1,6 +1,6 @@
---
title: Segmented control
-summary: A segmented control is a set of two or more segments, each of which functions as a mutually exclusive button. A segmented control is used to display a set of mutually exclusive options.
+summary: A segmented control is a row of two or more mutually exclusive options styled as one bar, an alternative to radios or tabs.
description: A set of mutually exclusive options displayed as connected buttons.
source: core/scss/ui/_segmented.scss
classnames:
@@ -20,7 +20,7 @@ import Example from '@components/Example.astro';
import Icon from '@ui/Icon.astro';
import CodeDocs from '@components/CodeDocs.astro';
-To create a segmented control, use the `nav` element with the `nav-segmented` class. Inside the `nav` element, add `button` or `a` elements with the `nav-link` class. The `nav-link` class is used to style the buttons as links.
+A segmented control is a `nav` element with the `nav-segmented` class, holding `button` or `a` elements with the `nav-link` class.
<Example centered>
<nav class="nav nav-segmented" role="tablist">
@@ -32,14 +32,12 @@ To create a segmented control, use the `nav` element with the `nav-segmented` cl
## Full width
-To make the segmented control full width, add the `w-100` class to the `nav` element. It will take up the full width of its parent container.
+Add `w-100` to the `nav` to stretch the control to the width of its container.
```html
<nav class="nav nav-segmented w-100" role="tablist">...</nav>
```
-The results can be seen in the example below.
-
<Example>
<nav class="nav nav-segmented w-100" role="tablist">
<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">Daily</button>
@@ -52,7 +50,7 @@ The results can be seen in the example below.
## With emojis
-You can also use emojis in the segmented control. To do this, add the emoji inside the `button` element.
+A segment can hold an emoji.
<Example centered>
<nav class="nav nav-segmented" role="tablist">
@@ -67,7 +65,7 @@ You can also use emojis in the segmented control. To do this, add the emoji insi
## With icons
-You can also use [icons](/ui/components/icon) in the segmented control. To do this, add the icon inside the `button` element.
+A segment can hold an [icon](/ui/components/icon).
<Example centered>
@@ -87,8 +85,6 @@ To create a vertical segmented control, add the `nav-segmented-vertical` class t
<nav class="nav nav-segmented-vertical" role="tablist">...</nav>
```
-The results can be seen in the example below.
-
<Example centered>
<nav class="nav nav-segmented nav-segmented-vertical" role="tablist">
<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page"><Icon name="list" /> List</button>
@@ -100,14 +96,12 @@ The results can be seen in the example below.
## Sizes
-You can also change the size of the segmented control. To do this, add the `nav-sm` or `nv-lg` class to the `nav` element. The `nav-sm` class will make the segmented control smaller, while the `nav-lg` class will make it larger.
+Add `nav-sm` or `nav-lg` to the `nav` to change the size.
```html
<nav class="nav nav-segmented nav-sm" role="tablist">...</nav>
```
-The results can be seen in the examples below.
-
<Example centered vertical>
<nav class="nav nav-segmented nav-sm" role="tablist">
<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">List</button>
diff --git a/docs/content/ui/components/spinner.mdx b/docs/content/ui/components/spinner.mdx
index d8da80990..2b081c1f2 100644
--- a/docs/content/ui/components/spinner.mdx
+++ b/docs/content/ui/components/spinner.mdx
@@ -24,7 +24,7 @@ import CodeDocs from '@components/CodeDocs.astro';
## Default markup
-Use the default spinner to notify users that an action they have taken is in progress, helping them avoid confusion.
+The default spinner shows that an action is in progress.
<Example centered>
<div class="spinner-border"></div>
@@ -33,7 +33,7 @@ Use the default spinner to notify users that an action they have taken is in pro
## Colors
-Choose one of the available colors to customize the spinner and make it suit your design. Full list of available colors can be found in the [Colors](/ui/base/colors) section.
+Set the color with a `text-*` class from the [color palette](/ui/base/colors).
<Example centered>
<div class="spinner-border text-blue" role="status"></div>
@@ -52,7 +52,7 @@ Choose one of the available colors to customize the spinner and make it suit you
## Size
-Choose the size of your spinner. You can use the default size or use the `spinner-border-sm` class to display a smaller spinner.
+Add `spinner-border-sm` for a smaller spinner.
<Example centered>
<div class="spinner-border" role="status"></div>
@@ -61,13 +61,13 @@ Choose the size of your spinner. You can use the default size or use the `spinne
## Growing spinner
-Use the growing spinner, if you are looking for a more original design than a border spinner. The spinner grows to show the loading state.
+The growing spinner pulses instead of rotating.
<Example centered>
<div class="spinner-grow" role="status"></div>
</Example>
-Growing spinners also come in a variety of colors to choose from.
+It takes the same `text-*` color classes.
<Example centered>
<div class="spinner-grow text-blue" role="status"></div>
@@ -86,7 +86,7 @@ Growing spinners also come in a variety of colors to choose from.
## Button with spinner
-Use [buttons](/ui/components/button) with spinners to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up.
+Put a spinner inside a [button](/ui/components/button) while its action runs, and disable the button so it can't be clicked twice.
<Example centered>
<div class="btn-list">
@@ -100,13 +100,13 @@ Use [buttons](/ui/components/button) with spinners to notify users that an actio
## Animated dots
-Use animated dots to show the loading state of a component. They provide feedback for an action a user has taken, when it takes a bit longer to complete. To do it you need to use the `.animated-dots` class on a `span` element.
+Animated dots are a lighter loading indicator for inline text. Add the `.animated-dots` class to a `span`.
<Example centered>
<h1>Loading <span class="animated-dots"></span></h1>
</Example>
-Use buttons with animated dots to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up.
+Animated dots also fit inside a button while its action runs.
<Example centered>
<div class="btn-list">
diff --git a/docs/content/ui/components/status.mdx b/docs/content/ui/components/status.mdx
index 3e9bf4e57..e219db082 100644
--- a/docs/content/ui/components/status.mdx
+++ b/docs/content/ui/components/status.mdx
@@ -218,8 +218,8 @@ Use the status indicator to show the status of a component or page. The status i
## Accessibility
-- A status dot is decoration. The state has to be in text next to it - a screen reader ignores a coloured circle, and so does anyone who cannot tell the colours apart.
-- Do not use red and green alone to separate "down" from "up". Pair the colour with a word, an icon, or a shape.
+- A status dot is decoration. The state has to be in text next to it - a screen reader ignores a colored circle, and so does anyone who cannot tell the colors apart.
+- Do not use red and green alone to separate "down" from "up". Pair the color with a word, an icon, or a shape.
- An animated dot repeats forever. Keep it for a state that really is live, and respect `prefers-reduced-motion` in your own CSS if you add more motion.
- When a status changes while the page is open, announce it from a live region elsewhere rather than making the dot itself one.
diff --git a/docs/content/ui/components/step.mdx b/docs/content/ui/components/step.mdx
index b4bf53dea..6b1141a1d 100644
--- a/docs/content/ui/components/step.mdx
+++ b/docs/content/ui/components/step.mdx
@@ -1,6 +1,6 @@
---
title: Step
-summary: A step is used to guide users through a complex process and make it easier to complete. Breaking a multi-step process into smaller parts and tracking progress along the way helps users finish it successfully.
+summary: "Steps show where the user is in a multi-step process: which steps are done, which one is active and which are left."
description: Guide users through multi-step processes with a steps indicator. Show completed, active, and upcoming steps in a clear layout.
related: [/ui/components/progress-step]
source: core/scss/ui/_steps.scss
@@ -26,9 +26,7 @@ import CodeDocs from '@components/CodeDocs.astro';
## Default markup
-Steps provide a clear visual representation of a user’s progress through a multi-step process. By showing what has been completed and what remains, steps enhance usability and encourage task completion.
-
-To create a default progress tracker, use the `.steps` class and define each step as a `.step-item`. The active step clearly indicates the current position in the process.
+Use the `.steps` class for the list and `.step-item` for each step. The `active` class marks the current step.
```html
<div class="steps">
@@ -38,7 +36,7 @@ To create a default progress tracker, use the `.steps` class and define each ste
</div>
```
-The example below demonstrates a simple progress tracker with four steps, where the third step is active.
+Four steps, with the third one active:
<Example>
<div class="steps">
@@ -51,7 +49,7 @@ The example below demonstrates a simple progress tracker with four steps, where
## Tooltips
-Add [tooltips](/ui/components/tooltip) if you want to provide users with additional information about the steps they are expected to complete. Tooltips are displayed when a user hovers over a given step and help clarify what might not be clear from the interface.
+Add a [tooltip](/ui/components/tooltip) to a step to explain it on hover, for example when the step titles are short.
To add a tooltip, use the `data-bs-toggle="tooltip"` attribute and specify the tooltip content with the `title` attribute.
@@ -67,7 +65,7 @@ To add a tooltip, use the `data-bs-toggle="tooltip"` attribute and specify the t
</a>
```
-The example below demonstrates a progress tracker with tooltips for each step.
+A tracker with a tooltip on each step:
<Example>
<div class="steps">
@@ -80,13 +78,13 @@ The example below demonstrates a progress tracker with tooltips for each step.
## Color
-You can customize the default progress indicator by changing the color to one that better suits your design. See the [full list of available colors](/ui/base/colors) for more details.
+Change the color with a `steps-*` class, using any name from the [color palette](/ui/base/colors).
```html
<div class="steps steps-green">...</div>
```
-The example below demonstrates a progress tracker with two different color schemes.
+Two color schemes:
<Example>
<div class="steps steps-green">
@@ -105,7 +103,7 @@ The example below demonstrates a progress tracker with two different color schem
## Steps without title
-For designs with limited space, use progress indicators without titles and add tooltips to provide the necessary details.
+When there's no room for titles, use steps without them and put the details in tooltips.
<Example>
<div class="steps">
@@ -118,13 +116,13 @@ For designs with limited space, use progress indicators without titles and add t
## Steps with numbers
-Use the `steps-counter` class to create a progress tracker with numbers instead of titles and change the color to customize it.
+The `steps-counter` class shows a number in each step instead of a title.
```html
<div class="steps steps-counter">...</div>
```
-The example below demonstrates a progress tracker with numbers and a different color scheme.
+Numbered steps in another color:
<Example>
<div class="steps steps-counter">
@@ -139,8 +137,8 @@ The example below demonstrates a progress tracker with numbers and a different c
## Accessibility
- Use an ordered list for the steps. The numbering is meaning, not decoration, so let the markup carry it.
-- Mark the current step with `aria-current="step"`. The `active` class only changes the colours.
-- A completed step and a pending one must differ in more than colour - a checkmark, a label, or the word "done".
+- Mark the current step with `aria-current="step"`. The `active` class only changes the colors.
+- A completed step and a pending one must differ in more than color - a checkmark, a label, or the word "done".
- If a step is a link, keep it a real link; if it cannot be reached yet, use `aria-disabled="true"` and take it out of the tab order.
## SCSS variables
diff --git a/docs/content/ui/components/switch-icon.mdx b/docs/content/ui/components/switch-icon.mdx
index b9e80d7ca..d06e9b9d1 100644
--- a/docs/content/ui/components/switch-icon.mdx
+++ b/docs/content/ui/components/switch-icon.mdx
@@ -51,7 +51,7 @@ You can also add a fancy animation to add variety to your button. See demo below
<span class="switch-icon-a text-secondary"><Icon name="heart" /></span>
<span class="switch-icon-b text-red"><Icon name="heart" filled /></span>
</button>
-<button type="button" class="switch-icon switch-icon-scale" data-bs-toggle="switch-icon" aria-pressed="false" aria-label="Add to favourites">
+<button type="button" class="switch-icon switch-icon-scale" data-bs-toggle="switch-icon" aria-pressed="false" aria-label="Add to favorites">
<span class="switch-icon-a text-secondary"><Icon name="star" /></span>
<span class="switch-icon-b text-yellow"><Icon name="star" filled /></span>
</button>
@@ -109,5 +109,5 @@ Tabler toggles the `active` class on every element with `data-bs-toggle="switch-
- A switch icon is a toggle button. Give it `type="button"`, an `aria-label` saying what it toggles, and `aria-pressed` for the state - Tabler keeps `aria-pressed` in sync from the first click, but the initial value has to be in your markup.
- The two icons are decoration. The state lives in `aria-pressed`, not in which icon is visible.
-- Colour alone should not carry the state. A filled red heart and an outlined grey one differ in shape too, which is what makes them readable.
+- Colour alone should not carry the state. A filled red heart and an outlined gray one differ in shape too, which is what makes them readable.
- The animations run on every toggle. Disable them under `prefers-reduced-motion` if you add your own.
diff --git a/docs/content/ui/components/tab.mdx b/docs/content/ui/components/tab.mdx
index ea45aae2b..f39301644 100644
--- a/docs/content/ui/components/tab.mdx
+++ b/docs/content/ui/components/tab.mdx
@@ -1,6 +1,6 @@
---
title: Tab
-summary: A tab allows users to alternate between equally important views within the same context. By dividing content into meaningful sections, it improves organization and makes navigation easier.
+summary: Tabs switch between related views in the same place on the page. They can hold icons, a dropdown or fill the full width.
description: Split content into tabs so users can switch between related views in the same context. Add icons or style the tabs as pills.
related: [/ui/layout/navs-tabs]
source: core/scss/ui/_nav.scss
@@ -30,7 +30,7 @@ import CodeDocs from '@components/CodeDocs.astro';
## Default markup
-Use tabs to let users access different sections within one context quickly and with ease. In the default design, the current tab is highlighted, which makes the interface clear and user-friendly.
+The default tabs highlight the current one. Each tab trigger points at a panel, and Bootstrap shows one panel at a time.
<Example>
<div class="card">
@@ -61,7 +61,7 @@ Use tabs to let users access different sections within one context quickly and w
## Tabs with icons
-Add [icons](/ui/components/icon) to your tab labels, if you want to use a visual element and make the tab content easier to identify.
+An [icon](/ui/components/icon) in the tab label makes tabs easier to tell apart when the labels are similar.
<Example>
<div class="card">
@@ -105,7 +105,7 @@ Add [icons](/ui/components/icon) to your tab labels, if you want to use a visual
## Tabs only with icons
-Use tabs without label names to save space and make the tab content easy to recognize for international users.
+Tabs with only an icon save space. Give each one an `aria-label`, because there's no text to read.
<Example>
<div class="card">
@@ -147,7 +147,7 @@ Use tabs without label names to save space and make the tab content easy to reco
## Tabs with dropdown
-Make one or more of your tabs into a [dropdown](/ui/components/dropdown) to add more options within one element.
+A tab can open a [dropdown](/ui/components/dropdown) with more views, so a long row of tabs stays short.
<Example>
<div class="card">
diff --git a/docs/content/ui/components/table.mdx b/docs/content/ui/components/table.mdx
index 23722fb27..559e7e121 100644
--- a/docs/content/ui/components/table.mdx
+++ b/docs/content/ui/components/table.mdx
@@ -1,6 +1,6 @@
---
title: Table
-summary: A table is a useful interface element that lets you visualize data and arrange it clearly. It allows users to browse a lot of information at once, and a good table design improves readability.
+summary: Tables lay out rows of data, with variants for responsive, sortable, selectable and sticky-header tables.
description: Present data in clean, responsive tables. Add hover states, striped rows, sorting, and other options to improve readability.
related: [/ui/components/datagrid, /ui/components/pagination]
source: core/scss/ui/_tables.scss
diff --git a/docs/content/ui/components/timeline.mdx b/docs/content/ui/components/timeline.mdx
index 57f4700c6..611f00553 100644
--- a/docs/content/ui/components/timeline.mdx
+++ b/docs/content/ui/components/timeline.mdx
@@ -1,6 +1,6 @@
---
title: Timeline
-summary: A timeline is a perfect way to visualize processes and projects, as it's easy to read and attractive for users. You can use it to give an overview of events, present an agenda or point out important points in time.
+summary: A timeline is a list of events in order, with an icon or an avatar per event and a card for its content, for activity feeds and histories.
description: Visualize events in chronological order with a timeline. Add icons, avatars, and text to present processes and activity feeds.
related: [/ui/components/step, /ui/components/status]
source: core/scss/ui/_timeline.scss
diff --git a/docs/content/ui/components/toast.mdx b/docs/content/ui/components/toast.mdx
index 7d29cbe72..34aa59b30 100644
--- a/docs/content/ui/components/toast.mdx
+++ b/docs/content/ui/components/toast.mdx
@@ -1,6 +1,6 @@
---
title: Toast
-summary: A toast is a lightweight alert box that displays for a few seconds after a user action to communicate state or outcome. It is useful after actions like clicking a button or submitting a form, where feedback is needed without prompting another action.
+summary: A toast is a small message shown for a few seconds after an action, for feedback that doesn't need a response.
description: Display a lightweight alert notification with a toast.
related: [/ui/components/alert, /ui/components/modal]
source: core/scss/ui/_toasts.scss
@@ -24,7 +24,7 @@ import CodeDocs from '@components/CodeDocs.astro';
## Default markup
-Use the default toast message to inform users of the outcome of their action and provide additional information. It contains an `x` close button to make it possible for users to close the toast if they wish.
+The default toast has a header with the sender and the time, a body with the message, and a close button.
<Example>
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" data-bs-toggle="toast">
@@ -40,7 +40,7 @@ Use the default toast message to inform users of the outcome of their action and
## Translucent
-Toasts blend over the elements they appear over. If a browser supports the `backdrop-filter` CSS property, the elements under a toast will be blurred.
+Toasts are translucent, so the page shows through them. In browsers that support `backdrop-filter`, the content under a toast is blurred.
<Example>
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" data-bs-toggle="toast">
diff --git a/docs/content/ui/components/tooltip.mdx b/docs/content/ui/components/tooltip.mdx
index a1e4c163e..0bef1656a 100644
--- a/docs/content/ui/components/tooltip.mdx
+++ b/docs/content/ui/components/tooltip.mdx
@@ -1,6 +1,6 @@
---
title: Tooltip
-summary: A tooltip is a text label that appears when a user hovers over an interface element. It explains unclear elements and guides users when they need help. When used properly, it can significantly enhance user experience and add value to your website or software.
+summary: A tooltip is a short text label that appears when the user hovers over or focuses an element. It explains a control that isn't clear on its own.
description: Explain interface elements with tooltips shown on hover. Control placement, add HTML content, and customize how they appear.
related: [/ui/components/popover]
source: core/scss/bootstrap/_tooltip.scss
@@ -19,7 +19,7 @@ import CodeDocs from '@components/CodeDocs.astro';
## Default markup
-Use the default markup to create tooltips that will help users understand particular elements of your interface. You can decide where the text label is to be displayed - at the top, bottom or on either side of the element.
+Add `data-bs-toggle="tooltip"` and a `title` to the element. `data-bs-placement` puts the tooltip at the top, bottom, left or right.
<Example>
<div class="btn-list">
@@ -32,7 +32,7 @@ Use the default markup to create tooltips that will help users understand partic
## Tooltip with HTML
-If the default tooltip is not enough, you can add the option to use HTML code in the text to highlight particular bits of information and make the content more attractive.
+Set `data-bs-html="true"` to allow HTML in the title, for example to emphasize one word.
<Example>
<button type="button" class="btn" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button>
diff --git a/docs/content/ui/components/tracking.mdx b/docs/content/ui/components/tracking.mdx
index f99e00000..26919bc8f 100644
--- a/docs/content/ui/components/tracking.mdx
+++ b/docs/content/ui/components/tracking.mdx
@@ -1,6 +1,6 @@
---
title: Tracking
-summary: Component for visualizing activity logs or other monitoring-related data. With its ability to show data in a visually appealing and easily understandable way, the tracking component is an essential tool for any organization that relies on data monitoring and analysis to optimize performance and user experience.
+summary: A row of colored blocks that shows one status per time period, for uptime and activity logs.
description: Visualize activity logs and uptime data with the tracking component - a compact row of colored blocks that show status over time.
related: [/ui/components/tooltip, /ui/plugins/chart]
source: core/scss/ui/_tracking.scss
@@ -61,7 +61,7 @@ Build a tracking view from a `.tracking` wrapper with one `.tracking-block` elem
## Tracking inside a card
-You can add a tracking component inside the cards to give your reports a fresh look and visualize the status of your system in an attractive way. If you want to read how to add other elements to a card it is worth reading [documentation of card](/ui/components/card).
+A tracking strip fits in a [card](/ui/components/card), for example under a subheader and a summary line in the `card-body`.
<Example column>
<div class="card">
diff --git a/docs/content/ui/forms/color-check.mdx b/docs/content/ui/forms/color-check.mdx
index 95e7be0f5..37f68183e 100644
--- a/docs/content/ui/forms/color-check.mdx
+++ b/docs/content/ui/forms/color-check.mdx
@@ -1,15 +1,15 @@
---
title: Color check
order: 7
-summary: The color check is a great way to make your form more user-friendly and engaging. You can use the color check to create a visually appealing form that will help users make decisions quickly and easily.
-description: Let users pick a color with radio or checkbox controls styled as color swatches. A simple way to make forms more visual.
+summary: Checkboxes and radios styled as color swatches, for picking a color in a form.
+description: Checkboxes and radios styled as color swatches, plus the native color picker input.
related: [/ui/forms/image-check, /ui/base/colors]
---
import Example from '@components/Example.astro'
import InputColor from '@shared/components/parts/form/InputColor.astro'
-Your input controls can come in a variety of colors, depending on your preferences. See the [full list of available colors](/ui/base/colors) for more details.
+A color check is a checkbox or a radio drawn as a color swatch. The swatch takes any of the `bg-*` classes from the [color palette](/ui/base/colors).
```html
<label class="form-colorinput">
@@ -18,13 +18,13 @@ Your input controls can come in a variety of colors, depending on your preferenc
</label>
```
-There is also an example of a color input:
+With checkboxes, several colors can be picked at once:
<Example>
<InputColor type="checkbox" />
</Example>
-If you need to select only one color, you can use the radio input type:
+Use the radio type when only one color can be picked:
<Example>
<InputColor name="color-rounded" rounded={true} />
@@ -32,7 +32,7 @@ If you need to select only one color, you can use the radio input type:
## Input color picker
-Add an color picker to your form to let users customize it according to their preferences.
+For a free choice of color, use the native `color` input. Tabler styles it to match the other form controls.
<Example>
<div class="mb-3">
@@ -43,8 +43,8 @@ Add an color picker to your form to let users customize it according to their pr
## Accessibility
-- A colour swatch has no name. Put the colour in text inside a `visually-hidden` span, or use `aria-label` on the input, so the option is not announced as just "radio".
+- A color swatch has no name. Put the color in text inside a `visually-hidden` span, or use `aria-label` on the input, so the option is not announced as just "radio".
- Colour on its own cannot be the only way to tell options apart. Keep a visible mark for the selected one - Tabler draws a checkmark inside the swatch.
- Wrap the set in a `fieldset` with a `legend`, so the group has a name. See [fieldsets](/ui/forms/fieldset).
- Keep the real `input` in the markup. It is what makes the arrow keys, the space bar and the checked state work.
-- Do not use a colour picker as the only way to choose something meaningful, such as a category. Offer the name as well.
+- Do not use a color picker as the only way to choose something meaningful, such as a category. Offer the name as well.
diff --git a/docs/content/ui/forms/elements.mdx b/docs/content/ui/forms/elements.mdx
index ae42c4895..8069bdabe 100644
--- a/docs/content/ui/forms/elements.mdx
+++ b/docs/content/ui/forms/elements.mdx
@@ -1,9 +1,9 @@
---
title: Elements
seoTitle: Form elements
-summary: Forms are one of the most important types of interaction with a website or app. Since their aim is to enable users to make a purchase, subscribe to a service or sign up to create an account, it's important to make sure they are easy to complete and help increase conversion rates. Use the available elements to create forms which are well-structured and user-friendly.
+summary: Inputs, selects, textareas, checkboxes, radios and switches, with their sizes, states and the input group add-ons.
docs-libs: [nouislider]
-description: Build user-friendly forms with styled inputs, selects, checkboxes, and radios. Learn about states, sizes, and layout options.
+description: Styled inputs, selects, checkboxes and radios, with states, sizes and layout options.
order: 1
related: [/ui/forms/validation, /ui/forms/helpers, /ui/forms/fieldset, /ui/plugins/date-picker, /ui/plugins/advanced-select]
---
@@ -13,7 +13,7 @@ import Icon from '@ui/Icon.astro'
## Classic inputs
-Use classic, user-friendly inputs, label them appropriately and include input placeholders that will help users avoid confusion when completing a form. Add the `form-control` class to style your input controls.
+Add the `form-control` class to a text input to style it. Give every input a label, and use the placeholder for an example value rather than as the label.
```html
<input type="text" class="form-control" name="example-text-input" placeholder="Input placeholder" />
@@ -68,7 +68,7 @@ You can remove borders from your form control by adding the `form-control-flush`
## Input with icon
-Add [icons](/ui/components/icon) to your input controls to suggest users what they should enter or inform them of the current state of a form element.
+Put an [icon](/ui/components/icon) inside an input to hint at what goes in it, or a spinner to show that the field is busy.
<Example column>
<div class="mb-3">
@@ -152,7 +152,7 @@ Add one of the available selects - either a dropdown or a multiple choice select
## Input size
-Choose the size of an input control that will go well with your form design. Besides the default size, you can also use small and large input controls.
+Inputs come in three sizes: small, default and large.
<Example column>
<div class="mb-3">
diff --git a/docs/content/ui/forms/fieldset.mdx b/docs/content/ui/forms/fieldset.mdx
index 6bf81fb8f..4f46a8066 100644
--- a/docs/content/ui/forms/fieldset.mdx
+++ b/docs/content/ui/forms/fieldset.mdx
@@ -2,7 +2,7 @@
title: Fieldset
seoTitle: Form fieldset
order: 2
-summary: By grouping form elements together with the fieldset element, you can improve the organization and accessibility of your forms, making it easier for users to understand the purpose of each input and provide accurate information.
+summary: A fieldset groups related fields under a legend, which makes long forms easier to scan and gives the group a name for assistive tech.
description: Group related form fields with a styled fieldset to make long forms better organized and easier to understand.
related: [/ui/forms/elements]
---
@@ -10,7 +10,7 @@ import Example from '@components/Example.astro';
## Default markup
-Group parts of your form to make it well-structured and clearer for users, using the `fieldset` element.
+Wrap related fields in a `fieldset` to group them.
Give every fieldset a `legend`. The legend names the group, and it is the only thing that does - a heading placed above the fieldset looks the same but is not connected to the fields.
diff --git a/docs/content/ui/forms/helpers.mdx b/docs/content/ui/forms/helpers.mdx
index a5afca1a9..a7ebc913c 100644
--- a/docs/content/ui/forms/helpers.mdx
+++ b/docs/content/ui/forms/helpers.mdx
@@ -2,7 +2,7 @@
title: Helpers
seoTitle: Form helpers
order: 4
-summary: Use form helpers to provide additional information about a form element. You can use input help, required field, form hint, and additional info inside the label.
+summary: "Form helpers add information around a field: a help popover, a required marker, a hint below the field and extra text in the label."
description: Add help icons, hints, and required field markers to forms to give users extra guidance and reduce input errors.
related: [/ui/forms/elements, /ui/components/popover]
---
@@ -24,8 +24,6 @@ Use an input helper to display additional information about a form element. The
>
```
-Look at the example below to see how the input help works:
-
<Example column>
<div>
<label class="form-label" for="helper-zip"> ZIP Code <span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-html="true" data-bs-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>"> ? </span> </label>
@@ -52,8 +50,6 @@ Use a form hint to provide users with additional information about a form elemen
<div class="form-hint">We'll never share your email with anyone else.</div>
```
-Look at the example below to see how the form hint works:
-
<Example column>
<div>
<label class="form-label" for="helper-email">Email address</label>
diff --git a/docs/content/ui/forms/image-check.mdx b/docs/content/ui/forms/image-check.mdx
index 60619afcf..ecfd17cf1 100644
--- a/docs/content/ui/forms/image-check.mdx
+++ b/docs/content/ui/forms/image-check.mdx
@@ -1,15 +1,15 @@
---
title: Image check
order: 6
-summary: The image check is a great way to make your form more user-friendly and engaging. You can use the image check to create a visually appealing form that will help users make decisions quickly and easily.
-description: Let users select options with image-based checkboxes and radios. Ideal for choosing templates, themes, or visual products in forms.
+summary: Checkboxes and radios that use an image as the label, for picking a template, a theme or a product.
+description: Checkboxes and radios with an image as the label, for choosing templates, themes or products in a form.
related: [/ui/forms/select-group, /ui/forms/color-check]
---
import Example from '@components/Example.astro';
## Default markup
-To build an image check, you need to use the `.form-imagecheck` class and the `.form-imagecheck-input` class for the input element. You can also use the `.form-imagecheck-figure` class to display the custom checkbox and the `.form-imagecheck-image` class to style the image itself.
+An image check is a `.form-imagecheck` label with a hidden `.form-imagecheck-input`, a `.form-imagecheck-figure` that draws the check mark, and a `.form-imagecheck-image` for the picture.
```html
<label class="form-imagecheck">
@@ -20,8 +20,6 @@ To build an image check, you need to use the `.form-imagecheck` class and the `.
</label>
```
-Look at the examples below to see how the image check works:
-
<Example>
<div class="mb-3">
<label class="form-label">Image Check</label>
@@ -64,7 +62,7 @@ Look at the examples below to see how the image check works:
## Radio buttons
-If you want to use the image check as a radio button, you can change the input type to `radio`.
+Change the input type to `radio` when only one option can be picked.
<Example>
<div class="mb-3">
@@ -108,7 +106,7 @@ If you want to use the image check as a radio button, you can change the input t
## Avatars
-If you want to use the image check with avatars, you can use an [avatar component](/ui/components/avatar) instead of an image.
+Use an [avatar](/ui/components/avatar) instead of an image when the options are people.
<Example>
<div class="mb-3">
@@ -160,5 +158,5 @@ If you want to use the image check with avatars, you can use an [avatar componen
- An image check is a checkbox or a radio with a picture as its label. Keep the `input` in the markup so the control works and the state is exposed.
- A picture is not a name. Add text in the label, or an `aria-label` on the input, saying what the option is.
-- Selection must not rest on the border colour alone. Add a checkmark or another visible mark for the selected state.
+- Selection must not rest on the border color alone. Add a checkmark or another visible mark for the selected state.
- Wrap a set of them in a `fieldset` with a `legend`, so the group has a name.
diff --git a/docs/content/ui/forms/index.mdx b/docs/content/ui/forms/index.mdx
index 85fd8a79b..5cbc5023c 100644
--- a/docs/content/ui/forms/index.mdx
+++ b/docs/content/ui/forms/index.mdx
@@ -2,7 +2,7 @@
title: Forms
order: 5
description: Everything you need to build accessible forms - inputs, selects, checkboxes, validation states, and helper elements.
-summary: The forms section provides a collection of components and tools for creating user-friendly and accessible forms, enhancing user interaction and improving data collection.
+summary: "The form building blocks: inputs, selects, checkboxes and radios, validation states and helper elements."
---
Forms collect data from your users, so they need to be clear and easy to use. This section covers all form building blocks: inputs, selects, checkboxes, validation states, and helpers. Combine them to build accessible forms that look consistent with the rest of your interface.
diff --git a/docs/content/ui/forms/select-group.mdx b/docs/content/ui/forms/select-group.mdx
index 15cfe56b6..5e3c5d385 100644
--- a/docs/content/ui/forms/select-group.mdx
+++ b/docs/content/ui/forms/select-group.mdx
@@ -2,7 +2,7 @@
title: Select group
seoTitle: Form select group
order: 5
-summary: Use selectgroup to make your form more intuitive by providing users with a set of options to choose from. You can add simple selectgroup with a label, use icons only or icons with labels. Alternatively, you can use pill selectgroup if they go well with your design.
+summary: A select group is a set of radios or checkboxes styled as buttons, with a label, an icon or both, in the default or the pill style.
description: Offer sets of options with select groups - labeled, icon-only, or pill-shaped controls built on checkboxes and radios.
css-plugins: [payments]
related: [/ui/plugins/advanced-select, /ui/forms/image-check, /ui/forms/color-check]
@@ -13,7 +13,7 @@ import Icon from '@ui/Icon.astro'
## Simple selectgroup
-To create a simple selectgroup, use the `.form-selectgroup` class. You should add a label to the selectgroup by using the `.form-selectgroup-item` class for the input element and the `.form-selectgroup-label` class for the label.
+Wrap the options in a `.form-selectgroup` element. Each option is a `.form-selectgroup-item` label with a hidden `.form-selectgroup-input` and a `.form-selectgroup-label` for the text.
```html
<label class="form-selectgroup-item">
@@ -22,8 +22,6 @@ To create a simple selectgroup, use the `.form-selectgroup` class. You should ad
</label>
```
-Look at the example below to see how the simple selectgroup works:
-
<Example centered>
<div>
<div class="form-selectgroup">
@@ -49,7 +47,7 @@ Look at the example below to see how the simple selectgroup works:
## Multiple choices
-You can also create a selectgroup with multiple choices. To do this, change the `type` attribute of the input element to `checkbox`.
+Change the input type to `checkbox` to let the user pick more than one option.
```html
<label class="form-selectgroup-item">
@@ -58,8 +56,6 @@ You can also create a selectgroup with multiple choices. To do this, change the
</label>
```
-Look at the example below to see how the multiple choices selectgroup works:
-
<Example centered>
<div>
<div class="form-selectgroup">
@@ -85,7 +81,7 @@ Look at the example below to see how the multiple choices selectgroup works:
## Icon input
-To create an icon input, use the `.form-selectgroup` class. You should add a label to the selectgroup by using the `.form-selectgroup-item` class for the input element and the `.form-selectgroup-label` class for the label. You can use the `.icon` class to style the icon.
+The label can hold an icon instead of text. The markup is the same, with an `.icon` element inside `.form-selectgroup-label`.
```html
<label class="form-selectgroup-item">
@@ -96,7 +92,7 @@ To create an icon input, use the `.form-selectgroup` class. You should add a lab
</label>
```
-We recommend you use Tabler Icons for the best experience. You can find { site.iconsCount } free icons in the [Tabler Icons](https://tabler.io/icons) library. Just copy the SVG code and paste it into your project.
+The examples use [Tabler Icons](https://tabler.io/icons), which has { site.iconsCount } free icons. Copy the SVG code into the label.
<Example centered>
<div class="mb-3">
@@ -140,7 +136,7 @@ We recommend you use Tabler Icons for the best experience. You can find { site.i
</div>
</Example>
-You can also add text to the element. Look at the example below to see how it works:
+An icon and text can go together in one label:
<Example>
<div class="mb-3">
@@ -170,14 +166,12 @@ You can also add text to the element. Look at the example below to see how it wo
## Pill selectgroup
-If you want to use pill selectgroup, use the `.form-selectgroup-pills` class. All the other classes are the same as in the simple selectgroup.
+Add `.form-selectgroup-pills` to the group for rounded, pill-shaped options. The rest of the markup stays the same.
```html
<div class="form-selectgroup form-selectgroup-pills">...</div>
```
-Look at the example below to see how the pill selectgroup works:
-
<Example>
<div class="mb-3">
<label class="form-label">Different style</label>
@@ -204,7 +198,7 @@ Look at the example below to see how the pill selectgroup works:
## Advanced selectboxes
-Use more advanced selectboxes to display the range of available options. You can choose selectboxes with [radio buttons](/ui/forms/elements) if you want users to select only one option, or with checkboxes if they are allowed to choose multiple options.
+`form-selectgroup-boxes` turns each option into a box with a title and a description. Use [radios](/ui/forms/elements) when only one option can be picked and checkboxes when several can.
<Example column>
<div class="mb-3">
diff --git a/docs/content/ui/forms/validation.mdx b/docs/content/ui/forms/validation.mdx
index ffa4d5ba2..a3ebed5b9 100644
--- a/docs/content/ui/forms/validation.mdx
+++ b/docs/content/ui/forms/validation.mdx
@@ -2,7 +2,7 @@
title: Validation
seoTitle: Form validation states
order: 12
-summary: To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect.
+summary: Validation states mark a field as valid or invalid and show a message under it, so the user sees what to fix.
description: Show valid and invalid states on form fields with feedback messages, so users know exactly what to correct before submitting.
related: [/ui/forms/elements, /ui/forms/helpers]
---
@@ -11,7 +11,7 @@ import CodeDocs from '@components/CodeDocs.astro';
## Validation states
-To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect.
+Validation states mark a field as valid or invalid, so the user sees which fields to correct and, for an invalid one, why.
To apply the validation state to the form control, use the `.is-valid` and `.is-invalid` classes. For assistive tech, also set `aria-invalid="true"` on invalid controls.
@@ -50,7 +50,7 @@ You can also use the `.valid-feedback` to provide users with positive feedback.
## Subtle validation states
-If you prefer a more subtle manner of informing users of the input control validation state, you can use tick and cross symbols and refrain from using colored control frames and the validation feedback.
+For a quieter version, show a tick or a cross icon instead of the colored frame and the feedback message.
To do this, use the `.is-valid-lite` and `.is-invalid-lite` classes.
diff --git a/docs/content/ui/getting-started/browser-support.mdx b/docs/content/ui/getting-started/browser-support.mdx
index 0acdfd183..d3dd99fbf 100644
--- a/docs/content/ui/getting-started/browser-support.mdx
+++ b/docs/content/ui/getting-started/browser-support.mdx
@@ -1,7 +1,7 @@
---
title: Browser support
-description: See which browsers Tabler supports. The framework is optimized for the latest versions of Chrome, Firefox, Edge, Safari, and Opera.
-summary: Learn about the supported browsers and compatibility guidelines for using Tabler UI components to ensure a consistent experience across different devices and platforms.
+description: Which browsers Tabler supports, and the CSS features that set the minimum versions of Chrome, Firefox, Edge, Safari and Opera.
+summary: Which browsers Tabler supports and the CSS features that set the minimum versions.
---
import Example from '@components/Example.astro';
diff --git a/docs/content/ui/getting-started/callouts.mdx b/docs/content/ui/getting-started/callouts.mdx
index 3a6349d31..7b84e5702 100644
--- a/docs/content/ui/getting-started/callouts.mdx
+++ b/docs/content/ui/getting-started/callouts.mdx
@@ -1,6 +1,6 @@
---
title: Docs callouts
-summary: Callouts pull one sentence out of the flow of a page - a prerequisite, a gotcha, a warning. Tabler docs ship five of them, and any MDX page can use them without an import.
+summary: Callouts pull one sentence out of the page flow, such as a prerequisite or a warning. The docs ship five of them for any MDX page.
description: Info, Tip, Warning, Danger and Note callouts for Tabler documentation pages, with usage rules and accessibility notes.
---
diff --git a/docs/content/ui/getting-started/color-modes.mdx b/docs/content/ui/getting-started/color-modes.mdx
index b2509b79c..a9902a4cb 100644
--- a/docs/content/ui/getting-started/color-modes.mdx
+++ b/docs/content/ui/getting-started/color-modes.mdx
@@ -1,6 +1,6 @@
---
title: Color modes
-summary: Tabler ships a small theming script that switches your site between light, dark, and auto color modes, plus base gray shade, font, primary color, and corner radius - all without a page reload or a flash of the wrong theme.
+summary: The theme script switches between light, dark and auto color modes, plus the base gray, font, primary color and corner radius, without a page reload.
description: Set up Tabler's light, dark, and auto color modes, and learn the five theme attributes for base color, font, primary color, and corner radius.
related: [/ui/getting-started/customize, /ui/plugins/theme-base-colors]
---
diff --git a/docs/content/ui/getting-started/customize.mdx b/docs/content/ui/getting-started/customize.mdx
index f5b66271d..c58edbe73 100644
--- a/docs/content/ui/getting-started/customize.mdx
+++ b/docs/content/ui/getting-started/customize.mdx
@@ -1,6 +1,6 @@
---
title: Customize Tabler
-summary: Tabler has been designed so that it can be adjusted to your needs and requirements as much as possible. You can customize your own fonts, colors, font sizes, etc in it.
+summary: Change fonts, colors, sizes and other design tokens with CSS variables or Sass to make Tabler match your brand.
description: Customize Tabler fonts, colors, and styles with CSS variables and Sass to make the framework match your brand.
---
import Example from '@components/Example.astro';
diff --git a/docs/content/ui/getting-started/download.mdx b/docs/content/ui/getting-started/download.mdx
index d31ffb06d..ce454e0d3 100644
--- a/docs/content/ui/getting-started/download.mdx
+++ b/docs/content/ui/getting-started/download.mdx
@@ -1,6 +1,6 @@
---
title: Download
-summary: Download Tabler to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, yarn and more.
+summary: Get Tabler from the jsDelivr CDN, install it from npm, or download the compiled files and the source from GitHub.
description: Download Tabler compiled CSS and JavaScript, get the source code from GitHub, or install it with npm, yarn, or a CDN link.
---
@@ -10,7 +10,7 @@ import CdnImportPlugin from '@components/CdnImportPlugin.astro'
## CDN via jsDelivr
-All files included in the `@tabler/core` npm package are available over a jsDelivr CDN. Use it to deliver cached versions of Tabler’s compiled CSS and JS to your project.
+All files in the `@tabler/core` npm package are on the jsDelivr CDN, so you can link the compiled CSS and JS without hosting them.
<CdnImportPackage />
@@ -26,5 +26,4 @@ Install Tabler in your Node.js powered apps with the npm package:
## 3rd-party libraries
-Tabler uses other packages to enhance its functionality - for example, [charts](/ui/plugins/chart) and [input masks](/ui/plugins/input-mask). These are not automatically installed to avoid huge dependency trees and need to be installed by using `npm install`. The full list of recommended libraries is available on the
-[3rd-party Libraries & Resources](/ui/getting-started/references) page. For the most recent list of supported packages, you can also check the [libs.json](https://github.com/tabler/tabler/blob/dev/core/libs.json) file.
+Some features use other libraries, for example [charts](/ui/plugins/chart) and [input masks](/ui/plugins/input-mask). They aren't installed with the package, to keep the dependency tree small, so install the ones you use with `npm install`. The full list is on the [3rd-party Libraries & Resources](/ui/getting-started/references) page, and the exact shipped files are in [libs.json](https://github.com/tabler/tabler/blob/dev/core/libs.json).
diff --git a/docs/content/ui/getting-started/faq.mdx b/docs/content/ui/getting-started/faq.mdx
index 0e4bbbf46..7cd89aa6f 100644
--- a/docs/content/ui/getting-started/faq.mdx
+++ b/docs/content/ui/getting-started/faq.mdx
@@ -20,11 +20,11 @@ Yes, absolutely.
## Can I use Tabler in commercial projects?
-Of course! Tabler is under MIT license, so you can confidently use it in commercial projects. However, remember to include a note that your project uses Tabler. You can read about our license here: [License](https://tabler.io/license).
+Yes. Tabler is MIT licensed, so commercial use is fine. Keep the license and copyright notices in your copy. The full terms are on the [License](https://tabler.io/license) page.
## Can Tabler be used with WordPress?
-Tabler is an HTML template that can be used for any purpose. However, it is not made to be easily installed on WordPress. It will require some effort and enough knowledge of the WordPress script to do so.
+Tabler is an HTML template, so it can be used anywhere, but it isn't a WordPress theme. Turning it into one takes some work and a working knowledge of WordPress theme development.
## How do I get notified of new Tabler versions?
diff --git a/docs/content/ui/getting-started/frameworks/astro.mdx b/docs/content/ui/getting-started/frameworks/astro.mdx
index 997240091..38139980d 100644
--- a/docs/content/ui/getting-started/frameworks/astro.mdx
+++ b/docs/content/ui/getting-started/frameworks/astro.mdx
@@ -47,7 +47,7 @@ For full theme customization, import SCSS sources instead:
Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips.
-Astro-specific note: a plain `<script>` tag in an Astro component is bundled and runs only in the browser, so importing `tabler.min.js` there is safe — it never executes during server-side rendering:
+Astro-specific note: a plain `<script>` tag in an Astro component is bundled and runs only in the browser, so importing `tabler.min.js` there is safe - it never executes during server-side rendering:
```astro
<script>
diff --git a/docs/content/ui/getting-started/frameworks/django.mdx b/docs/content/ui/getting-started/frameworks/django.mdx
index 19c87ae65..a6b8646d5 100644
--- a/docs/content/ui/getting-started/frameworks/django.mdx
+++ b/docs/content/ui/getting-started/frameworks/django.mdx
@@ -11,7 +11,7 @@ import TabsPackage from '@components/TabsPackage.astro'
import CdnImportPackage from '@components/CdnImportPackage.astro'
import Steps from '@components/Steps.astro'
-Django templates render server-side HTML, which makes Tabler a drop-in: add Tabler classes to your markup and serve the compiled CSS and JS through Django's static files system — no Node build step required at runtime.
+Django templates render server-side HTML, which makes Tabler a drop-in: add Tabler classes to your markup and serve the compiled CSS and JS through Django's static files system - no Node build step required at runtime.
You will install `@tabler/core`, copy its compiled assets into your static directory, and render a first template with a Tabler card.
diff --git a/docs/content/ui/getting-started/frameworks/index.mdx b/docs/content/ui/getting-started/frameworks/index.mdx
index 992a84615..e5aa58aa4 100644
--- a/docs/content/ui/getting-started/frameworks/index.mdx
+++ b/docs/content/ui/getting-started/frameworks/index.mdx
@@ -8,7 +8,7 @@ hide-pagination: true
import DocsCard from '@components/DocsCard.astro'
import DocsChildrenCards from '@components/DocsChildrenCards.astro'
-Tabler is framework-agnostic: it styles standard HTML, so it works with any stack that renders markup. Each guide below shows the fastest path to a working Tabler page — installing `@tabler/core`, wiring the styles and scripts where your framework expects them, and rendering a first component.
+Tabler is framework-agnostic: it styles standard HTML, so it works with any stack that renders markup. Each guide below shows the fastest path to a working Tabler page - installing `@tabler/core`, wiring the styles and scripts where your framework expects them, and rendering a first component.
<div class="row g-3">
<DocsChildrenCards url="/ui/getting-started/frameworks" />
diff --git a/docs/content/ui/getting-started/frameworks/laravel.mdx b/docs/content/ui/getting-started/frameworks/laravel.mdx
index 1b3f6bbee..5d0d8d4d5 100644
--- a/docs/content/ui/getting-started/frameworks/laravel.mdx
+++ b/docs/content/ui/getting-started/frameworks/laravel.mdx
@@ -11,7 +11,7 @@ import TabsPackage from '@components/TabsPackage.astro'
import CdnImportPackage from '@components/CdnImportPackage.astro'
import Steps from '@components/Steps.astro'
-Laravel pairs naturally with Tabler: Blade templates render plain server-side HTML, so every Tabler component works out of the box — no wrappers or adapters needed. Styling comes from Tabler CSS, and a small JavaScript bundle powers interactive components such as dropdowns and modals.
+Laravel pairs naturally with Tabler: Blade templates render plain server-side HTML, so every Tabler component works out of the box - no wrappers or adapters needed. Styling comes from Tabler CSS, and a small JavaScript bundle powers interactive components such as dropdowns and modals.
This guide uses Laravel's default Vite setup. You will install `@tabler/core`, wire the CSS and JS into your Vite entry files, and render a first Blade view with a Tabler card.
diff --git a/docs/content/ui/getting-started/frameworks/symfony.mdx b/docs/content/ui/getting-started/frameworks/symfony.mdx
index 83d0ef890..8b2fcc582 100644
--- a/docs/content/ui/getting-started/frameworks/symfony.mdx
+++ b/docs/content/ui/getting-started/frameworks/symfony.mdx
@@ -11,7 +11,7 @@ import TabsPackage from '@components/TabsPackage.astro'
import CdnImportPackage from '@components/CdnImportPackage.astro'
import Steps from '@components/Steps.astro'
-Symfony's Twig templates render server-side HTML, so Tabler components work without any adapters — you add Tabler classes to your markup and let the asset pipeline deliver the CSS and JS.
+Symfony's Twig templates render server-side HTML, so Tabler components work without any adapters - you add Tabler classes to your markup and let the asset pipeline deliver the CSS and JS.
This guide uses Webpack Encore. You will install `@tabler/core`, import its assets in your Encore entries, and render a first Twig template with a Tabler card.
diff --git a/docs/content/ui/getting-started/how-to-contribute.mdx b/docs/content/ui/getting-started/how-to-contribute.mdx
index 01a615289..75c003b47 100644
--- a/docs/content/ui/getting-started/how-to-contribute.mdx
+++ b/docs/content/ui/getting-started/how-to-contribute.mdx
@@ -1,12 +1,12 @@
---
title: How to contribute
-summary: This guide explains how to contribute to Tabler, from setting up a development environment to making and testing changes. It covers essential steps like forking the repository, installing dependencies, and submitting a pull request to help improve Tabler's features and functionality.
+summary: "How to contribute to Tabler: set up the repository, make and test a change, add a changeset and open a pull request."
description: Guide to contributing to Tabler and setting up for development.
---
import Example from '@components/Example.astro';
import Steps from '@components/Steps.astro'
-Contributions are always welcome and highly encouraged! Whether you're new to open source or a seasoned contributor, your input helps make Tabler better for everyone. If you're new to open source, we recommend reading a [how to contribute](https://opensource.guide/how-to-contribute/) guide to learn more about contributing.
+Contributions are welcome, from a typo fix to a new component. If you haven't contributed to open source before, the [how to contribute](https://opensource.guide/how-to-contribute/) guide explains the basics.
Not sure where to start? Look for issues labeled [good first issue](https://github.com/tabler/tabler/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) - they are small and well-scoped.
@@ -48,7 +48,7 @@ To set up Tabler for development on your own machine, follow these steps:
### Ensure Node.js and pnpm are installed
-You’ll need Node.js (v22.12 or higher) and pnpm to compile Tabler’s files. If you don’t have them installed, download and install them from the official websites:
+You'll need Node.js (v22.12 or higher) and pnpm to compile Tabler's files. If you don't have them installed, download and install them from the official websites:
- [Node.js](https://nodejs.org/)
- [pnpm](https://pnpm.io/) (we use pnpm over other package managers for faster installation).
diff --git a/docs/content/ui/getting-started/index.mdx b/docs/content/ui/getting-started/index.mdx
index 972c9d94b..22cfbf8c6 100644
--- a/docs/content/ui/getting-started/index.mdx
+++ b/docs/content/ui/getting-started/index.mdx
@@ -7,11 +7,11 @@ description: Get started with Tabler - a free, open-source dashboard UI kit buil
## What is Tabler?
-Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern and user-friendly design you can create a fully functional interface that users will love! Choose the [layouts](/ui/layout) and [components](/ui/components) you need and customize them to make your design consistent and eye-catching. Every component has been created with attention to detail to make your interface beautiful!
+Tabler is a UI kit for admin panels and dashboards, built on Bootstrap 5. It gives you [layouts](/ui/layout) and [components](/ui/components) that already work together, so you can pick the ones you need and adjust them to your design. It's responsive and works in every current browser.
## What are the benefits?
-Tabler is a perfect solution if you want to create an interface which is not only user-friendly but also fully responsive. Thanks to the big choice of ready-made components, you can customize your design and adapt it to the needs of even the most demanding users. On top of that, Tabler is an open source solution, continuously developed and improved by the open source community.
+You don't have to build the common parts of an app interface from scratch. Cards, tables, forms, navigation and the page layouts are ready, and each of them has a dark mode and an RTL version. Tabler is open source under the MIT license and is developed on GitHub, so you can report a bug, send a fix or read the source of any component.
<img src="/static/tabler-preview.png" class="hide-theme-dark" alt="Screencap of tabler site showing global traffic and statistics" width="2880" height="2088" />
<img src="/static/tabler-preview-dark.png" class="hide-theme-light" alt="Screencap of tabler site showing global traffic and statistics" width="2880" height="2088" />
diff --git a/docs/content/ui/getting-started/installation.mdx b/docs/content/ui/getting-started/installation.mdx
index 12f0fd6d2..f69199fda 100644
--- a/docs/content/ui/getting-started/installation.mdx
+++ b/docs/content/ui/getting-started/installation.mdx
@@ -1,8 +1,8 @@
---
title: Installation
order: 1
-summary: Learn how to set up Tabler in your project by creating a basic HTML file, adding Tabler’s CSS and JavaScript, and exploring its powerful components to build responsive and visually stunning web applications.
-description: 'Set up Tabler: HTML, CSS, JS, and build stunning UIs.'
+summary: Set up Tabler in a plain HTML file. Create the page, add the CSS and JavaScript from the CDN, and open it in the browser.
+description: 'Set up Tabler in a plain HTML file with the CSS and JavaScript from the CDN.'
---
import Example from '@components/Example.astro'
@@ -13,7 +13,7 @@ import Steps from '@components/Steps.astro'
Using a framework? See [Tabler framework integration guides](/ui/getting-started/frameworks).
-This guide will take you through the essential steps to set up Tabler in your project, from creating a basic HTML file to incorporating Tabler’s styles and scripts. Let’s dive in!
+This page walks through the shortest way to get Tabler running: one HTML file, two tags from the CDN, and a page you can open in the browser. There's no build step involved.
## Setup
@@ -21,7 +21,7 @@ This guide will take you through the essential steps to set up Tabler in your pr
### Create a basic HTML file
-Begin by creating a new `index.html` file in the root of your project. This file will serve as the foundation for your Tabler-based interface. Include the basic HTML structure and a `<meta name="viewport" />` tag for proper responsiveness:
+Start with a new `index.html` file in the root of your project. It only needs the usual HTML skeleton and a `<meta name="viewport" />` tag, so the page scales correctly on phones:
```html
<!doctype html>
@@ -39,11 +39,11 @@ Begin by creating a new `index.html` file in the root of your project. This file
### Add Tabler CSS and JavaScript
-Enhance your page by including Tabler's CSS and JavaScript files. Use the following links to load the core Tabler styles and scripts from the CDN:
+Next, add Tabler's CSS and JavaScript. These two tags load the core files from the CDN:
<CdnImportPackage />
-Update your HTML file to include these resources:
+Put the stylesheet in `<head>` and the script at the end of `<body>`. The file then looks like this:
<Code
lang="html"
@@ -62,14 +62,14 @@ Update your HTML file to include these resources:
</html>`}
/>
-This setup includes the Tabler CSS and JavaScript via a CDN, providing a responsive and functional base for your project.
+That's the whole setup. The CSS covers the layout and components, and the script adds the interactive parts such as dropdowns and modals.
-You can also download the files and include them locally in your project. For more information, see the [Download](/ui/getting-started/download) page.
+If you'd rather not depend on a CDN, you can download the files and serve them from your own project. The [Download](/ui/getting-started/download) page explains how.
### Open in your browser
-Save the file and open it in your browser. You should see your first Tabler-powered page! From here, you can start adding layouts and components to create a fully functional and visually appealing web application.
+Save the file and open it in your browser. You should see your first page styled by Tabler. From here you can add a layout, drop in components and build up the app.
</Steps>
-With these simple steps, you're ready to explore Tabler's features and build stunning web interfaces. For inspiration and guidance, you can view live demos at [preview.tabler.io](https://preview.tabler.io) and consult our [official documentation](https://docs.tabler.io) for detailed instructions and examples.
+If you want to see what's possible, the demo pages at [preview.tabler.io](https://preview.tabler.io) show every layout and component in use. The rest of this documentation covers each of them in detail.
diff --git a/docs/content/ui/getting-started/license.mdx b/docs/content/ui/getting-started/license.mdx
index bcf2cb80a..5364f6517 100644
--- a/docs/content/ui/getting-started/license.mdx
+++ b/docs/content/ui/getting-started/license.mdx
@@ -1,11 +1,11 @@
---
title: Tabler license
-summary: The MIT license grants you the flexibility to use Tabler in commercial or personal projects, modify its code, and distribute it freely. Ensure you include the required license and copyright notices to stay compliant with the terms.
+summary: Tabler is MIT licensed. You can use it in commercial and personal projects, modify it and distribute it, as long as you keep the license and copyright notices.
description: "Tabler's MIT license: freedom to use, modify, and share."
---
import Example from '@components/Example.astro';
-Tabler is an open-source project licensed under the **MIT license**, giving you extensive freedom to use, modify, and distribute the software. This license ensures that you can adapt Tabler to your needs while maintaining the required attributions. While attribution is not required, it is greatly appreciated to acknowledge the hard work of the developers.
+Tabler is open source under the **MIT license**. You can use, modify and distribute it, as long as you keep the license and copyright notices. A credit to Tabler in your project isn't required, but it's appreciated.
## What you can do with Tabler
@@ -19,7 +19,7 @@ The MIT license allows you to:
## What you cannot do with Tabler
-- The software is provided **“as is”**, meaning you cannot hold the authors or contributors liable for any issues, bugs, or damages that may arise from its use.
+- The software is provided **"as is"**, meaning you cannot hold the authors or contributors liable for any issues, bugs, or damages that may arise from its use.
## What you must do when using Tabler
@@ -29,5 +29,3 @@ When using Tabler, you must:
2. Include the **copyright notice** in all copies of the work, except for the footer of the example HTML pages provided in the repository.
For more details, please refer to the full [Tabler License](https://github.com/tabler/tabler/blob/main/LICENSE).
-
-By adhering to these requirements, you help ensure the continued openness and usability of Tabler for everyone. Thank you for supporting open-source software!
diff --git a/docs/content/ui/getting-started/llms.mdx b/docs/content/ui/getting-started/llms.mdx
index 3fa0a3da5..2a4b80fb5 100644
--- a/docs/content/ui/getting-started/llms.mdx
+++ b/docs/content/ui/getting-started/llms.mdx
@@ -10,8 +10,8 @@ Large language models work better when they read the real documentation instead
[llms.txt](https://llmstxt.org) is a simple convention. A site puts one markdown file at its root that describes what the site is about and links to the pages worth reading. Tabler follows it:
-- `https://docs.tabler.io/llms.txt` — the index of the whole documentation.
-- `https://docs.tabler.io/<page>.md` — the markdown version of a single page.
+- `https://docs.tabler.io/llms.txt` - the index of the whole documentation.
+- `https://docs.tabler.io/<page>.md` - the markdown version of a single page.
Both are plain text. You can open them in a browser, download them with `curl`, or paste the url into a chat with an AI assistant.
diff --git a/docs/content/ui/getting-started/rtl.mdx b/docs/content/ui/getting-started/rtl.mdx
index b872f742f..4730424fa 100644
--- a/docs/content/ui/getting-started/rtl.mdx
+++ b/docs/content/ui/getting-started/rtl.mdx
@@ -1,7 +1,7 @@
---
title: RTL support
summary: Turn on right-to-left layouts for Arabic, Hebrew, and other RTL languages, and learn which styles flip automatically.
-description: Learn how to enable RTL in Tabler, which stylesheet to load, how the RTL CSS is generated, and which utility classes are direction-aware.
+description: How to enable RTL in Tabler, which stylesheet to load, how the RTL CSS is generated and which utilities are direction-aware.
related: [/ui/getting-started/upgrade, /ui/components/popover]
---
import Example from '@components/Example.astro';
@@ -22,7 +22,7 @@ You don't need a separate stylesheet for this to work. Setting `dir="rtl"` is en
## The `*.rtl.css` files
-Tabler still builds and publishes an RTL variant of every stylesheet, generated with [rtlcss](https://rtlcss.com/). These exist for a few rules that aren't logical-property-based yet — see [Known gap: text alignment](#known-gap-text-alignment) below — and for projects that upgraded before the logical-properties change and don't want to touch their markup.
+Tabler still builds and publishes an RTL variant of every stylesheet, generated with [rtlcss](https://rtlcss.com/). These exist for a few rules that aren't logical-property-based yet - see [Known gap: text alignment](#known-gap-text-alignment) below - and for projects that upgraded before the logical-properties change and don't want to touch their markup.
Stylesheet|RTL variant
-|-
@@ -35,7 +35,7 @@ Stylesheet|RTL variant
`dist/css/tabler-themes.css`|`dist/css/tabler-themes.rtl.css`
`dist/css/tabler-vendors.css`|`dist/css/tabler-vendors.rtl.css`
-Each of these also has a minified `.rtl.min.css` version. If you load an RTL stylesheet, keep `dir="rtl"` on `<html>` too — the CSS and the `dir` attribute are meant to be used together.
+Each of these also has a minified `.rtl.min.css` version. If you load an RTL stylesheet, keep `dir="rtl"` on `<html>` too - the CSS and the `dir` attribute are meant to be used together.
```diff
<html dir="rtl">
@@ -47,7 +47,7 @@ Each of these also has a minified `.rtl.min.css` version. If you load an RTL sty
The `.rtl.css` files are not hand-written. Tabler's build compiles each stylesheet as usual, then runs it through rtlcss, which flips physical values like `left`/`right`, `margin-left`/`margin-right`, and text direction to their mirrored equivalent.
-If you compile Tabler from source and write your own SCSS, keep this in mind: anything you add to a stylesheet that also runs through the RTL build gets mirrored the same way. When a rule must stay fixed in both directions — an icon, a chevron, a background image position — wrap it in an rtlcss control comment:
+If you compile Tabler from source and write your own SCSS, keep this in mind: anything you add to a stylesheet that also runs through the RTL build gets mirrored the same way. When a rule must stay fixed in both directions - an icon, a chevron, a background image position - wrap it in an rtlcss control comment:
```scss
// Skip the next declaration only
@@ -68,7 +68,7 @@ These comments are read by rtlcss at build time, not by the browser, so they onl
## Direction-aware utilities
-Most of Tabler's spacing and position utilities use CSS logical properties, so they flip automatically with `dir="rtl"` — no RTL stylesheet needed:
+Most of Tabler's spacing and position utilities use CSS logical properties, so they flip automatically with `dir="rtl"` - no RTL stylesheet needed:
Class|Physical equivalent (LTR)|CSS property
-|-|-
diff --git a/docs/content/ui/getting-started/upgrade.mdx b/docs/content/ui/getting-started/upgrade.mdx
index 80ec1d3bd..8e111a13b 100644
--- a/docs/content/ui/getting-started/upgrade.mdx
+++ b/docs/content/ui/getting-started/upgrade.mdx
@@ -1,12 +1,12 @@
---
title: Upgrade to 1.5
-summary: Move your project from Tabler 1.4 to 1.5. This guide lists every breaking change, with a before and after example for each one, so you know exactly what to update in your markup, JavaScript and Sass.
+summary: Move a project from Tabler 1.4 to 1.5. Every breaking change is listed with a before and after example for markup, JavaScript and Sass.
description: Upgrade guide from Tabler 1.4 to 1.5 with all breaking changes, renamed classes and Sass updates.
added-in: '1.5.0'
related: [/ui/getting-started/rtl]
---
-Most projects only use the compiled CSS and JavaScript from `dist/`. If that is you, the upgrade is short: update the package, remove Bootstrap, and check the [color mode default](#color-mode-defaults-to-auto) and the [visual changes](#visual-changes). Projects that compile Tabler from the Sass sources have more work to do — see [Sass changes](#sass-changes).
+Most projects only use the compiled CSS and JavaScript from `dist/`. If that is you, the upgrade is short: update the package, remove Bootstrap, and check the [color mode default](#color-mode-defaults-to-auto) and the [visual changes](#visual-changes). Projects that compile Tabler from the Sass sources have more work to do - see [Sass changes](#sass-changes).
## Overview
@@ -14,18 +14,18 @@ Use this table to find the changes that affect you.
If you…|You need to…
---|---
-Load `dist/css` and `dist/js`|Remove Bootstrap's CSS and JS — Tabler now ships them
+Load `dist/css` and `dist/js`|Remove Bootstrap's CSS and JS - Tabler now ships them
Load `bootstrap.bundle.min.js`|Remove it, or components will start twice
Use `window.bootstrap.Modal`|Use `window.tabler.Modal`
Compile `scss/tabler.scss` yourself|Switch to `@use … with ()` and add the PostCSS prefix step
Override Sass variables|Check the [list of removed variables](#removed-sass-variables)
Use `.badges-list` or `.tags-list`|Rename to `.badge-list` and `.tag-list` (old names still work)
Use ApexCharts|Update to ApexCharts 7
-Use Turbo with Tabler|The built-in integration is gone — see [Turbo](#turbo-integration-removed)
-Load `tabler-theme.js`|Pages follow the OS color scheme now — see [Color mode](#color-mode-defaults-to-auto)
+Use Turbo with Tabler|The built-in integration is gone - see [Turbo](#turbo-integration-removed)
+Load `tabler-theme.js`|Pages follow the OS color scheme now - see [Color mode](#color-mode-defaults-to-auto)
Use payment provider icons|Check the [removed providers](#removed-payment-providers)
Link files inside `dist/libs`|Check the [moved paths](#smaller-distlibs-folder)
-Load `tabler.rtl.css`|You can drop it — plain `tabler.css` now handles RTL
+Load `tabler.rtl.css`|You can drop it - plain `tabler.css` now handles RTL
## Update the package
@@ -193,7 +193,7 @@ import prefixCustomProperties from 'postcss-prefix-custom-properties'
const result = await postcss([
prefixCustomProperties({
prefix: 'tblr-',
- // Vendor stylesheets read their own variable names — never prefix these
+ // Vendor stylesheets read their own variable names - never prefix these
ignore: [/^--tblr-/, /^--bs-/, /^--fc-/, /^--gl-/, /^--litepicker-/, /^--plyr-/, /^--ts-/, '--section-bg'],
}),
]).process(css, { from: undefined })
@@ -267,14 +267,14 @@ Old|New|Status
These changes are not breaking, but they change how a page looks. Check your screens after the upgrade.
-- **Fonts** — the defaults are now the system fonts of the device, instead of Inter. To keep your old stack, set `--tblr-font-sans-serif`.
-- **Shadows** — the `--tblr-shadow-*` tokens use a new `xs` to `2xl` scale, plus `overlay`, with softer defaults.
-- **Colors** — body text is lighter, dark mode borders and disabled inputs are easier to see, and `--tblr-gray-*-fg` tokens now map straight to `--tblr-gray-*`.
-- **Links** — in dark mode, links use a lighter tint of the primary color, so they meet the 4.5:1 contrast ratio on dark surfaces. Override `--tblr-link-color` to change it.
-- **Sizes** — `.form-control`, `.btn` and `.input-group` now agree on `sm` and `lg` sizes, `.btn-icon` is square, and `.icon-sm` uses a `1.5` stroke width.
-- **Cards** — `--tblr-card-header-bg` and `--tblr-card-footer-bg` can be set on their own, and the card status bar is `3px`.
-- **Layout** — `scrollbar-gutter: stable` on `html` removes the white gap next to the scrollbar.
-- **Trending** — the component uses the `arrow-up` and `arrow-down` icons instead of `trending-up` and `trending-down`.
+- **Fonts**: the defaults are now the system fonts of the device, instead of Inter. To keep your old stack, set `--tblr-font-sans-serif`.
+- **Shadows**: the `--tblr-shadow-*` tokens use a new `xs` to `2xl` scale, plus `overlay`, with softer defaults.
+- **Colors**: body text is lighter, dark mode borders and disabled inputs are easier to see, and `--tblr-gray-*-fg` tokens now map straight to `--tblr-gray-*`.
+- **Links**: in dark mode, links use a lighter tint of the primary color, so they meet the 4.5:1 contrast ratio on dark surfaces. Override `--tblr-link-color` to change it.
+- **Sizes**: `.form-control`, `.btn` and `.input-group` now agree on `sm` and `lg` sizes, `.btn-icon` is square, and `.icon-sm` uses a `1.5` stroke width.
+- **Cards**: `--tblr-card-header-bg` and `--tblr-card-footer-bg` can be set on their own, and the card status bar is `3px`.
+- **Layout**: `scrollbar-gutter: stable` on `html` removes the white gap next to the scrollbar.
+- **Trending**: the component uses the `arrow-up` and `arrow-down` icons instead of `trending-up` and `trending-down`.
## RTL
@@ -290,7 +290,7 @@ The `*.rtl.css` files are still published, so nothing breaks if you keep them. S
## Third party libraries
-- **ApexCharts** moved from 3.54 to 7.0. If you install ApexCharts yourself, update it too and read the [ApexCharts changelog](https://github.com/apexcharts/apexcharts.js/releases) — the major versions renamed several options. Charts also read `--chart-{id}-color-{index}` variables now.
+- **ApexCharts** moved from 3.54 to 7.0. If you install ApexCharts yourself, update it too and read the [ApexCharts changelog](https://github.com/apexcharts/apexcharts.js/releases) - the major versions renamed several options. Charts also read `--chart-{id}-color-{index}` variables now.
- **Tabler Icons** moved to 3.46, and **Tabler Illustrations** to 1.16.
## Browser support
diff --git a/docs/content/ui/index.mdx b/docs/content/ui/index.mdx
index e4f5c9fb6..807062642 100644
--- a/docs/content/ui/index.mdx
+++ b/docs/content/ui/index.mdx
@@ -2,7 +2,7 @@
title: Tabler UI
order: 1
description: Free and open source web application UI kit based on Bootstrap
-summary: Tabler UI is a carefully crafted collection of modern and responsive user interface components. Built on top of Bootstrap, it helps developers create stunning and functional web applications quickly and efficiently.
+summary: Tabler UI is a set of responsive interface components built on Bootstrap, for admin panels, dashboards and web apps.
---
import { Image } from 'astro:assets'
diff --git a/docs/content/ui/layout/index.mdx b/docs/content/ui/layout/index.mdx
index 65bd6df50..ebec860ee 100644
--- a/docs/content/ui/layout/index.mdx
+++ b/docs/content/ui/layout/index.mdx
@@ -1,8 +1,8 @@
---
title: Layout
order: 3
-description: Learn how to structure Tabler pages - navigation placement, content arrangement, and page headers that keep your app consistent.
-summary: The layout section covers essential tools and techniques for structuring content and organizing UI elements, helping you build visually appealing and functional designs.
+description: How Tabler pages are structured, from navigation placement and content arrangement to page headers.
+summary: "How Tabler pages are structured: where the navigation sits, how content is arranged and how page headers behave."
---
Layout defines how your pages are structured: where navigation sits, how content is arranged, and how page headers behave. Use these patterns to keep every page of your application consistent.
diff --git a/docs/content/ui/layout/navbars.mdx b/docs/content/ui/layout/navbars.mdx
index 308d4789f..ab54f87d5 100644
--- a/docs/content/ui/layout/navbars.mdx
+++ b/docs/content/ui/layout/navbars.mdx
@@ -1,7 +1,7 @@
---
title: Navbars
-summary: A navbar serves as a central navigation tool, offering users quick and easy access to key sections of a website or application, improving usability and enhancing the overall user experience.
-description: Create and customize responsive navigation bars with ease.
+summary: A navbar is the horizontal bar at the top of the page with the logo, the main links and controls such as search or a user menu.
+description: Responsive navigation bars, with the markup, the variants and a language selector.
related: [/ui/layout/page-layouts, /ui/components/dropdown]
---
@@ -10,20 +10,19 @@ import Logo from '@shared/components/navbar/Logo.astro'
import Icon from '@ui/Icon.astro'
import CodeDocs from '@components/CodeDocs.astro';
-The navbar is a core component of any website or application, serving as the primary navigation tool. It provides users with quick access to key sections, enhancing usability and improving the overall user experience. Positioned typically at the top of the page, the navbar can contain links, [buttons](/ui/components/button), branding elements,
-and even interactive components like [dropdown menus](/ui/components/dropdown) or search bars.
+A navbar is the horizontal bar at the top of the page. It holds the logo, the main links and often a search field, [buttons](/ui/components/button) or [dropdown menus](/ui/components/dropdown) such as a user menu.
-With Tabler's utility classes, creating and customizing a responsive navbar is straightforward. Whether you’re building a simple site or a complex dashboard, Tabler’s navbar utilities offer the flexibility to design navigation that aligns perfectly with your project’s requirements.
+On small screens the links collapse behind a toggle button, and the same markup works in the light and the dark color mode.
## Sample navbar
-To create a navbar, use the `.navbar` class. The navbar is a horizontal bar that contains links to different sections of a website. It is typically placed at the top of the page and is used to provide navigation to the rest of the site.
+Start with the `.navbar` class on a `header` element. `navbar-expand-md` sets the breakpoint at which the collapsed menu turns into a row of links, and `d-print-none` hides the bar when the page is printed.
```html
<header class="navbar navbar-expand-md d-print-none">...</header>
```
-The navbar can contain links, buttons, and other elements. You can customize the appearance of the navbar by adding classes to the elements inside it.
+Inside it, a `container-xl` keeps the content aligned with the page. The full markup with the brand, the toggler, the links and a user menu looks like this:
<Example>
<header class="navbar navbar-expand-md d-print-none">
diff --git a/docs/content/ui/layout/navs-tabs.mdx b/docs/content/ui/layout/navs-tabs.mdx
index e1fdf8d48..4a57bbe1d 100644
--- a/docs/content/ui/layout/navs-tabs.mdx
+++ b/docs/content/ui/layout/navs-tabs.mdx
@@ -1,20 +1,18 @@
---
title: Navs and tabs
-summary: This guide covers the basics of creating different types of navigation bars and tabs, including horizontal, vertical, pill-shaped, and underline-styled navs.
-description: "Essential guide to nav styles: tabs, pills, dropdowns, and more."
+summary: "How to build navs and tabs: horizontal and vertical navs, tabs, pills, the underline style and tabs with a dropdown."
+description: "Nav styles: tabs, pills, underline, dropdowns and vertical navs."
related: [/ui/components/tab]
---
import Example from '@components/Example.astro';
import CodeDocs from '@components/CodeDocs.astro';
-Navigation bars are essential components of modern web applications, providing users with intuitive ways to navigate between different sections and content. This guide explores various types of navigation bars and tabs that can be easily implemented using predefined classes in HTML and CSS. Each type serves specific use cases, from horizontal and vertical layouts to tabbed interfaces and dropdown menus. By utilizing these examples, developers can enhance the usability and aesthetics of their web projects.
+A nav is a list of links, and the classes on this page change how that list looks: a horizontal row, a vertical column, tabs, pills or a line under the active link. All of them start from the same `.nav` markup, so you can switch between styles by changing one class.
## Horizontal nav
If you want to create a horizontal navigation bar, you can use the `.nav` class. The `.nav-item` class is used to style each item within the navigation bar, and `.nav-link` is applied to the links. The `.active` class highlights the current active link, while the `.disabled` class styles non-clickable links.
-Look at the example below to see how the horizontal navigation bar is displayed.
-
<Example>
<ul class="nav">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Active</a></li>
@@ -25,7 +23,7 @@ Look at the example below to see how the horizontal navigation bar is displayed.
## Vertical nav
-To create a vertical navigation bar, add the `.flex-column` class to the `.nav` element. This arranges the navigation items in a column instead of a row, making it suitable for sidebars or vertical menus.
+To create a vertical navigation bar, add the `.flex-column` class to the `.nav` element. This arranges the items in a column instead of a row, which is what you want in a sidebar.
```html
<ul class="nav flex-column">
@@ -33,8 +31,6 @@ To create a vertical navigation bar, add the `.flex-column` class to the `.nav`
</ul>
```
-There is an example below to see how the vertical navigation bar is displayed.
-
<Example>
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Active</a></li>
@@ -45,7 +41,7 @@ There is an example below to see how the vertical navigation bar is displayed.
## Tabs
-To create a tabbed navigation interface, use the `.nav-tabs` class. This is ideal for displaying different content sections within a single interface, where each tab represents a section.
+To create a tabbed navigation interface, use the `.nav-tabs` class. Use it when each link switches a panel of content on the same page, so every tab stands for one section.
```html
<ul class="nav nav-tabs">
@@ -53,8 +49,6 @@ To create a tabbed navigation interface, use the `.nav-tabs` class. This is idea
</ul>
```
-The example below shows how the tabbed navigation interface is displayed.
-
<Example>
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Active</a></li>
@@ -65,7 +59,7 @@ The example below shows how the tabbed navigation interface is displayed.
## Pills
-For a pill-shaped navigation style, use the `.nav-pills` class. This is a great choice for a sleek, modern look, especially in the interactive UI components.
+For a pill-shaped navigation style, use the `.nav-pills` class. The active link gets a filled, rounded background instead of a border.
<Example>
<ul class="nav nav-pills">
@@ -77,7 +71,7 @@ For a pill-shaped navigation style, use the `.nav-pills` class. This is a great
## Underline
-To create a navigation bar with an underline effect for active links, use the `.nav-underline` class. This provides a clean and minimalistic style.
+To create a navigation bar with an underline effect for active links, use the `.nav-underline` class. The active link is marked with a line under it and nothing else.
<Example>
<ul class="nav nav-underline">
@@ -89,7 +83,7 @@ To create a navigation bar with an underline effect for active links, use the `.
## Tabs with dropdown
-You can enhance tabs by adding [dropdown menus](/ui/components/dropdown) using the `.dropdown` class inside a `.nav-tabs` structure. This allows for additional options under a single tab, improving the navigation experience.
+A tab can open a [dropdown menu](/ui/components/dropdown). Put the `.dropdown` markup inside a `.nav-item` of the `.nav-tabs` list. That's useful when one tab has several related options and you don't want a separate tab for each.
```html
<ul class="nav nav-tabs">
@@ -111,8 +105,6 @@ You can enhance tabs by adding [dropdown menus](/ui/components/dropdown) using t
</ul>
```
-Example below shows how tabs with dropdown menus are displayed.
-
<Example overflow="visible">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Active</a></li>
diff --git a/docs/content/ui/layout/page-headers.mdx b/docs/content/ui/layout/page-headers.mdx
index 3c8515e6e..375522a5f 100644
--- a/docs/content/ui/layout/page-headers.mdx
+++ b/docs/content/ui/layout/page-headers.mdx
@@ -1,6 +1,6 @@
---
title: Page headers
-summary: Page heading examples for Tabler
+summary: Page header layouts with a title, a pretitle, breadcrumbs, meta information and action buttons.
description: Ready-to-use page header examples with titles, subtitles, breadcrumbs, and action buttons for consistent page layouts.
related: [/ui/layout/page-layouts, /ui/components/breadcrumb]
---
@@ -94,7 +94,7 @@ Combine the page title with a result count, a search input, and a primary action
## Bordered header
-A page header with a border to separate content is an effective way to organize and present information in a clear and visually appealing way.
+Add `page-header-border` to draw a line under the header, which separates it from the content below.
<Example>
<div class="page-header page-header-border">
@@ -122,9 +122,7 @@ A page header with a border to separate content is an effective way to organize
## Header with breadcrumb and actions
-A page header with [breadcrumb](/ui/components/breadcrumb) and actions is a common design element found in many websites and applications. The header typically appears at the top of the page and includes a breadcrumb trail, which shows the user the path they have taken to reach the current page. The breadcrumb can be clickable, allowing the user to navigate back to previous pages.
-
-In addition to the breadcrumb, the header often includes actions or buttons that allow the user to perform common tasks related to the current page. These actions may include things like adding a new item, editing existing content, or deleting items.
+A [breadcrumb](/ui/components/breadcrumb) above the title shows where the page sits in the hierarchy, and the actions on the right hold the tasks for this page, such as adding or editing an item.
<Example>
<div class="page-header">
diff --git a/docs/content/ui/layout/page-layouts.mdx b/docs/content/ui/layout/page-layouts.mdx
index 5f2c69825..111996f1d 100644
--- a/docs/content/ui/layout/page-layouts.mdx
+++ b/docs/content/ui/layout/page-layouts.mdx
@@ -1,7 +1,7 @@
---
title: Page layouts
summary: Learn how to build a sample version of the dashboard
-description: Learn how to combine containers, navigation, and page structure to build a complete dashboard layout step by step.
+description: Combine containers, navigation and page structure into a complete dashboard layout, step by step.
related: [/ui/layout/page-headers, /ui/layout/navbars]
---
@@ -242,7 +242,7 @@ Group related menu items with a label. Add a `nav-section-title` list item befor
</ul>
```
-The label is aligned with the item text and muted, so it does not compete with the links. In the folded sidebar, the label text is replaced with a short separator line centered in the gap between the groups, and the label keeps its height, so the menu does not shift when the sidebar folds. Section labels render only in vertical navbars — a horizontal navbar hides them.
+The label is aligned with the item text and muted, so it does not compete with the links. In the folded sidebar, the label text is replaced with a short separator line centered in the gap between the groups, and the label keeps its height, so the menu does not shift when the sidebar folds. Section labels render only in vertical navbars - a horizontal navbar hides them.
### Sidebar footer and user block
diff --git a/docs/content/ui/plugins/advanced-select.mdx b/docs/content/ui/plugins/advanced-select.mdx
index 32a3d1e74..6685af8ec 100644
--- a/docs/content/ui/plugins/advanced-select.mdx
+++ b/docs/content/ui/plugins/advanced-select.mdx
@@ -2,7 +2,7 @@
title: Advanced select
seoTitle: Advanced select (Tom Select)
order: 8
-summary: Tom Select turns a normal `<select>` into a searchable, keyboard-friendly dropdown. Use it for long option lists, multi-value fields, or options that need an avatar, flag, or badge next to the text.
+summary: Tom Select turns a `<select>` into a searchable, keyboard-friendly dropdown, for long option lists, multi-value fields and options with an avatar or a flag.
docs-libs: [tom-select]
description: Build searchable single and multi-value selects with the Tom Select plugin, including optgroups, validation states, and rich options with avatars or flags.
related: [/ui/forms/select-group, /ui/forms/elements]
@@ -135,7 +135,7 @@ Add `.is-valid` or `.is-invalid` to the `<select>` to show a validation state. T
### Rich options
-An option can carry extra markup — an avatar, a flag, a badge — through a `data-custom-properties` attribute. Read it in a custom `render.option` / `render.item` function and show it next to the option text.
+An option can carry extra markup - an avatar, a flag, a badge - through a `data-custom-properties` attribute. Read it in a custom `render.option` / `render.item` function and show it next to the option text.
<Example>
<select class="form-select" id="select-avatar" data-placeholder="Assign to…">
@@ -191,7 +191,7 @@ These are the options you will need most often. Tom Select has more, and they ar
- Always add a `<label>` linked to the `<select>` with `for` and `id`. Tom Select's generated markup does not replace the need for a label.
- The dropdown can be operated with the keyboard: type to search, arrow keys to move between options, <kbd>Enter</kbd> to pick one, and <kbd>Backspace</kbd> to remove the last tag on a multi-value select.
-- When using `render.option`, keep enough text content in the rendered HTML — an avatar or flag alone does not tell a screen reader user which option it is.
+- When using `render.option`, keep enough text content in the rendered HTML - an avatar or flag alone does not tell a screen reader user which option it is.
- Escape user-supplied text in custom render functions with the `escape` argument, so option text can never break out of the generated HTML.
<script>{`
diff --git a/docs/content/ui/plugins/chart.mdx b/docs/content/ui/plugins/chart.mdx
index f7700a337..7988687f7 100644
--- a/docs/content/ui/plugins/chart.mdx
+++ b/docs/content/ui/plugins/chart.mdx
@@ -1,7 +1,7 @@
---
title: Chart
docs-libs: [apexcharts]
-summary: Tabler uses ApexCharts - a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.
+summary: Tabler draws charts with ApexCharts and ships a container class, a color palette and theme tokens that make them match the interface.
description: Build interactive line, bar, pie, and other charts with ApexCharts. Copy ready-to-use configurations styled to match Tabler.
related: [/ui/plugins/countup, /ui/components/trending]
---
@@ -156,7 +156,7 @@ See the [ApexCharts documentation](https://apexcharts.com/docs/) for the full li
### Line chart
-Line charts are an essential tool for visualizing data trends over time. They are particularly useful for representing continuous data, such as stock prices, website traffic, or user activity. Below is an example of a line chart showcasing session duration, page views, and total visits:
+A line chart shows how values change over time, such as traffic or sales per day. This example has three series: session duration, page views and total visits:
<Example>
<div class="card">
@@ -168,7 +168,7 @@ Line charts are an essential tool for visualizing data trends over time. They ar
### Area chart
-Area charts are ideal for representing cumulative data over time. They add visual emphasis to trends by filling the space under the line, making it easier to compare values. Here's an example of an area chart with smooth transitions and data from two series:
+An area chart is a line chart with the space under the line filled in, which makes the size of each series easier to compare. This example has two series and smooth curves:
<Example>
<div class="card">
@@ -180,7 +180,7 @@ Area charts are ideal for representing cumulative data over time. They add visua
### Bar chart
-Bar charts are highly effective for comparing data across different categories. They provide a clear and concise way to visualize differences in values, making them perfect for analyzing categorical data. Here's an example of a bar chart with stacked bars for enhanced readability:
+A bar chart compares values across categories. This example stacks the bars, so each bar also shows the total:
<Example>
<div class="card">
@@ -192,7 +192,7 @@ Bar charts are highly effective for comparing data across different categories.
### Pie chart
-Pie charts are a simple and effective way to visualize proportions and ratios. They are commonly used to represent data as percentages of a whole, making them ideal for displaying parts of a dataset. Below is an example of a pie chart showcasing distribution across categories:
+A pie chart shows how a whole splits into parts. This example shows the share of each category:
<Example>
<div class="card">
@@ -204,7 +204,7 @@ Pie charts are a simple and effective way to visualize proportions and ratios. T
### Heatmap chart
-Heatmaps provide a graphical representation of data where individual values are represented by color intensity. They are particularly useful for identifying patterns or anomalies within large datasets. Here's an example of a heatmap chart to visualize data distributions:
+A heatmap encodes each value as a color, which makes a pattern in a large grid easy to see. This example shows a distribution across a grid:
<Example>
<div class="card">
@@ -300,7 +300,7 @@ A funnel shows how many items are left at each step of a process. It is a horizo
### Advanced example
-For more complex data visualizations, you can create advanced charts with multiple series and custom configurations. Below is an example of a social media referrals chart combining data from Facebook, Twitter, and Dribbble:
+You can combine several series and custom options in one chart. This example shows referrals from Facebook, Twitter and Dribbble:
<Example>
<div class="card">
@@ -377,7 +377,7 @@ Charts that share a `chart.group` name move together. Hover one and the others s
## Legend key
-ApexCharts draws its own legend, but you can also build a plain-HTML legend next to a chart's title — for example to label the series above the chart instead of below it. Add a `legend` span before each label and color it with a `bg-*` utility class.
+ApexCharts draws its own legend, but you can also build a plain-HTML legend next to a chart's title - for example to label the series above the chart instead of below it. Add a `legend` span before each label and color it with a `bg-*` utility class.
<Example>
<div class="d-flex align-items-center gap-3">
diff --git a/docs/content/ui/plugins/color-picker.mdx b/docs/content/ui/plugins/color-picker.mdx
index 7e3432606..278003ffa 100644
--- a/docs/content/ui/plugins/color-picker.mdx
+++ b/docs/content/ui/plugins/color-picker.mdx
@@ -1,7 +1,7 @@
---
title: Color picker
order: 9
-summary: A color picker lets users pick a color from a gradient, a set of swatches, or by typing a value. Use it in theme settings, tag colors, and any field that stores a color.
+summary: A color picker lets users pick a color from a gradient, a set of swatches or a typed value, for theme settings and tag colors.
docs-libs: [coloris.js]
description: Let users pick a color in a form.
related: [/ui/plugins/date-picker]
diff --git a/docs/content/ui/plugins/countup.mdx b/docs/content/ui/plugins/countup.mdx
index d5066559b..8eb3e4bed 100644
--- a/docs/content/ui/plugins/countup.mdx
+++ b/docs/content/ui/plugins/countup.mdx
@@ -1,8 +1,8 @@
---
title: Countup
-summary: A countup element is used to display numerical data in an interesting way and make the interface more interactive.
+summary: A countup animates a number from zero to its final value when it scrolls into view.
docs-libs: [countup]
-description: Animate numbers with the countup component to display statistics dynamically and make dashboards more engaging.
+description: Animate numbers with the countup component, for statistics on dashboards and landing pages.
related: [/ui/plugins/chart]
---
import Example from '@components/Example.astro';
@@ -57,7 +57,7 @@ Pass options as JSON in the same attribute. Every option below works this way.
### Duration
-Set the `duration` to determine how long the animation should take. By default, the duration is set to 2 seconds, but you can modify it as you wish.
+`duration` sets how long the animation takes, in seconds. The default is 2.
<Example vertical separated>
<h1 data-countup>30000</h1> <h1 data-countup='{"duration":4}'>30000</h1> <h1 data-countup='{"duration":6}'>30000</h1>
@@ -65,9 +65,7 @@ Set the `duration` to determine how long the animation should take. By default,
### Starting value
-By default the countup will start from zero. If you want to set a different start value use `startVal`.
-You can also set the start value to be greater than the final value, so that it counts down instead of up.
-To see how the starting value affects the animation, look at the example below.
+`startVal` sets the starting value; the default is zero. A start value above the final one makes the number count down instead of up.
<Example vertical separated>
<h1 data-countup='{"startVal":12345}'>30000</h1> <h1 data-countup='{"startVal":47655}'>30000</h1>
@@ -75,7 +73,7 @@ To see how the starting value affects the animation, look at the example below.
### Decimal places
-Set how many decimal numbers should be displayed using `decimalPlaces`. By default, the number of decimal places is set to 0.
+`decimalPlaces` sets how many decimals are shown. The default is 0.
<Example vertical separated>
<h1 data-countup>3.123</h1> <h1 data-countup='{"decimalPlaces":1}'>3.123</h1> <h1 data-countup='{"decimalPlaces":2}'>3.123</h1> <h1 data-countup='{"decimalPlaces":3}'>3.123</h1>
@@ -83,7 +81,7 @@ Set how many decimal numbers should be displayed using `decimalPlaces`. By defau
### Easing
-Disable easing using `"useEasing": false`. Easing is set to `true` by default, so that the animation speed changes over the course of its duration. Easing can be disabled to make the animation linear.
+Easing is on by default, so the animation slows down towards the end. Set `"useEasing": false` for a linear animation.
<Example vertical separated>
<h1 data-countup>30000</h1> <h1 data-countup='{"useEasing": false}'>30000</h1>
@@ -91,7 +89,7 @@ Disable easing using `"useEasing": false`. Easing is set to `true` by default, s
### Use grouping
-Disable grouping using `"useGrouping": false`. Grouping is set to `true` by default, so that the number is displayed with a separator.
+Grouping is on by default, so thousands get a separator. Set `"useGrouping": false` to turn it off.
<Example vertical separated>
<h1 data-countup>30000</h1> <h1 data-countup='{"useGrouping": false}'>30000</h1>
@@ -99,7 +97,7 @@ Disable grouping using `"useGrouping": false`. Grouping is set to `true` by defa
### Separator
-You can change the default separator using `separator` and specifying the one you wish to use.
+`separator` sets the thousands separator.
<Example vertical separated>
<h1 data-countup>3000000</h1> <h1 data-countup='{"separator":" "}'>3000000</h1>
@@ -107,7 +105,7 @@ You can change the default separator using `separator` and specifying the one yo
### Decimal separator
-You can change the default decimal separator using `decimal` and specifying the one you wish to use.
+`decimal` sets the decimal separator.
<Example vertical separated>
<h1 data-countup='{"decimalPlaces":2}'>3.12</h1> <h1 data-countup='{"decimalPlaces":2,"decimal":","}'>3.12</h1>
@@ -115,7 +113,7 @@ You can change the default decimal separator using `decimal` and specifying the
### Prefix
-Set the countup prefix using `prefix` and specifying the prefix you want to add, for instance a currency symbol.
+`prefix` adds text before the number, for example a currency symbol.
<Example vertical separated>
<h1 data-countup='{"prefix":"$"}'>30000</h1> <h1 data-countup='{"prefix":"€"}'>30000</h1>
@@ -123,7 +121,7 @@ Set the countup prefix using `prefix` and specifying the prefix you want to add,
### Suffix
-Set the countup suffix using `suffix` and specifying the suffix you want to add, for instance a percentage symbol.
+`suffix` adds text after the number, for example a percent sign.
<Example vertical separated>
<h1 data-countup='{"suffix":"%"}'>300</h1> <h1 data-countup='{"suffix":"‰"}'>300</h1>
diff --git a/docs/content/ui/plugins/date-picker.mdx b/docs/content/ui/plugins/date-picker.mdx
index f15950af8..97f336b0a 100644
--- a/docs/content/ui/plugins/date-picker.mdx
+++ b/docs/content/ui/plugins/date-picker.mdx
@@ -1,7 +1,7 @@
---
title: Date picker
order: 10
-summary: A date picker lets users pick a date from a calendar instead of typing it by hand. Use it for booking forms, event dates, deadlines, or any field that expects a specific date.
+summary: A date picker lets users pick a date from a calendar instead of typing it, for booking forms, deadlines and other date fields.
docs-libs: [litepicker]
description: Let users pick a date from a calendar with the Litepicker plugin, as a plain input, an icon input, or an inline calendar.
related: [/ui/forms/elements, /ui/plugins/color-picker]
@@ -128,7 +128,7 @@ These are the options you will need most often. Litepicker has more, and they ar
## Accessibility
- Always add a `<label>` linked to the input with `for` and `id`. The calendar icon alone does not say what the field is for.
-- Litepicker's month-navigation buttons carry no accessible name on their own — set `aria-label` on the `render` event, as shown above.
+- Litepicker's month-navigation buttons carry no accessible name on their own - set `aria-label` on the `render` event, as shown above.
- Keep the typed value working. Users can type a date directly into the input; the picker is a shortcut, not the only way to set the value.
- The picker can be operated with the keyboard: focus the input to open it, use arrow keys to move between days, and <kbd>Enter</kbd> to pick a date.
diff --git a/docs/content/ui/plugins/dropzone.mdx b/docs/content/ui/plugins/dropzone.mdx
index f418165be..5c761570d 100644
--- a/docs/content/ui/plugins/dropzone.mdx
+++ b/docs/content/ui/plugins/dropzone.mdx
@@ -1,6 +1,6 @@
---
title: Dropzone
-summary: Dropzone is a simple JavaScript library that helps you add file drag and drop functionality to your web forms. It is one of the most popular drag and drop libraries on the web and is used by millions of people.
+summary: Dropzone adds drag-and-drop file uploads to a form, with previews and progress bars styled by Tabler.
description: Add drag-and-drop file uploads to your forms with the Dropzone library, styled to match Tabler out of the box.
docs-libs: [dropzone]
related: [/ui/forms/elements]
@@ -33,7 +33,7 @@ Tabler restyles the drop area in the vendors plugin, so include `tabler-vendors.
## Basic usage
-The basic implementation of Dropzone allows you to quickly enable drag-and-drop file uploads on your web forms. By default, it provides a fallback for browsers that don’t support drag-and-drop functionality. Below is an example of how to set up a simple Dropzone form.
+The basic setup is a `form` with the `dropzone` class. The `.fallback` element holds a normal file input for browsers without drag and drop support:
```html
<form class="dropzone" id="dropzone-default" action="." autocomplete="off" novalidate>
@@ -43,7 +43,7 @@ The basic implementation of Dropzone allows you to quickly enable drag-and-drop
</form>
```
-To initialize the Dropzone form, you need to create a new instance of the Dropzone class and pass the form element as an argument. Here’s how you can do it:
+Then create a `Dropzone` instance for the form:
```html
<script>
@@ -55,7 +55,7 @@ To initialize the Dropzone form, you need to create a new instance of the Dropzo
</script>
```
-The Dropzone form will now be active and ready to accept file uploads. When a user drags and drops a file onto the form, the file will be uploaded to the server automatically.
+From now on a file dropped on the form is uploaded right away, to the URL in the form's `action` attribute.
<Example>
<form class="dropzone" id="dropzone-default" action="." autocomplete="off" novalidate> <div class="fallback"> <input name="..." type="file" /> </div> </form> <script>{`document.addEventListener("DOMContentLoaded", function () { new Dropzone("#dropzone-default"); });`}</script>
@@ -63,21 +63,19 @@ The Dropzone form will now be active and ready to accept file uploads. When a us
## Add multiple files
-To allow users to upload multiple files at once, you can enable the `multiple` attribute in the input field. This is particularly useful for applications that require batch uploads, such as image galleries or document management systems. Here’s how to configure Dropzone to accept multiple files:
+Add the `multiple` attribute to the input to accept several files at once, for example for a gallery upload:
```html
<input name="..." type="file" multiple />
```
-By adding the `multiple` attribute to the input field, users can select multiple files from their local storage and upload them all at once. The Dropzone form will handle the file uploads automatically.
-
<Example>
<form class="dropzone" id="dropzone-mulitple" action="." autocomplete="off" novalidate> <div class="fallback"> <input name="file" type="file" multiple /> </div> </form> <script>{`document.addEventListener("DOMContentLoaded", function () { new Dropzone("#dropzone-mulitple"); });`}</script>
</Example>
## Custom dropzone
-You can further enhance the user experience by customizing the Dropzone interface. For instance, you can modify the drop area with custom messages or styles to make the file upload process more engaging and user-friendly. Below is an example of a custom Dropzone configuration:
+You can replace the default message in the drop area with your own markup, for example an icon and a hint about the accepted file types:
<Example>
<form class="dropzone" id="dropzone-custom" action="." autocomplete="off" novalidate> <div class="fallback"> <input name="file" type="file" /> </div> <div class="dz-message"> <h3 class="dropzone-msg-title">Your text here</h3> <span class="dropzone-msg-desc">Your custom description here</span> <button type="button" class="btn btn-sm mt-3">Select files</button> </div> </form> <script>{`document.addEventListener("DOMContentLoaded", function () { new Dropzone("#dropzone-custom"); });`}</script>
diff --git a/docs/content/ui/plugins/flags.mdx b/docs/content/ui/plugins/flags.mdx
index 47403a13d..17f552040 100644
--- a/docs/content/ui/plugins/flags.mdx
+++ b/docs/content/ui/plugins/flags.mdx
@@ -1,6 +1,6 @@
---
title: Flags
-summary: Thanks to the Tabler flags plugin, you can create flags to visually represent countries or languages. Flags are often used in forms, as an element of a delivery address, phone number dialling code and many more.
+summary: The flags plugin adds country flags as CSS classes, for language switchers, address forms and phone number fields.
description: Display country flags with the Tabler flags plugin. Add a flag with two CSS classes and scale it with ready-made size modifiers.
css-plugins: [flags]
source: core/scss/ui/_flags.scss
@@ -10,7 +10,7 @@ classnames:
desc: Container element, a rounded rectangle holding one flag
color:
- class: flag-country-{code}
- desc: The country to show, by ISO code — for example flag-country-pl or flag-country-us
+ desc: The country to show, by ISO code - for example flag-country-pl or flag-country-us
size:
- class: flag-{size}
desc: From flag-xxs to flag-2xl; the default matches an avatar
@@ -22,7 +22,7 @@ import CdnImportPlugin from '@components/CdnImportPlugin.astro'
## Installation
-This part of Tabler is distributed as a plugin. To enable it you should include `tabler-flags.css` or `tabler-flags.min.css` file in your page.
+The flags are a plugin. Include `tabler-flags.css` or `tabler-flags.min.css` in your page to enable them.
You can also include the plugin via CDN:
@@ -30,7 +30,7 @@ You can also include the plugin via CDN:
## Flag
-To create a flag, add the `flag` class to a component and choose the country whose flag you want to use.
+Add the `flag` class to an element and a country class from the list below.
<Example centered>
<span class="flag flag-country-us"></span>
@@ -38,7 +38,7 @@ To create a flag, add the `flag` class to a component and choose the country who
## Country flags
-To use the flag of a particular country, add the `flag-country-(country name)` class. For example, to create a flag of Andorra, you should use the following class: `.flag-country-ad`. The full list of countries can be found at the end of this page.
+The country class is `flag-country-` followed by the two-letter country code, for example `.flag-country-ad` for Andorra. The full list is at the end of this page.
<Example centered>
<span class="flag flag-country-tg"></span>
@@ -48,7 +48,7 @@ To use the flag of a particular country, add the `flag-country-(country name)` c
## Flag sizes
-Using Bootstrap’s typical naming structure, you can create a standard flag, or scale it up or down to different sizes based on what’s needed.
+Add a size class from `flag-xs` to `flag-xl` to scale the flag. The names follow the usual Bootstrap pattern.
<Example centered>
<span class="flag flag-xl flag-country-us"></span>
@@ -60,7 +60,7 @@ Using Bootstrap’s typical naming structure, you can create a standard flag, or
## Flags list
-The full list of countries can be found below.
+All available countries:
<Flags />
diff --git a/docs/content/ui/plugins/index.mdx b/docs/content/ui/plugins/index.mdx
index 3c24cf17b..5d5801103 100644
--- a/docs/content/ui/plugins/index.mdx
+++ b/docs/content/ui/plugins/index.mdx
@@ -2,7 +2,7 @@
title: Plugins
order: 7
description: Optional Tabler plugins - charts, calendars, editors, file uploads, flags, payment logos, social icons and extra theme base colors. Each one needs a file you load on demand.
-summary: Tabler plugins extend the functionality of the framework, providing additional tools and features to enhance your projects and streamline the development process.
+summary: "Optional Tabler plugins: charts, calendars, editors, file uploads, flags, payment logos, social icons and extra theme base colors, each loaded on demand."
---
Plugins add features that not every project needs, so none of them are part of the core CSS and JavaScript. Some wrap a third-party library, such as charts, calendars, file uploads or the WYSIWYG editor - those need that library on the page as well. Others, like country flags, payment provider logos, social icons and extra theme base colors, only ship an extra stylesheet. Either way you load a plugin on demand, and pages that need it list the files at the top.
diff --git a/docs/content/ui/plugins/inline-player.mdx b/docs/content/ui/plugins/inline-player.mdx
index b58d207f0..25d325ddb 100644
--- a/docs/content/ui/plugins/inline-player.mdx
+++ b/docs/content/ui/plugins/inline-player.mdx
@@ -1,7 +1,7 @@
---
title: Inline player
docs-libs: [plyr]
-summary: A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.
+summary: Play HTML5, YouTube and Vimeo media with Plyr, a small accessible player styled with Tabler colors.
description: Embed audio and video with a lightweight, accessible media player that supports HTML5, YouTube, and Vimeo sources.
related: [/ui/components/carousel]
---
@@ -12,11 +12,11 @@ import { site } from '@shared/lib/site.ts';
## Overview
-The Inline Player is a versatile, modern media player designed for seamless integration into websites. It supports HTML5, YouTube, and Vimeo content, offering a lightweight and accessible solution for media playback. Built with customization and ease of use in mind, this player ensures compatibility with modern browsers and enhances user experience.
+The inline player is [Plyr](https://github.com/sampotts/plyr), a small media player for HTML5 video and audio, YouTube and Vimeo. It draws its own controls, which Tabler styles to match the rest of the UI, and it's keyboard accessible out of the box.
## Installation
-To use the Inline Player, you need to include the Plyr library in your project. You can install it via npm:
+Install Plyr from npm:
<TabsPackage name="plyr" />
@@ -30,7 +30,7 @@ Or include it from a CDN. Plyr draws its own controls, so the stylesheet is requ
## YouTube video
-Integrating the Inline Player into your website is straightforward. Below is a sample implementation for a YouTube video:
+For a YouTube video, add a `div` with the provider and the video id, then create the player from it:
<Example>
<div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="dQw4w9WgXcQ"></div> <script is:inline src={`${site.cdnUrl}/dist/libs/plyr/dist/plyr.min.js`}></script> <script>{`document.addEventListener("DOMContentLoaded", function () { window.Plyr && new Plyr("#player-youtube"); });`}</script>
@@ -63,7 +63,7 @@ An audio player uses the same pattern with an `audio` element. See the [Plyr doc
## Customization
-The Inline Player uses the primary color as the default color scheme. You can customize the player by modifying the CSS variables in your stylesheet. For example, to change the main color, you can add the following CSS:
+Tabler sets the player's main color to the primary color. To change it, override the Plyr CSS variable in your stylesheet:
```scss
--plyr-color-main: #ff0000; /* Change to your desired color */
diff --git a/docs/content/ui/plugins/input-mask.mdx b/docs/content/ui/plugins/input-mask.mdx
index 85a60a36f..908dea8a3 100644
--- a/docs/content/ui/plugins/input-mask.mdx
+++ b/docs/content/ui/plugins/input-mask.mdx
@@ -1,7 +1,7 @@
---
title: Input mask
order: 11
-summary: An input mask is used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors.
+summary: An input mask formats what the user types to a pattern, such as a phone number or a date, which makes the expected format clear and cuts validation errors.
description: Format user input automatically with input masks for dates, phone numbers, and other patterns to reduce validation errors.
docs-libs: [imask]
related: [/ui/forms/elements]
@@ -13,7 +13,7 @@ import CodeDocs from '@components/CodeDocs.astro';
## Installation
-To be able to use the input mask in your application you will need to install the imask dependency. You can do this by running the following command:
+Install the imask library:
<TabsPackage name="imask" />
@@ -23,17 +23,17 @@ And import or require:
import IMask from 'imask'
```
-You can also use the CDN link to include the script in your project:
+Or include it from a CDN:
```html
<script src="https://cdn.jsdelivr.net/npm/imask"></script>
```
-If you struggle with the installation, you can find more information in the [IMask documentation](https://imask.js.org/guide.html#installation).
+The [IMask documentation](https://imask.js.org/guide.html#installation) covers other ways to install it.
## Default markup
-Use an input mask in the fields where users have to enter their phone number, to make the formatting rules clear and help them avoid confusion.
+Use an input mask where the value has a fixed format, such as a phone number, a date or a card number.
To create an input mask, add the `data-mask` attribute to the input element:
@@ -48,8 +48,6 @@ To create an input mask, add the `data-mask` attribute to the input element:
/>
```
-Look at the example below to see how the input mask works:
-
<Example column>
<label class="form-label">Telephone mask</label>
<label class="form-label" for="mask-phone">Phone number</label>
diff --git a/docs/content/ui/plugins/range-slider.mdx b/docs/content/ui/plugins/range-slider.mdx
index 3daaa42ed..2b1c8ac82 100644
--- a/docs/content/ui/plugins/range-slider.mdx
+++ b/docs/content/ui/plugins/range-slider.mdx
@@ -2,7 +2,7 @@
title: Range slider
docs-libs: [nouislider]
description: Let users pick a value or range with a slider powered by noUiSlider, styled to match the rest of your Tabler interface.
-summary: A range slider allows users to select a range of values by adjusting two handles along a track, providing an intuitive and space-efficient input method.
+summary: A slider for picking a value or a range by dragging one or two handles, built on noUiSlider and styled by Tabler.
related: [/ui/forms/elements]
---
import Example from '@components/Example.astro';
diff --git a/docs/content/ui/plugins/social-icons.mdx b/docs/content/ui/plugins/social-icons.mdx
index 70e44ed77..7a3678c30 100644
--- a/docs/content/ui/plugins/social-icons.mdx
+++ b/docs/content/ui/plugins/social-icons.mdx
@@ -1,6 +1,6 @@
---
title: Social icons
-summary: Social icons are a great way to make your website more engaging and user-friendly. You can use social icons to help users quickly find your social media profiles and connect with you.
+summary: Social icons show the brand mark of a social network in a fixed-size colored square, for linking to your profiles.
description: Add social media icons with the socials plugin. Link users to your profiles with recognizable, consistently styled buttons.
css-plugins: [socials]
source: core/scss/ui/_social.scss
@@ -25,7 +25,7 @@ import CdnImportPlugin from '@components/CdnImportPlugin.astro'
## Installation
-This part of Tabler is distributed as a plugin. To enable it you should include `tabler-socials.css` or `tabler-socials.min.css` file in your page.
+Social icons are a plugin. Include `tabler-socials.css` or `tabler-socials.min.css` in your page to enable them.
You can also include the plugin via CDN:
@@ -33,7 +33,7 @@ You can also include the plugin via CDN:
## Social icons
-To create a social icon, add the `social` class to a component and provide the class `social-app-*` with the social app whose icon you want to use.
+Add the `social` class to an element and a `social-app-*` class with the name of the service.
<Example centered>
<span class="social social-app-facebook"></span>
@@ -55,7 +55,7 @@ Social icons use the same size scale as avatars, from `social-xxs` up to `social
## Grayscale icons
-Add `social-gray` for a grey version of the mark. Use it where a row of brand colours would pull attention away from the content, for example in a footer.
+Add `social-gray` for a gray version of the mark. Use it where a row of brand colors would pull attention away from the content, for example in a footer.
<Example centered>
<span class="social social-gray social-app-facebook"></span>
@@ -75,7 +75,7 @@ The icon element carries no text, so wrap it in a link and name that link. Keep
## Social apps list
-Here is a list of all available social apps:
+All available services:
<Socials />
@@ -85,4 +85,4 @@ Here is a list of all available social apps:
- The icon element is decoration, so give it `aria-hidden="true"` when the name is already in text.
- A row of social links belongs in a list inside a `nav` with an `aria-label`, so it can be skipped as a group.
- Links that open a new tab should say so. Add it to the accessible name, for example "Mastodon (opens in a new tab)".
-- Brand colours are picked to be recognisable, not readable. Check the contrast when you put a brand colour on text or on a light background.
+- Brand colors are picked to be recognizable, not readable. Check the contrast when you put a brand color on text or on a light background.
diff --git a/docs/content/ui/plugins/vector-map.mdx b/docs/content/ui/plugins/vector-map.mdx
index 80b25ccbc..b2f87eaa6 100644
--- a/docs/content/ui/plugins/vector-map.mdx
+++ b/docs/content/ui/plugins/vector-map.mdx
@@ -1,8 +1,8 @@
---
title: Vector map
docs-libs: [jsvectormap]
-description: Interactive guide to creating a vector map with jsVectorMap.
-summary: A vector map is a great way to display geographical data in an interactive and visually appealing way. Learn how to create a vector map with jsVectorMap.
+description: Interactive SVG maps with jsVectorMap, with a world map, markers and lines.
+summary: A vector map draws countries as SVG paths that can be styled and clicked. Tabler themes jsVectorMap to match the interface.
related: [/ui/components/map]
---
@@ -60,7 +60,7 @@ window.addEventListener('resize', () => map.updateSize());
## Default map
-Integrating the vector map into your website is straightforward. Below is a sample implementation for a world map:
+The code for a world map with the default options:
<Example codeOnly>
<MapVector mapId="empty" />
@@ -68,7 +68,7 @@ Integrating the vector map into your website is straightforward. Below is a samp
## Sample demo
-Look at the example below to see how the vector map works with a world map.
+The same map rendered on the page:
<Example>
<MapVector mapId="world" />
@@ -76,7 +76,7 @@ Look at the example below to see how the vector map works with a world map.
## Markers
-You can add markers to the map to highlight specific locations. Below is a sample implementation for a world map with markers:
+Markers point out single locations, such as offices or customers:
<Example>
<MapVector mapId="world-markers" />
@@ -84,7 +84,7 @@ You can add markers to the map to highlight specific locations. Below is a sampl
## Lines
-You can also draw lines on the map to represent routes or connections between different locations. Below is a sample implementation for a world map with lines:
+Lines connect locations, for a route or a link between two points:
<Example>
<MapVector mapId="world-lines" />
@@ -95,5 +95,5 @@ You can also draw lines on the map to represent routes or connections between di
- A map is a picture built from paths, and a screen reader reads them as a list of shapes. Give the container `role="img"` and an `aria-label` that says what it shows.
- The data behind the map has to be reachable another way. A table of the same values, next to or below the map, serves screen reader users and anyone printing the page.
- Hovering a region is mouse-only. Do not put anything there that is not also available in the text version.
-- Colour scales are hard to read for many users. Add a legend with the actual numbers rather than colour alone.
+- Colour scales are hard to read for many users. Add a legend with the actual numbers rather than color alone.
- Do not make every region focusable. A world map would be hundreds of tab stops.
diff --git a/docs/content/ui/plugins/wysiwyg.mdx b/docs/content/ui/plugins/wysiwyg.mdx
index b7e4aa7d6..9b855ff13 100644
--- a/docs/content/ui/plugins/wysiwyg.mdx
+++ b/docs/content/ui/plugins/wysiwyg.mdx
@@ -1,7 +1,7 @@
---
title: WYSIWYG editor
docs-libs: [hugerte]
-summary: The WYSIWYG editor that is flexible, customizable, and designed with the user in mind. HugeRTE can handle any challenge, from the most simple implementation through to the most complex use case.
+summary: HugeRTE is the rich text editor used by Tabler, for content fields that need formatting, links, lists and images.
description: Add rich text editing to your forms with HugeRTE, a flexible WYSIWYG editor that works well with Tabler styles.
related: [/ui/forms/elements, /ui/base/prose]
---
diff --git a/docs/content/ui/utilities/background-blur.mdx b/docs/content/ui/utilities/background-blur.mdx
index fd923e3bd..a352613f1 100644
--- a/docs/content/ui/utilities/background-blur.mdx
+++ b/docs/content/ui/utilities/background-blur.mdx
@@ -1,6 +1,6 @@
---
title: Background blur
-summary: Blur whatever sits behind an element with the bg-blur utility. It works with translucent backgrounds, so overlays, sticky bars and floating cards stay readable on top of busy content.
+summary: The bg-blur utility blurs whatever sits behind an element, so overlays, sticky bars and floating cards stay readable on busy content.
description: Use the bg-blur utility to add a backdrop blur behind translucent overlays, sticky bars and floating cards.
related: [/ui/utilities/background-patterns, /ui/components/card]
added-in: 1.5.0
diff --git a/docs/content/ui/utilities/borders.mdx b/docs/content/ui/utilities/borders.mdx
index f55962124..7dc9b8b7f 100644
--- a/docs/content/ui/utilities/borders.mdx
+++ b/docs/content/ui/utilities/borders.mdx
@@ -1,6 +1,6 @@
---
title: Borders
-summary: Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
+summary: Border utilities set the sides, width, color, radius and opacity of an element's border with a class.
description: Style borders with utility classes - control sides, colors, width, and radius without writing any custom CSS.
related: [/ui/base/colors]
---
@@ -8,7 +8,7 @@ import Example from '@components/Example.astro';
## Border direction
-Borders can be applied to specific sides of an element using utility classes. This is particularly useful for styling individual sides of a box, such as highlighting the top border for emphasis or applying a separator between elements. Below are examples of how to set borders for each side of an element.
+Use these classes to put a border on one side, on two opposite sides or all around an element. `border-x` and `border-y` set both horizontal or both vertical sides at once.
```html
<div class="border">1</div>
@@ -33,7 +33,7 @@ Borders can be applied to specific sides of an element using utility classes. Th
## Border size
-Border size utilities allow you to control the thickness of borders, providing flexibility to suit different design needs. You can add no border, a standard border, or a wide border for a more prominent effect. These classes are especially useful for creating visual hierarchy or highlighting specific elements.
+Three widths are available: none, the default width and a wider one.
```html
<div class="border-0">1</div>
@@ -49,7 +49,7 @@ Border size utilities allow you to control the thickness of borders, providing f
## Remove border
-If you want to selectively remove borders from specific sides of an element, you can use border removal utilities. This feature simplifies styling tasks, such as creating a seamless connection between elements or achieving minimalistic designs.
+When an element already has `border`, remove it from one side with the `-0` suffix. This is handy when two elements sit next to each other and would otherwise draw a double line.
```html
<div class="border border-top-0">1</div>
@@ -72,7 +72,7 @@ If you want to selectively remove borders from specific sides of an element, you
## Border color
-Customizing the border color helps to enhance the visual appeal and consistency of your design. With utility classes, you can easily apply specific colors to borders, allowing for greater flexibility in creating visually distinct sections.
+Set the border color with one of the theme color classes. The names follow the [color](/ui/base/colors) utilities.
```html
<div class="border border-primary">1</div>
@@ -98,7 +98,7 @@ Customizing the border color helps to enhance the visual appeal and consistency
## Border radius
-Adding border radius gives elements smooth, rounded edges, which can make designs feel more modern and approachable. You can choose from various levels of rounding, including full circles, using the available utility classes.
+The `rounded-*` classes set the border radius, from square corners through three sizes to a full circle.
```html
<div class="border rounded-0">1</div>
@@ -121,7 +121,7 @@ Adding border radius gives elements smooth, rounded edges, which can make design
## Border opacity
-You can adjust the opacity of borders to create subtle visual effects or to blend elements seamlessly into the background. By using border opacity utilities, you can control the transparency of borders, allowing for more creative and visually appealing designs. To change the opacity of a border, add the `border-opacity-*` class to the element.
+The `border-opacity-*` classes make a colored border partly transparent. Use them to soften a border without picking a lighter color.
```html
<div class="border border-success border-opacity-50">This is 50% opacity success border</div>
@@ -139,5 +139,5 @@ You can adjust the opacity of borders to create subtle visual effects or to blen
- A border is decoration. It cannot be the only thing that marks a selected, focused or invalid state.
- Do not remove a focus outline with a border utility. If you restyle focus, keep a visible ring with at least 3:1 contrast against its surroundings.
-- Border colours are often below the contrast needed for text, which is fine for a divider but not for something that carries meaning.
+- Border colors are often below the contrast needed for text, which is fine for a divider but not for something that carries meaning.
- A border used to group form fields does not create a group. Use a `fieldset` with a `legend`.
diff --git a/docs/content/ui/utilities/cursors.mdx b/docs/content/ui/utilities/cursors.mdx
index 26dd879fd..c494a63bc 100644
--- a/docs/content/ui/utilities/cursors.mdx
+++ b/docs/content/ui/utilities/cursors.mdx
@@ -1,6 +1,6 @@
---
title: Cursors
-summary: You can use different cursors to reflect the intended user interaction with particular elements of an interface. The cursor will change when a user hovers over a given element to indicate the action which can be performed.
+summary: Cursor utilities set the mouse pointer for an element, so the cursor shows what happens on click or drag.
description: Change the mouse cursor with utility classes to signal what users can do with an element, from pointers to resize handles.
related: [/ui/utilities/interactions]
---
@@ -8,7 +8,7 @@ import Example from '@components/Example.astro';
## Cursor utilities
-Use one of the available cursor utilities depending on the action you want to indicate.
+Add one of the cursor classes to set the pointer for an element.
- `.cursor-auto`- the cursor style depends on what's inside a given element
- `.cursor-pointer` - a pointing cursor, used to show that an element is clickable
@@ -44,7 +44,7 @@ Use one of the available cursor utilities depending on the action you want to in
<div class="cursor-grabbing">grabbing</div>
```
-The results can be seen in the example below.
+Hover each box to see its cursor:
<Example hideCode>
<div class="row g-4 row-cols-4">
diff --git a/docs/content/ui/utilities/index.mdx b/docs/content/ui/utilities/index.mdx
index 626a0cfb2..e65e148da 100644
--- a/docs/content/ui/utilities/index.mdx
+++ b/docs/content/ui/utilities/index.mdx
@@ -2,7 +2,7 @@
title: Utilities
order: 6
description: Small single-purpose CSS classes for spacing, borders, cursors, and interactions - adjust details without writing custom CSS.
-summary: The utilities section provides a collection of helper classes for layout and design, helping you build visually appealing and functional designs.
+summary: Helper classes for spacing, borders, cursors and other details, so you don't write custom CSS for them.
---
Utilities are small, single-purpose CSS classes. Use them to adjust spacing, borders, cursors, and other details without writing custom CSS. They work with every component and follow the same naming rules as Bootstrap.
diff --git a/docs/content/ui/utilities/margins.mdx b/docs/content/ui/utilities/margins.mdx
index e8ee4f9b6..0ea587a09 100644
--- a/docs/content/ui/utilities/margins.mdx
+++ b/docs/content/ui/utilities/margins.mdx
@@ -6,7 +6,7 @@ related: [/ui/utilities/vertical-align]
---
import Example from '@components/Example.astro';
-Margin utilities allow you to control the space between elements, providing flexibility to suit different design needs. These utilities are especially useful for creating spacing between components or aligning them consistently. Below are examples of how to use margin utilities for various directions and sizes.
+Margin utilities set the space around an element with a class, so you don't write CSS for spacing. Every direction uses the same sizes, listed in the table below.
## Margin size
@@ -28,7 +28,7 @@ Name|Value
## Margin
-Use the `.m-*` utilities to control the margin of an element. Margin utilities are used to create consistent spacing around an element, ensuring that the layout is visually balanced.
+`.m-*` sets the margin on all four sides.
<Example>
<div class="d-flex">
@@ -50,7 +50,7 @@ Use the `.m-*` utilities to control the margin of an element. Margin utilities a
## Start margin
-Start margins control the spacing to the left of an element, helping to create consistent horizontal gaps between elements. Start margin class names are prefixed with `ms-`.
+`ms-*` sets the margin on the start side, which is the left in a left-to-right layout.
```html
<div class="ms-4">...</div>
@@ -76,7 +76,7 @@ Start margins control the spacing to the left of an element, helping to create c
## End margin
-End margins control the spacing on the right side of an element. These utilities are helpful for creating visual separation between elements that flow horizontally. End margin class names are prefixed with `me-`.
+`me-*` sets the margin on the end side, which is the right in a left-to-right layout.
```html
<div class="me-4">...</div>
@@ -102,7 +102,7 @@ End margins control the spacing on the right side of an element. These utilities
## Top margin
-Top margins define the spacing above an element. This is useful for separating stacked components or creating vertical spacing between sections. Top margin class names are prefixed with `mt-`.
+`mt-*` sets the margin above an element, for example between stacked sections.
```html
<div class="mt-4">...</div>
@@ -128,7 +128,7 @@ Top margins define the spacing above an element. This is useful for separating s
## Bottom margin
-Bottom margins control the spacing below an element, helping to create consistent vertical gaps between stacked elements. Bottom margin class names are prefixed with `mb-`.
+`mb-*` sets the margin below an element.
```html
<div class="mb-4">...</div>
@@ -154,7 +154,7 @@ Bottom margins control the spacing below an element, helping to create consisten
## Horizontal margin
-Use the `mx-*` utilities to control the horizontal margin of an element. Horizontal margin utilities are used to create consistent spacing between elements that flow horizontally.
+`mx-*` sets the start and end margins at once.
```html
<div class="mx-4">...</div>
@@ -181,7 +181,7 @@ Use the `mx-*` utilities to control the horizontal margin of an element. Horizon
## Vertical margin
-Use the `my-*` utilities to control the vertical margin of an element. Vertical margin utilities are used to create consistent spacing between elements that flow vertically.
+`my-*` sets the top and bottom margins at once.
```html
<div class="my-4">...</div>
@@ -207,7 +207,7 @@ Use the `my-*` utilities to control the vertical margin of an element. Vertical
## Horizontal centering
-Additionally, Tabler also includes an `.mx-auto` class for horizontally centering fixed-width block level content — that is, content that has `display: block` and a width set — by setting the horizontal margins to `auto`.
+`.mx-auto` centers a block element that has a width, by setting both horizontal margins to `auto`.
```html
<div class="mx-auto">...</div>
@@ -221,7 +221,7 @@ Additionally, Tabler also includes an `.mx-auto` class for horizontally centerin
## Gap
-Use the `.gap-*` utilities to control the space between elements in a grid layout. The gap utilities are used to create consistent spacing between grid items, ensuring that the layout is visually balanced.
+`.gap-*` sets the space between the children of a grid or flex container, with the same sizes as the margins.
```html
<div class="d-grid gap-6">...</div>
diff --git a/docs/content/ui/utilities/printing.mdx b/docs/content/ui/utilities/printing.mdx
index f18953860..d0fa9b4aa 100644
--- a/docs/content/ui/utilities/printing.mdx
+++ b/docs/content/ui/utilities/printing.mdx
@@ -1,7 +1,7 @@
---
title: Printing
summary: Print-friendly styles that hide navigation, keep pages in light colors, and control page breaks.
-description: Learn what Tabler hides when a page is printed, the d-print-* utilities, and the media-print mixin for custom print styles.
+description: What Tabler hides when a page is printed, the d-print-* utilities and the media-print mixin for custom print styles.
related: [/ui/layout/page-layouts, /ui/layout/navbars]
---
import Example from '@components/Example.astro';
@@ -21,7 +21,7 @@ Elements that only make sense on screen are hidden with `display: none` when the
- Close buttons
- The floating action toolbar
-You don't need to add anything for these to work — they're built into the component styles. For example, the navbar in a default layout already has this rule, so it disappears on print without any extra class:
+You don't need to add anything for these to work - they're built into the component styles. For example, the navbar in a default layout already has this rule, so it disappears on print without any extra class:
```html
<header class="navbar navbar-expand-md">...</header>
@@ -39,7 +39,7 @@ Tables and cards get a few adjustments so they print well over multiple pages:
- A table's `<thead>` repeats at the top of every printed page.
- A table row never splits across a page break.
-- A card never splits across a page break — it either fits fully on one page or starts on the next one.
+- A card never splits across a page break - it either fits fully on one page or starts on the next one.
- Cards lose their border and shadow when printed, since these don't add anything on paper.
## Print utilities
@@ -60,7 +60,7 @@ Class|`display` value used on print
`d-print-flex`|`flex`
`d-print-inline-flex`|`inline-flex`
-`.d-print-none` is the one you'll use most — add it to anything that shouldn't appear on a printout, like a "Search" box or an "Edit" button:
+`.d-print-none` is the one you'll use most - add it to anything that shouldn't appear on a printout, like a "Search" box or an "Edit" button:
<Example>
<div class="d-print-none"><span class="badge bg-blue-lt">Hidden on print</span></div>
@@ -99,4 +99,4 @@ Use it inside a component or layout rule to add print-only styles next to the re
## Accessibility
-Hiding navigation and interactive controls on print doesn't affect screen readers or keyboard users — it only applies inside the `print` media type, so the page works exactly as before on screen. Keep enough contrast in any custom print styles you add: printed pages can't rely on color alone, since some printers output in black and white.
+Hiding navigation and interactive controls on print doesn't affect screen readers or keyboard users - it only applies inside the `print` media type, so the page works exactly as before on screen. Keep enough contrast in any custom print styles you add: printed pages can't rely on color alone, since some printers output in black and white.
diff --git a/docs/content/ui/utilities/vertical-align.mdx b/docs/content/ui/utilities/vertical-align.mdx
index 2204e6279..0de73753b 100644
--- a/docs/content/ui/utilities/vertical-align.mdx
+++ b/docs/content/ui/utilities/vertical-align.mdx
@@ -1,7 +1,7 @@
---
title: Vertical align
-description: Quickly and easily align elements vertically with utility classes.
-summary: Easily modify the vertical alignment of elements such as inline, inline-block, inline-table, and table-cell to ensure proper positioning and alignment within their parent containers, allowing for more precise control over your layout and design.
+description: Utility classes for the vertical-align property on inline and table-cell elements.
+summary: Set the vertical alignment of inline, inline-block, inline-table and table-cell elements with a class.
related: [/ui/utilities/margins]
---
import Example from '@components/Example.astro';
@@ -10,7 +10,7 @@ Choose from `.align-baseline`, `.align-top`, `.align-middle`, `.align-bottom`, `
## Inline elements
-Use vertical alignment utilities to align inline-level elements relative to their surrounding text or baseline. These classes are particularly useful for aligning small inline elements like [icons](/ui/components/icon) or [badges](/ui/components/badge) alongside text.
+Use these classes on inline elements, such as an [icon](/ui/components/icon) or a [badge](/ui/components/badge) next to text, to move them up or down relative to the text line.
<Example>
<div>
@@ -25,7 +25,7 @@ Use vertical alignment utilities to align inline-level elements relative to thei
## Table cells
-Vertical alignment utilities are also applicable to table cells, allowing you to control the alignment of content within a cell. This is especially useful for creating well-structured and visually appealing tables where the content aligns consistently across rows and columns.
+The same classes work on table cells and move the content of a cell to the top, middle or bottom of the row.
<Example>
<table style="height: 100px" class="bg-surface">
diff --git a/docs/content/ui/utilities/visually-hidden.mdx b/docs/content/ui/utilities/visually-hidden.mdx
index c5d4b6b40..cb71d8f90 100644
--- a/docs/content/ui/utilities/visually-hidden.mdx
+++ b/docs/content/ui/utilities/visually-hidden.mdx
@@ -5,7 +5,7 @@ description: Hide elements visually while keeping them accessible to screen read
---
import Example from '@components/Example.astro';
-Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with `.visually-hidden`. Use `.visually-hidden-focusable` to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). `.visually-hidden-focusable` can also be applied to a container – thanks to `:focus-within`, the container will be displayed when any child element of the container receives focus.
+Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with `.visually-hidden`. Use `.visually-hidden-focusable` to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). `.visually-hidden-focusable` can also be applied to a container - thanks to `:focus-within`, the container will be displayed when any child element of the container receives focus.
```html
<h2 class="visually-hidden">Title for screen readers</h2>