This `style` attribute can be used to add inline styles on the rendered content. It accepts a list of [`ftd.text-style`](ftd/built-in-types/#ftd-text-style) values and is optional.

Sample code using `style`

Input

-- ftd.text: These are stylized values
style: italic, regular
color: $inherited.colors.text-strong

-- ftd.integer: 1234
style: bold
color: $inherited.colors.text-strong

-- ftd.decimal: 3.142
style: underline, italic
color: $inherited.colors.text-strong

-- ftd.boolean: true
style: heavy
color: $inherited.colors.text-strong

Lang:

ftd

Output

These are stylized values

1234

3.142

true

`text-align: optional ftd.text-align`

This attribute is used to align the rendered content. It accepts the [`ftd.text-align`](ftd/built-in-types/#ftd-text-align) type value and is optional.

Sample code using `text-align`

Input

-- ftd.row:
spacing.fixed.px: 10

-- ftd.text:
text-align: center
border-width.px: 1
border-radius.px: 3
padding.px: 5
width.fixed.percent: 30
color: $inherited.colors.text-strong

this is **text-align: center** text. a bit longer text so you can see what's going on.

-- ftd.text:
text-align: start
border-width.px: 1
border-radius.px: 3
padding.px: 5
width.fixed.percent: 30
color: $inherited.colors.text-strong

this is **text-align: start** text. a bit longer text so you can see what's
going on.

-- ftd.text:
text-align: end
border-width.px: 1
border-radius.px: 3
padding.px: 5
width.fixed.percent: 30
color: $inherited.colors.text-strong

this is **text-align: end** text. a bit longer text so you can see what's going
on.

-- ftd.text:
text-align: justify
border-width.px: 1
border-radius.px: 3
padding.px: 5
width.fixed.percent: 30
color: $inherited.colors.text-strong

this is **text-align: justify** text. a bit longer text so you can see what's going on.

-- end: ftd.row

Lang:

ftd

Output

this is **text-align: center** text. a bit longer text so you can see what's going on.

this is **text-align: start** text. a bit longer text so you can see what's going on.

this is **text-align: end** text. a bit longer text so you can see what's going on.

this is **text-align: justify** text. a bit longer text so you can see what's going on.

`text-indent: optional ftd.length`

This attribute can be used to specify the indentation of the first line in the rendered text. It accepts a [`ftd.length`](ftd/built-in-types/#ftd-length) value and is optional.

Sample code using `text-indent`

Input

-- ftd.text:
text-indent.px: 30
color: $inherited.colors.text-strong

This is some indented text.

It only applies spacing at the beginning of the first line.

Lang:

ftd

Output

This is some indented text. It only applies spacing at the beginning of the first line.

`display: optional ftd.display`

This `display` attribute sets the display behaviour of an element. It accepts value of type [`ftd.display`](ftd/built-in-types/#ftd-display) and is optional. `Note`: This attribute can only be used within [`ftd.container`](ftd/container) and won't work from within any other `fastn` containers like [`ftd.row`](ftd/row) and [`ftd.column`](ftd/column).

Sample code using `display`

Input

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

-- ftd.text:
display: block
border-color: $yellow-red
border-width.px: 2

This is a block element.
It takes up the full width available and creates a new line after it.

-- ftd.text:
display: inline
border-color: $yellow-red
border-width.px: 2

This is an inline element.
It flows with the text and does not create a new line.

-- ftd.text: This is another inline text
display: inline
border-color: $yellow-red
border-width.px: 2

-- ftd.text:
display: inline-block
border-color: $yellow-red
border-width.px: 2

This is an inline-block element.
It takes up only the necessary width required by its content
and allows other elements to appear on the same line.

-- ftd.text: This is another inline-block text
display: inline-block
border-color: $yellow-red
border-width.px: 2

-- end: ftd.container

Lang:

ftd

Output

This is a block element. It takes up the full width available and creates a new line after it.

This is an inline element. It flows with the text and does not create a new line.

This is another inline text

This is an inline-block element. It takes up only the necessary width required by its content and allows other elements to appear on the same line.

This is another inline-block text

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.