ftd.text
, ftd.integer
,
ftd.decimal
and ftd.boolean
components.style: ftd.text-style list
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.style
-- 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
text-align: optional ftd.text-align
ftd.text-align
type value and is
optional.text-align
-- 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
text-indent: optional ftd.length
ftd.length
value and is optional.text-indent
-- 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.
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
.display
-- 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