In fastn, we use headers to pass data to component, variables etc. There are several different ways to pass data through headers for various argument types.

Inline headers

For simple (or caption only) arguments types, you can pass data through inline headers as key value pairs.

For simple/caption only arguments

Sample usage

Input

-- foo-1: This is title
title-color: $inherited.colors.text-strong

Lang:

ftd

Output

This is title

Definitions used

Section headers

For list type arguments, we use section headers to pass data to it.

For list type arguments

Sample usage

Input

-- foo-2: This is title

-- foo-2.inner:

-- ftd.row:
width: fill-container
background.solid: yellow

-- ftd.text: This is some inner text
color: red

-- end: ftd.row

-- end: foo-2.inner

Lang:

ftd

Output

This is title

This is some inner text

Definitions used

Block headers

For record type arguments, we use block headers to pass data. Passing record field data can be done through its inline headers or by passing it individually through record field syntax.

For record type arguments (for kernel components)

Sample usage

Input

-- ftd.text: First Text
margin-vertical.px: 10

-- ftd.text.color:
light: red
dark: yellow


-- ftd.text: Second Text
margin-vertical.px: 10

-- ftd.text.color: red
dark: yellow


-- ftd.text: Third Text
margin-vertical.px: 10

-- ftd.text.color: red
-- ftd.text.color.dark: yellow


-- ftd.text: Fourth Text
margin-vertical.px: 10

-- ftd.text.color.light: red
-- ftd.text.color.dark: yellow

Lang:

ftd

Output

First Text

Second Text

Third Text

Fourth Text

For record-type arguments ( user-defined components )

Sample usage

Input

-- foo: Text 1 from component

-- foo.text-color: $c


-- foo: Text 2 from component

-- foo.text-color:
light: red
dark: yellow


-- foo: Text 3 from component

-- foo.text-color: red
dark: yellow


-- foo: Text 4 from component

-- foo.text-color: red
-- foo.text-color.dark: yellow


-- foo: Text 5 from component

-- foo.text-color.light: red
-- foo.text-color.dark: yellow


-- foo: Text 6 from component

-- foo.text-color.light: red
-- foo.text-color.dark: $d-color

Lang:

ftd

Output

Text 1 from component

Text 2 from component

Text 3 from component

Text 4 from component

Text 5 from component

Text 6 from component

Definitions used

More complex record type arguments (user-defined component)

Sample usage

Input

-- bar:

-- bar.text:

Hello this is some text

-- bar.d: Rithik

-- bar.d.description:

This is some description

-- bar.d.age: 23

-- bar.text-color: red
dark: yellow

Lang:

ftd

Output

Hello this is some text

Rithik

This is some description

Definitions used

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.