-- 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: fifthtry.github.io/virgil-font-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

Support `fastn`!

Enjoying `fastn`? Please consider giving us a star ⭐️ on [GitHub](https://github.com/fastn-stack/fastn) to show your support!

[⭐️](https://github.com/fastn-stack/fastn)

Getting Help

Have a question or need help? Visit our [GitHub Q&A discussion](https://github.com/fastn-stack/fastn/discussions/categories/q-a) to get answers and subscribe to it to stay tuned. Join our [Discord](https://discord.gg/a7eBUeutWD) channel and share your thoughts, suggestion, question etc. Connect with our [community](/community/)!

[💻️](/community/)

Found an issue?

If you find some issue, please visit our [GitHub issues](https://github.com/fastn-stack/fastn/issues) to tell us about it.

Quick links:

- [Install `fastn`](install/) - [Create `fastn` package](create-fastn-package/) - [Expander Crash Course](expander/) - [Syntax Highlighting in Sublime Text](/sublime/)

Join us

We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) 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.