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