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