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