How to add Notes/Warning box in fastn

How to add a component box in fastn

fastn has an admonitions package which has components for,

• note

• warning

• tip

• danger

• info

which can be used to display messsage.

To use these components, add dependacy in FASTN.ftd,

-- fastn.dependency: fifthtry.github.io/admonitions as admonitions

FASTN.ftd should look like,

-- import: fastn
-- fastn.package: expander
-- fastn.dependency: fastn-community.github.io/doc-site as doc-site
-- fastn.dependency: fifthtry.github.io/admonitions as admonitions

Import the package in index.ftd

-- import: fifthtry.github.io/admonitions as cbox

Note component,

-- cbox.note: I am Note header

I am description of a note. Box width will change as per content. I can have multiple lines in description.
-- end:cbox.note

Warning Component

-- cbox.warning: I am Warning Heading

I am description for warning.
-- end: cbox.warning

Tip Component

-- cbox.tip: I am Tip Heading

I am description for Tip.
-- end: cbox.tip

Danger Component

-- cbox.danger: I am Danger Heading

I am description for danger heading.
-- end: cbox.danger

Info Component

-- cbox.info: I am Info Heading

I am description for info heading.
-- end: cbox.info

It is also possible to modify the emoji of these component.

-- cbox.tip: I am tip Heading
emoji: ⚙️

I am description for heading. Here we have customised the emoji.
-- end: cbox.tip

Text-components

-- cbox.text-1: I am Textworthy Heading

I am description for the heading text-1.
-- end: cbox.text-1

-- cbox.text-2: I am Textworthy Heading

I am description for the heading text-2.
-- end: cbox.text-2

-- cbox.text-3: I am Textworthy Heading

I am description for the heading text-3.
-- end: cbox.text-3

-- cbox.text-4: I am Textworthy Heading

I am description for the heading text-4.
-- end: cbox.text-4

It is also possible to nest one component into another one.

-- cbox.note: I am Note header

I am description of a note. Box width will change as per content. I can have multiple lines in description.

-- cbox.warning: I am Warning Heading

I am description for warning.
-- end: cbox.warning
-- end:cbox.note

---

To learn more about Fastn visit fastn.com

To make cool open-source contributions, visit fastn GitHub repository.

If you need any help Find me here.