Learn full-stack web development using fastn in a week

Learn Now

Frontend

Text Attributes

These attributes are available to ftd.text, ftd.integer, ftd.decimal and ftd.boolean components.

`style: ftd.text-style list`

This style attribute can be used to add inline styles on the rendered content. It accepts a list of 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 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 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 and is optional.

Note: This attribute can only be used within ftd.container and won't work from within any other fastn containers like ftd.row and 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