Svelte Text - Flowbite

Learn how to customize text-related styles and properties such as font size, font style, text decoration, font weight and more

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.

Svelte

<script>
  import { P } from 'flowbite-svelte'
</script>

<P size="xs">Aa</P>
<P size="sm">Aa</P>
<P size="base">Aa</P>
<P size="lg">Aa</P>
<P size="xl">Aa</P>
<P size="2xl">Aa</P>
<P size="3xl">Aa</P>
<P size="4xl">Aa</P>
<P size="5xl">Aa</P>
<P size="6xl">Aa</P>
<P size="7xl">Aa</P>
<P size="8xl">Aa</P>
<P size="9xl">Aa</P>

Font weight #

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

Svelte

<P size="4xl" weight="thin">Aa</P>
<P size="4xl" weight="extralight">Aa</P>
<P size="4xl" weight="light">Aa</P>
<P size="4xl" weight="normal">Aa</P>
<P size="4xl" weight="medium">Aa</P>
<P size="4xl" weight="semibold">Aa</P>
<P size="4xl" weight="bold">Aa</P>
<P size="4xl" weight="extrabold">Aa</P>
<P size="4xl" weight="black">Aa</P>

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.

Svelte

<P color="text-blue-700 dark:text-blue-500">This text is in the blue color.</P>
<P color="text-green-700 dark:text-green-500">This text is in the green color.</P>
<P color="text-red-700 dark:text-red-500">This text is in the red color.</P>
<P color="text-purple-700 dark:text-purple-500">This text is in the purple color.</P>
<P color="text-teal-700 dark:text-teal-500">This text is in the teal color.</P>

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.

Svelte

<P space="tighter">Flowbite app will help you improve yourself by analysing your everyday life.</P>
<P space="tight">Flowbite app will help you improve yourself by analysing your everyday life.</P>
<P space="normal">Flowbite app will help you improve yourself by analysing your everyday life.</P>
<P space="wide">Flowbite app will help you improve yourself by analysing your everyday life.</P>
<P space="wider">Flowbite app will help you improve yourself by analysing your everyday life.</P>
<P space="widest">Flowbite app will help you improve yourself by analysing your everyday life.</P>

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 .

Svelte

<script>
  import { P, Span } from 'flowbite-svelte'
</script>

<P>Track work across the enterprise through an open, collaborative platform. <Span underline>Link issues across Jira</Span> and ingest data from other <Span underline decorationClass="decoration-blue-500 decoration-double">software development</Span> tools, so your IT support and operations teams have richer contextual information to rapidly respond to <Span underline decorationClass="decoration-green-500 decoration-dotted">requests</Span>, <Span underline decorationClass="decoration-4 decoration-red-500 decoration-dashed">incidents</Span>, and <Span underline decorationClass="decoration-sky-500 decoration-wavy">changes</Span>.</P>

Line through #

Set a strikethrough line on a text element using the line-through class.

$109

$79

Svelte
<script>
  import { Span } from 'flowbite-svelte'
</script>

<Span class="line-through">$109</Span><Span class='ml-3'>$79</Span>

Uppercase #

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

The crypto identity primitive.

Svelte

<script>
  import { P, Span } from 'flowbite-svelte'
</script>

<P>The crypto <Span class='uppercase'>identity</Span> primitive.</P>

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.

Svelte

<P italic>The crypto identity primitive.</P>

Normal #

Text elements by default are non-italic.

The crypto identity primitive.

Svelte

<P>The crypto identity primitive.</P>

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.

Svelte

<P size="3xl" height="normal" class="max-w-lg" weight="semibold"
  >The Al-powered app will help you improve yourself by analysing your everyday life.</P>

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.

Svelte

<P size="3xl" height="relaxed" class="max-w-lg" weight="semibold">The Al-powered app will help you improve yourself by analysing your everyday life.</P>

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.

Svelte

<P size="3xl" height="loose" class="max-w-lg" weight="semibold">The Al-powered app will help you improve yourself by analysing your everyday life.</P>

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

Svelte

<P 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</P>

Center #

Svelte

<P align="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</P>

Right #

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

Svelte

<P align="right">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</P>

Text justify #

Use the justify prop to justify the text content.

Svelte

<P justify>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</P>

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.

Svelte

<P whitespace="normal">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.</P>

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.

Svelte

<P whitespace="nowrap">
  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.
</P>

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.

Svelte

<P whitespace="preline">
  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.
</P>

Text Decoration Style #

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

Svelte

<P>Track work across the enterprise through an open, collaborative platform. <Span underline>Link issues across Jira</Span> and ingest data from other <Span underline decorationClass="decoration-blue-500 decoration-double">software development</Span> tools, so your IT support and operations teams have richer contextual information to rapidly respond to <Span underline decorationClass="decoration-green-500 decoration-dotted">requests</Span>, <Span underline decorationClass="decoration-4 decoration-red-500 decoration-dashed">incidents</Span>, and <Span underline decorationClass="decoration-sky-500 decoration-wavy">changes</Span>.</P>

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.

Svelte

<P size='xl' opacity={100} color="text-blue-600 dark:text-blue-500">Flowbite app will help you improve yourself by analysing your everyday life.</P>
<P size='xl' opacity={75} color="text-blue-600 dark:text-blue-500">Flowbite app will help you improve yourself by analysing your everyday life.</P>
<P size='xl' opacity={50} color="text-blue-600 dark:text-blue-500">Flowbite app will help you improve yourself by analysing your everyday life.</P>
<P size='xl' opacity={25} color="text-blue-600 dark:text-blue-500">Flowbite app will help you improve yourself by analysing your everyday life.</P>

Props #

The component has the following props, type, and default values. See types page for type information.

P #

Name	Type	Default
color	string	'text-gray-900 dark:text-white'
height	'normal' \| 'relaxed' \| 'loose'	'normal'
align	'left' \| 'center' \| 'right'	'left'
justify	boolean	false
italic	boolean	false
firstupper	boolean	false
upperClass	string	'first-line:uppercase first-line:tracking-widest first-letter:text-7xl first-letter:font-bold first-letter:text-gray-900 dark:first-letter:text-gray-100 first-letter:mr-3 first-letter:float-left'
opacity	number \| undefined	undefined
whitespace	'normal' \| 'nowrap' \| 'pre' \| 'preline' \| 'prewrap'	'normal'
size	PsizeType	'base'
space	'tighter' \| 'tight' \| 'normal' \| 'wide' \| 'wider' \| 'widest' \| undefined	undefined
weight	PweightType	'normal'

Span #

Use the class prop to overwrite the default class.

Name	Type	Default
color	string	'text-gray-900 dark:text-white'
height	'normal' \| 'relaxed' \| 'loose'	'normal'
align	'left' \| 'center' \| 'right'	'left'
justify	boolean	false
italic	boolean	false
firstupper	boolean	false
upperClass	string	'first-line:uppercase first-line:tracking-widest first-letter:text-7xl first-letter:font-bold first-letter:text-gray-900 dark:first-letter:text-gray-100 first-letter:mr-3 first-letter:float-left'
opacity	number \| undefined	undefined
whitespace	'normal' \| 'nowrap' \| 'pre' \| 'preline' \| 'prewrap'	'normal'
size	PsizeType	'base'
space	'tighter' \| 'tight' \| 'normal' \| 'wide' \| 'wider' \| 'widest' \| undefined	undefined
weight	PweightType	'normal'

Paragraph