`Custom Components` let's the user to turn their creativity into action. `Components` help users to build exciting features for their projects including styles, features, color-schemes, templates, typography etc. `Components` give scalability, efficiency as well as consistency to the design. Once created can be used and reused as many times throughout the project as well as can be used by others when published on GitHub. In our `Expander project`, we have used the `component` and named it as `box`. We moved our column code block that represents the box which we created in the last part and re-used the `component` three times. Documentation: [read more](https://fastn.com/components/)

How to create a Component?

Syntax for creating a component

-- component <component-name>:

;; content of component goes here

-- end: <component-name>

Lang:

ftd

How to call/refer the component?

`Component box` is created outside the root column, that represents the box. Then, inside the root column we refer it.

Syntax for refering the component

-- <component-name>:

Lang:

ftd

How to give different content to each box?

To make Header and Body content user-dependent, we need to pass two arguments to the **component** we created.

Arguments

-- component <component-name>:
caption <caption name>: <default value if any>
body <body name>: <default value if any>

-- end: <component-name>

Lang:

ftd

Now we can pass the arguments names for caption and body to Header and Body respectively.

-- ftd.text: $box.<caption name>

-- ftd.text: $box.<body name>

Lang:

ftd

Ways to pass the Header and Body content:

For simplicity, I am assuming that **** is **box**.

- **First Way**

-- box: Header is in caption area

Body is in body area

Lang:

ftd

- **Second Way**

-- box:
title: Header using title keyword

Body is in body area

Lang:

ftd

- **Third Way**

-- box:

-- box.title:

Header is in first child: box.title.

This is used to write multiline header

-- box.body:

Body is in second child: box.body.

Lang:

ftd

- **Fourth Way:** As an empty to take default values, if defined in arguments.

-- box:

Lang:

ftd

Continue with the [part 4 now](/expander/events/).

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.