Text

Displays non-interactive text.

Type

Thanks to <svelte:element> the text component renders with different html tags.

Colors

Text elements can come in a few different colors.

Default Size

The text component has a default font size of inherit for `p` and `span` types. It also has a default font weight of inherit.

Default Color

The Text component has a text color of `inherit` this means it will take its container's `text-color` value. Because of this it is best practice to include the following classes somewhere higher in the DOM tree.

This enables setting the text color from the container which can be useful when dealing with a container with a solid color background that doesn't change between light and dark mode. If you'd like to keep your text white on black and black on white you can use the color `dark`.

NOTE: Notice how when you set the text color to `dark` it breaks the layout in light mode.

Put your sunglasses on for this part 🕶️.

Blockquote

Additional Attributes

You can use `b` for bold, `i` for italics, `del` for line through, and `serif` for your serif font style.

Responsive Sizing

There are times you will need to resize your text for smaller screens. Instead of rendering a different tag which is not accessible and changes the meaning of your page. Use responsive size attributes `size`, `smSize`, `mdSize`, `lgSize`. Try it out by opening your dev tools and resizing the screen.