Flowbite Svelte: v0.46.14
Svelte: v5.0.0-next.179
SvelteKit: v2.5.18
Vite: v5.3.3
Get started with a collection of text customization examples to learn how to update the size, font weight, style, decoration and spacing of inline text elements.

Font size

Use this example to set the font size of inline text elements using the `size` prop.

Aa

Aa

Aa

Aa

Aa

Aa

Aa

Aa

Aa

Aa

Aa

Aa

Aa

Font weight

This example can be used to the font weight of an inline text element using the `weight` prop.

Aa

Aa

Aa

Aa

Aa

Aa

Aa

Aa

Aa

Text color

Use the `color` prop to set the color of the inline text.

This text is in the blue color.

This text is in the green color.

This text is in the red color.

This text is in the purple color.

This text is in the teal color.

Letter spacing

Increase or decrease the spacing between letters using the `space` prop.

Flowbite app will help you improve yourself by analysing your everyday life.

Flowbite app will help you improve yourself by analysing your everyday life.

Flowbite app will help you improve yourself by analysing your everyday life.

Flowbite app will help you improve yourself by analysing your everyday life.

Flowbite app will help you improve yourself by analysing your everyday life.

Flowbite app will help you improve yourself by analysing your everyday life.

Text decoration

Underline

Update the text decoration style using the `underline` and `decorationClass` props.

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

Line through

Set a strikethrough line on a text element using the `line-through` class.
$109$79

Uppercase

Force uppercase characters for a given portion of text using the uppercase class.

The crypto identity primitive.

Font style

Set italic or non italic styles with the props.

Italic

Use the `italic` prop to set italic font style to a text element.

The crypto identity primitive.

Normal

Text elements by default are non-italic.

The crypto identity primitive.

Line Height

Set the height between lines using the `height` prop.

Leading normal

Use the `height="normal"` (default) prop to set default line height.

The Al-powered app will help you improve yourself by analysing your everyday life.

Leading relaxed

Use the `height="relaxed"` prop to increase the space between lines.

The Al-powered app will help you improve yourself by analysing your everyday life.

Leading loose

Use the `height="loose"` prop to set a large amount of space between text lines.

The Al-powered app will help you improve yourself by analysing your everyday life.

Text Align

Left

Get started with an enterprise-level, profesionally designed, fully responsive, and HTML semantic set of web pages, sections and over 400+ components crafted with the utility classes from Tailwind CSS and based on the Flowbite component library

Center

Get started with an enterprise-level, profesionally designed, fully responsive, and HTML semantic set of web pages, sections and over 400+ components crafted with the utility classes from Tailwind CSS and based on the Flowbite component library

Right

Use the `align="right"` prop to align the text element to the right side of the page.

Get started with an enterprise-level, profesionally designed, fully responsive, and HTML semantic set of web pages, sections and over 400+ components crafted with the utility classes from Tailwind CSS and based on the Flowbite component library

Text justify

Use the `justify` prop to justify the text content.

Get started with an enterprise-level, profesionally designed, fully responsive, and HTML semantic set of web pages, sections and over 400+ components crafted with the utility classes from Tailwind CSS and based on the Flowbite component library

Whitespace

Configure the whitespace behaviour of inline text elements using the `whitespace` prop.

Normal

Use the `whitespace="normal"` prop to set the default whitespace behaviour.

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

Nowrap

Use the `whitespace="nowrap"` prop to prevent text being added to a new line when the full width has been reached.

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

Pre line

Use the `whitespace="preline'` prop to add whitespace exactly how it has been set from the source code.

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

Text Decoration Style

Update the text decoration style using the `underline` and `decorationClass` props.

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

Opacity

Use the `opacity` and `color` prop to set the opacity of inline text elements.

Flowbite app will help you improve yourself by analysing your everyday life.

Flowbite app will help you improve yourself by analysing your everyday life.

Flowbite app will help you improve yourself by analysing your everyday life.

Flowbite app will help you improve yourself by analysing your everyday life.