Kernel Components

`ftd.text`

Docs

Book 🚧

Learn

Why Use `fastn` for Your Next Frontend?

Container Root Attributes

`import`

Using export/exposing

Functions

Built-in Functions

Built-in Rive Functions

Built-in Variables

`ftd` Events

Rive Events

Use color scheme package

How to make page responsive

Using JS

JS in function

Web Component

Create `fastn` package

Same argument & attribute types

`ftd.text`

`ftd.text` is a [kernel component](/ftd/kernel/) used to render text in an `fastn` document.

Usage

To use `ftd.text`, simply add it to your `fastn` document with your desired text to display.

Sample usage

Input

-- ftd.text: hello world
color: $inherited.colors.text

Lang:

ftd

Output

hello world

Attributes

`ftd.text` accepts the below attributes as well all the [common](ftd/common/) and [text](ftd/text-attributes/) attributes.

`text: caption or body`

This attribute is used to pass text to `ftd.text`. You can pass any string value. It is a required attribute. You have three ways to pass text value to the `ftd.text` component. There are three ways to pass text to `ftd.text` as `caption`, as a `text` `header`, or as multi-line text in the `body`.

text as `caption`

Input

-- ftd.text: `fastn` example
color: $inherited.colors.text-strong

Lang:

ftd

Output

`fastn` example

text as `header`

Input

-- ftd.text:
text: This is an example of how to use ftd.text.
color: $inherited.colors.text-strong

Lang:

ftd

Output

This is an example of how to use ftd.text.

text as `body`

Input

-- ftd.text:
color: $inherited.colors.text-strong

This is a bigger text.

This can span multiple lines.

Lang:

ftd

Output

This is a bigger text. This can span multiple lines.

`line-clamp: optional integer`

The `line-clamp` attribute truncates text at a specific number of lines. It accepts an integer value and is optional.

Sample code using `line-clamp`

Input

-- ds.code: `line-clamp`
lang: ftd

-- ftd.text:
border-width.px: 1
padding.px: 5
width.fixed.px: 100
line-clamp: 3

Writing long text can often feel like a tedious and daunting task, especially
when faced with a blank page and a blinking cursor. It can be easy to feel
overwhelmed by the thought of having to fill page after page with coherent
thoughts and ideas. However, there are many reasons why writing long text can
be a valuable and rewarding experience.

Lang:

ftd

Output

Writing long text can often feel like a tedious and daunting task, especially when faced with a blank page and a blinking cursor. It can be easy to feel overwhelmed by the thought of having to fill page after page with coherent thoughts and ideas. However, there are many reasons why writing long text can be a valuable and rewarding experience.

Support `fastn`!

Enjoying `fastn`? Please consider giving us a star ⭐️ on [GitHub](https://github.com/fastn-stack/fastn) to show your support!

[⭐️](https://github.com/fastn-stack/fastn)

Getting Help

Have a question or need help? Visit our [GitHub Q&A discussion](https://github.com/fastn-stack/fastn/discussions/categories/q-a) to get answers and subscribe to it to stay tuned. Join our [Discord](https://discord.gg/a7eBUeutWD) channel and share your thoughts, suggestion, question etc. Connect with our [community](/community/)!

[💻️](/community/)

Found an issue?

If you find some issue, please visit our [GitHub issues](https://github.com/fastn-stack/fastn/issues) to tell us about it.

Quick links:

- [Install `fastn`](install/) - [Create `fastn` package](create-fastn-package/) - [Expander Crash Course](expander/) - [Syntax Highlighting in Sublime Text](/sublime/)

Join us

We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) community today. We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.