Overview
Design
Frontend
Fullstack
Create Website
Blog
Frontend
Docs
->
Kernel Components
->
ftd.text
Docs
Book 🚧
Learn
Why Use fastn for Your Next Frontend?
Getting Started
Data Modelling
Variables
Built-in Types
record
or-type
list
component
Headers
Visibility
Commenting
Kernel Components
ftd.document 🚧
ftd.row
ftd.column
ftd.container
ftd.text
ftd.image
ftd.rive
ftd.iframe
ftd.integer
ftd.decimal
ftd.boolean
ftd.code
ftd.text-input
ftd.checkbox
ftd.desktop
ftd.mobile
Attributes
Common Attributes
Text Attributes
Container Attributes
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
processor
foreign variables
assets
How to access files
How to access fonts
How to make page responsive
Using JS
JS in function
Web Component
Create fastn package
Best Practices
Formatting
Import
Auto-import
Device
Conditions
Container
Same argument & attribute types
FScript
Inherited Types
Variable & it’s Type
Optional Arguments
Commenting
Self referencing
Property

ftd.text

ftd.text is a kernel component 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 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: `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 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.

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.
Copyright © 2023 - FifthTry.com