`children: ftd.ui list`

This property is used to provide child elements for container. It takes value as a list of ftd.ui components.

Sample code using children

Input

-- ftd.ui list child-components:

-- ftd.text: This is first child text
-- ftd.text: This is another child text

-- end: child-components

-- ftd.column:
color: $inherited.colors.text
children: $child-components

-- end: ftd.column

Lang:

ftd

Output

This is first child text

This is another child text

`colors: optional ftd.color-scheme`

This property will allow users to specify any color scheme for any container which can be used on any of its child components. It takes value of type ftd.color-scheme and is optional.

Sample code using colors

Input

-- import: fastn-community.github.io/saturated-sunset-cs as cs

-- ftd.column:
colors: $cs.main
spacing.fixed.px: 10

-- ftd.text: Hello World
color: $inherited.colors.background.step-2

-- ftd.text: We have used forest cs here
color: $inherited.colors.background.step-2

-- end: ftd.column

Lang:

ftd

Output

Hello World

We have used forest cs here

`types: optional ftd.type-data`

This property will allow users to specify any typography scheme which can be used on any of its child components. It takes value of type ftd.type-data and is optional.

Sample code using types

Input

-- import: fastn-community.github.io/virgil-typography as typo

-- ftd.column:
types: $typo.types
spacing.fixed.px: 10

-- ftd.text: Hello World
role: $inherited.types.heading-medium
color: $inherited.colors.text

-- ftd.text: We have used virgil typography here
role: $inherited.types.heading-medium
color: $inherited.colors.text

-- end: ftd.column

Lang:

ftd

Output

Hello World

We have used virgil typography here