Design

Frontend

Fullstack

Create Website

Blog

->

Why Use fastn for Your Next Frontend?

record

or-type

list

ftd.row

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

assets

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 used to render text in an ftd document.

Usage

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

Sample usage

Input

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

-- 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 and text 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: FTD example
color: $inherited.colors.text-strong

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

Lang:

ftd

Output

FTD example

text as header

Input

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

-- 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.

-- 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.

-- 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 to show your support!

⭐️

Getting Help

Have a question or need help?

Visit our GitHub Q&A discussion to get answers and subscribe to it to stay tuned.

Join our Discord channel and share your thoughts, suggestion, question etc.

Connect with our community!

💻️

Found an issue?

If you find some issue, please visit our GitHub issues to tell us about it.

Quick links:

Join us

We welcome you to join our Discord 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.

Docs

->

ftd.text

`ftd.text`

ftd.text is a kernel component used to render text in an ftd document.

Usage

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

Sample usage

Input

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

-- 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 and text 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: FTD example
color: $inherited.colors.text-strong

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

Lang:

ftd

Output

FTD example

text as header

Input

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

-- 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.

-- 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.

-- 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 to show your support!

⭐️

Getting Help

Have a question or need help?

Visit our GitHub Q&A discussion to get answers and subscribe to it to stay tuned.

Join our Discord channel and share your thoughts, suggestion, question etc.

Connect with our community!

💻️

Found an issue?

If you find some issue, please visit our GitHub issues to tell us about it.

Quick links:

Join us

We welcome you to join our Discord 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.

ftd.text

Usage

Attributes

text: caption or body

line-clamp: optional integer

Support fastn!

Getting Help

Found an issue?

Quick links:

Join us

ftd.text

Usage

Attributes

text: caption or body

line-clamp: optional integer

Support fastn!

Getting Help

Found an issue?

Quick links:

Join us

`ftd.text`

`text: caption or body`

`line-clamp: optional integer`

Support `fastn`!

`ftd.text`

`text: caption or body`

`line-clamp: optional integer`

Support `fastn`!