From f371c077aaf6260ae4044925bd718999deb69777 Mon Sep 17 00:00:00 2001 From: meenu Date: Wed, 8 Nov 2023 17:36:32 +0530 Subject: [PATCH] added pricing components --- FASTN.ftd | 6 +- FASTN/ds.ftd | 2 +- assets/location.svg | 10 + assets/tick.svg | 2 + common/index.ftd | 103 +++++ index.ftd | 910 ++++++++++++++++++++++++++++++++++++++++++-- sidebar.ftd | 66 ---- 7 files changed, 1005 insertions(+), 94 deletions(-) create mode 100644 assets/location.svg create mode 100644 assets/tick.svg create mode 100644 common/index.ftd delete mode 100644 sidebar.ftd diff --git a/FASTN.ftd b/FASTN.ftd index 992464f..d18791d 100644 --- a/FASTN.ftd +++ b/FASTN.ftd @@ -10,10 +10,6 @@ favicon: /-/meenukumari28.github.io/pricing/favicon.ico -- fastn.auto-import: meenukumari28.github.io/pricing/FASTN/ds -- fastn.auto-import: meenukumari28.github.io/pricing/assets +-- fastn.auto-import: meenukumari28.github.io/pricing/common -- fastn.auto-import: doc-site --- fastn.sitemap: - -# Home: index.html - -- Right Sidebar Sample: /sidebar/ diff --git a/FASTN/ds.ftd b/FASTN/ds.ftd index 4fe7a1e..777413b 100644 --- a/FASTN/ds.ftd +++ b/FASTN/ds.ftd @@ -16,7 +16,7 @@ boolean sidebar: false optional string document-title: optional string document-description: optional ftd.raw-image-src document-image: -optional string site-name: fastn template +optional string site-name: optional ftd.image-src site-logo: $site-logo boolean github-icon: false optional string github-url: diff --git a/assets/location.svg b/assets/location.svg new file mode 100644 index 0000000..25c8f98 --- /dev/null +++ b/assets/location.svg @@ -0,0 +1,10 @@ + + + + + + + \ No newline at end of file diff --git a/assets/tick.svg b/assets/tick.svg new file mode 100644 index 0000000..a144428 --- /dev/null +++ b/assets/tick.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/common/index.ftd b/common/index.ftd new file mode 100644 index 0000000..8681c5e --- /dev/null +++ b/common/index.ftd @@ -0,0 +1,103 @@ +-- record feature: +caption title: +boolean active: false + + + +-- feature list free-feature-list: + +-- feature: Lorem ipsum dolor sit amet + +-- feature: Sed quibusdam sint vel rerum voluptates + +-- feature: Vel inventore quasi et enim enim + +-- feature: In incidunt ipsa et possimus + +-- feature: Quo iste quod aut + +-- end: free-feature-list + + + +-- feature list startup-feature-list: + +-- feature: Lorem ipsum dolor sit amet + +-- feature: Sed quibusdam sint vel rerum voluptates + +-- feature: Vel inventore quasi et enim enim + +-- feature: In incidunt ipsa et possimus + +-- feature: Quo iste quod aut + +-- end: startup-feature-list + + + + +-- feature list enterprise-feature-list: + +-- feature: Lorem ipsum dolor sit amet + +-- feature: Sed quibusdam sint vel rerum voluptates + +-- feature: Vel inventore quasi et enim enim + +-- feature: In incidunt ipsa et possimus + +-- feature: Quo iste quod aut + +-- end: enterprise-feature-list + + + + + +-- feature list free-feature-list-2: + +-- feature: - Feature 1 + +-- feature: - Feature 2 + +-- feature: - Feature 3 + +-- feature: - Feature 4 + +-- feature: - Feature 5 + +-- end: free-feature-list-2 + + + +-- feature list startup-feature-list-2: + +-- feature: - Feature 1 + +-- feature: - Feature 2 + +-- feature: - Feature 3 + +-- feature: - Feature 4 + +-- feature: - Feature 5 + +-- end: startup-feature-list-2 + + + + +-- feature list enterprise-feature-list-2: + +-- feature: - Feature 1 + +-- feature: - Feature 2 + +-- feature: - Feature 3 + +-- feature: - Feature 4 + +-- feature: - Feature 5 + +-- end: enterprise-feature-list-2 \ No newline at end of file diff --git a/index.ftd b/index.ftd index 9566ec2..241dfda 100644 --- a/index.ftd +++ b/index.ftd @@ -1,40 +1,906 @@ --- ds.page: Welcome to doc-site +-- ds.page: +full-width: true +sidebar: false +-- ds.h1: Pricing 1 -⚡️ `doc-site` will help you create a beautiful documentation site in no time. +-- pricing: -It provides out-of-the-box documentation features that can be used to create any -kind of site(personal website, blog, etc). +-- pricing-card: Basic +active: false +price: 0 +currency: \$ +subscription: mo +feature-list: $common.free-feature-list +cta-text: Get Started +cta-link: /pricing/ +bg-color: $inherited.colors.custom.one -[Click here](https://fastn-community.github.io/doc-site/) to read doc-site -documentation. +Lorem ipsum dolor sit amet, consectet adipiscing elit. --- ds.h3: 🚀 Fast Track +-- pricing-card: Standard +active: true +price: 99 +currency: \$ +subscription: mo +feature-list: $common.startup-feature-list +cta-text: Get Started +cta-link: /pricing/ +bg-color: $inherited.colors.custom.two -Create your first fastn [web-site](https://fastn.com/expander/hello-world/-/build/) -project in just 5 minutes! +Lorem ipsum dolor sit amet, consectet adipiscing elit. --- ds.h3: 🌟 Whats next? +-- pricing-card: Premium +active: false +price: 153 +currency: \$ +subscription: mo +feature-list: $common.enterprise-feature-list +cta-text: Get Started +cta-link: /pricing/ +bg-color: $inherited.colors.custom.three -Create your first page. -[Click here to know more](https://fastn-community.github.io/doc-site/components/page/). +Lorem ipsum dolor sit amet, consectet adipiscing elit. --- ds.h3: 👀 Want to learn more? +-- end: pricing -Feel free to check [our expander course](https://fastn.com/expander/) or jump -into our [FifthTry Discord server](https://discord.gg/bucrdvptYd). +-- ds.h1: Pricing 2 +-- pricing: --- ds.h3: 🎯 Used by? +-- pricing-card-2: Basic +active: false +price: 0 +currency: \$ +subscription: Per Month +feature-list: $common.free-feature-list-2 +cta-text: Get Started +cta-link: /pricing/ +icon: $assets.files.assets.location.svg -Our all documentation sites uses this `doc-site` theme. +Lorem ipsum dolor sit amet, consectet adipiscing elit. -- [fastn.com](https://fastn.com/home/) -- [FifthTry.com](https://www.fifthtry.com/) +-- pricing-card-2: Standard +active: true +price: 99 +currency: \$ +subscription: Per Month +feature-list: $common.startup-feature-list-2 +cta-text: Get Started +cta-link: /pricing/ +icon: $assets.files.assets.location.svg --- ds.h2: Learn fastn and become a pro? +Lorem ipsum dolor sit amet, consectet adipiscing elit. -You are one click away, just check [our documentation](https://fastn.com/) and -dont forget to jump into our [FifthTry Discord server](https://discord.gg/bucrdvptYd). +-- pricing-card-2: Premium +active: false +price: 153 +currency: \$ +subscription: Per Month +feature-list: $common.enterprise-feature-list-2 +cta-text: Get Started +cta-link: /pricing/ +icon: $assets.files.assets.location.svg + +Lorem ipsum dolor sit amet, consectet adipiscing elit. + +-- end: pricing + +-- ds.h1: Pricing 3 + +-- pricing: + +-- pricing-card-3: Basic +active: false +price: 0 +currency: \$ +subscription: Per Month +feature-list: $common.free-feature-list +cta-text: Get Plan +cta-link: /pricing/ +icon: $assets.files.assets.location.svg + +Lorem ipsum dolor sit amet, consectet adipiscing elit. + +-- pricing-card-3: Standard +active: true +price: 99 +currency: \$ +subscription: Per Month +feature-list: $common.startup-feature-list +cta-text: Get Plan +cta-link: /pricing/ +icon: $assets.files.assets.location.svg + +Lorem ipsum dolor sit amet, consectet adipiscing elit. + +-- pricing-card-3: Premium +active: false +price: 153 +currency: \$ +subscription: Per Month +feature-list: $common.enterprise-feature-list +cta-text: Get Plan +cta-link: /pricing/ +icon: $assets.files.assets.location.svg + +Lorem ipsum dolor sit amet, consectet adipiscing elit. + +-- end: pricing + +-- ds.h1: Pricing 4 + +-- pricing: + +-- pricing-card-4: Basic +active: false +price: 0 +currency: \$ +subscription: Per Month +feature-list: $common.free-feature-list +cta-text: Purchase +cta-link: /pricing/ +bg-color: $inherited.colors.custom.one + +Lorem ipsum dolor sit amet, dolor sit amet elit. + +-- pricing-card-4: Standard +active: true +price: 99 +currency: \$ +subscription: Per Month +feature-list: $common.startup-feature-list +cta-text: Purchase +cta-link: /pricing/ +bg-color: $inherited.colors.custom.two + +Lorem ipsum dolor sit amet, dolor sit amet elit. + +-- pricing-card-4: Premium +active: false +price: 153 +currency: \$ +subscription: Per Month +feature-list: $common.enterprise-feature-list +cta-text: Purchase +cta-link: /pricing/ +bg-color: $inherited.colors.custom.eight + +Lorem ipsum dolor sit amet, dolor sit amet elit. + +-- end: pricing + +-- ds.h1: Pricing 5 + +-- pricing: + +-- pricing-card-5: Basic +active: false +price: 0 +currency: \$ +subscription: Per Month +feature-list: $common.free-feature-list +cta-text: Get Plan +cta-link: /pricing/ +bg-color: $inherited.colors.custom.one + +Lorem ipsum dolor sit amet, consectet adipiscing elit. + +-- pricing-card-5: Standard +active: true +price: 99 +currency: \$ +subscription: Per Month +feature-list: $common.startup-feature-list +cta-text: Get Plan +cta-link: /pricing/ +bg-color: $inherited.colors.custom.two + +Lorem ipsum dolor sit amet, consectet adipiscing elit. + +-- pricing-card-5: Premium +active: false +price: 153 +currency: \$ +subscription: Per Month +feature-list: $common.enterprise-feature-list +cta-text: Get Plan +cta-link: /pricing/ +bg-color: $inherited.colors.custom.three + +Lorem ipsum dolor sit amet, consectet adipiscing elit. + +-- end: pricing -- end: ds.page + + + + + + + + + + + +-- component pricing: +optional caption title: +optional body body: +children pricing-cards: + +-- ftd.column: +width: fill-container +align-content: center + +-- ftd.desktop: + +-- pricing-desktop: $pricing.title +pricing-cards: $pricing.pricing-cards + +$pricing.body + +-- end: ftd.desktop + +-- ftd.mobile: + +-- pricing-mobile: $pricing.title +pricing-cards: $pricing.pricing-cards + +$pricing.body + +-- end: ftd.mobile + +-- end: ftd.column + +-- end: pricing + + + + + + + + +-- component pricing-desktop: +optional caption title: +optional body body: +children pricing-cards: + +-- ftd.column: +width: fill-container +align-content: center +spacing.fixed.px: 32 + +-- ftd.text: $pricing-desktop.title +if: { pricing-desktop.title!= NULL } +role: $inherited.types.heading-large +color: $inherited.colors.text-strong +text-align: center +width.fixed.percent: 50 + +-- ftd.text: +if: { pricing-desktop.body!= NULL } +role: $inherited.types.copy-regular +color: $inherited.colors.text +text-align: center +width.fixed.percent: 60 + +$pricing-desktop.body + +-- ftd.row: +width: fill-container +children: $pricing-desktop.pricing-cards +spacing.fixed.px: 32 +margin-vertical.px: 48 +align-content: center +max-width.fixed.px: 1120 + +-- end: ftd.row + +-- end: ftd.column + +-- end: pricing-desktop + + + + + + + + + + +-- component pricing-mobile: +optional caption title: +optional body body: +children pricing-cards: + +-- ftd.column: +width: fill-container +align-content: center +spacing.fixed.px: 24 + +-- ftd.text: $pricing-mobile.title +if: { pricing-mobile.title!= NULL } +role: $inherited.types.heading-medium +color: $inherited.colors.text-strong +text-align: center + +-- ftd.text: +if: { pricing-mobile.body!= NULL } +role: $inherited.types.copy-regular +color: $inherited.colors.text +text-align: center + +$pricing-mobile.body + +-- ftd.column: +width: fill-container +children: $pricing-mobile.pricing-cards +spacing.fixed.px: 16 + +-- end: ftd.column + +-- end: ftd.column + +-- end: pricing-mobile + + + + + + + + + + +-- component pricing-card: +caption title: +boolean active: +integer price: +string currency: +string subscription: +common.feature list feature-list: +string cta-text: +string cta-link: +optional string body-title: +optional body body: +optional string tag: +ftd.color bg-color: +boolean $cta-hover: false + +-- ftd.column: +width.fixed.percent: 30 +width if { ftd.device == "mobile" }: fill-container +background.solid: $inherited.colors.background.step-1 +border-radius.px: 12 +shadow: $shadow-14 +align-content: center +spacing.fixed.px: 12 + +-- ftd.column: +color: $inherited.colors.text-strong +role: $inherited.types.heading-medium +width: fill-container +margin-bottom.px: 16 +background.solid: $pricing-card.bg-color +align-self: center +padding.px: 32 + +-- ftd.text: $pricing-card.title +width: fill-container +style: medium +text-align: center + +-- end: ftd.column + +-- ftd.row: +margin-bottom.px: 32 +align-content: center +spacing.fixed.px: 4 +color: $inherited.colors.text-strong +role: $inherited.types.heading-medium + +-- ftd.text: $pricing-card.currency + +-- ftd.integer: $pricing-card.price +role: $inherited.types.heading-large + +-- ftd.text: \/ + +-- ftd.text: $pricing-card.subscription + +-- end: ftd.row + +-- feature-loop: $obj.title +active: $obj.active +$loop$: $pricing-card.feature-list as $obj + +-- ftd.column: +width: fill-container +align-content: center +margin-vertical.px: 24 + +-- ftd.text: $pricing-card.cta-text +link: $pricing-card.cta-link +padding-vertical.px: 16 +padding-horizontal.px: 32 +background.solid: $inherited.colors.cta-primary.base +text-align: center +border-radius.px: 24 +color: $inherited.colors.cta-primary.text +role: $inherited.types.button-medium + +-- end: ftd.column + +-- end: ftd.column + +-- end: pricing-card + + + + + + + + + +-- component feature-loop: +caption title: +boolean active: + +-- ftd.row: +width: fill-container +spacing.fixed.px: 12 +margin-bottom.px: 12 +align-content: center + +-- ftd.text: $feature-loop.title +color: $inherited.colors.text-strong +color if { !feature-loop.active } : $inherited.colors.text +role: $inherited.types.copy-small + +-- end: ftd.row + +-- end: feature-loop + +-- ftd.shadow shadow-14: +color: rgba(0, 59, 128, 0.15) +x-offset.px: 2 +y-offset.px: 0 +blur.px: 14 +inset-body: false +spread.px: 1 + + +-- ftd.shadow shadow: +color: rgba(0, 0, 0, 0.1) +x-offset.px: 5 +y-offset.px: 5 +blur.px: 0 +inset-body: false +spread.px: 0 + + + + + + + + + + + +-- component pricing-card-2: +caption title: +boolean active: +integer price: +string currency: +string subscription: +ftd.image-src icon: +common.feature list feature-list: +string cta-text: +string cta-link: +optional string body-title: +optional body body: +optional string tag: +boolean $cta-hover: false + +-- ftd.column: +width.fixed.percent: 30 +width if { ftd.device == "mobile" }: fill-container +border-radius.px: 12 +align-content: center + +-- ftd.column: +color: $inherited.colors.text-strong +role: $inherited.types.heading-small +width: fill-container +margin-bottom.px: 16 +background.solid: $inherited.colors.background.step-1 +align-content: center +padding-vertical.px: 28 +spacing.fixed.px: 8 + +-- ftd.image: $pricing-card-2.icon +width.fixed.px: 64 +background.solid: $inherited.colors.cta-primary.base +padding.px: 12 +border-radius.px: 100 + +-- ftd.text: $pricing-card-2.title +width: fill-container +style: medium +text-align: center + +-- ftd.row: +margin-bottom.px: 32 +align-content: center +spacing.fixed.px: 4 +color: $inherited.colors.text-strong +role: $inherited.types.heading-medium + +-- ftd.text: $pricing-card-2.currency + +-- ftd.integer: $pricing-card-2.price +role: $inherited.types.heading-large + +-- ftd.text: $pricing-card-2.subscription +color: $inherited.colors.text +role: $inherited.types.copy-large +margin-left.px: 12 +margin-top.px: 12 +style: light + +-- end: ftd.row + +-- end: ftd.column + +-- feature-loop-2: $obj.title +active: $obj.active +$loop$: $pricing-card-2.feature-list as $obj + +-- ftd.column: +width: fill-container +align-content: center +margin-vertical.px: 24 + +-- ftd.text: $pricing-card-2.cta-text +link: $pricing-card-2.cta-link +padding-vertical.px: 16 +padding-horizontal.px: 32 +min-width.fixed.px: 192 +background.solid: $inherited.colors.cta-primary.base +text-align: center +border-radius.px: 12 +color: $inherited.colors.cta-primary.text +role: $inherited.types.button-medium + +-- end: ftd.column + +-- end: ftd.column + +-- end: pricing-card-2 + + + + + + + + + +-- component feature-loop-2: +caption title: +boolean active: + +-- ftd.row: +width: fill-container +margin-bottom.px: 12 +align-content: center + +-- ftd.text: $feature-loop-2.title +color: $inherited.colors.text-strong +color if { !feature-loop-2.active } : $inherited.colors.text +role: $inherited.types.copy-small + +-- end: ftd.row + +-- end: feature-loop-2 + + + + + + + + + + + +-- component pricing-card-3: +caption title: +boolean active: +integer price: +string currency: +string subscription: +ftd.image-src icon: +common.feature list feature-list: +string cta-text: +string cta-link: +optional string body-title: +optional body body: +optional string tag: +boolean $cta-hover: false + +-- ftd.column: +width.fixed.percent: 30 +width if { ftd.device == "mobile" }: fill-container +border-radius.px: 44 +align-content: center +background.solid: $inherited.colors.background.step-1 + +-- ftd.image: $pricing-card-3.icon +width.fixed.px: 92 +background.solid: $inherited.colors.cta-primary.base +padding.px: 12 +border-radius.px: 100 +margin-top.px: -38 + +-- ftd.row: +margin-top.px: 24 +align-content: center +spacing.fixed.px: 4 +color: $inherited.colors.text-strong +role: $inherited.types.heading-medium + +-- ftd.text: $pricing-card-3.currency + +-- ftd.integer: $pricing-card-3.price +role: $inherited.types.heading-large + +-- end: ftd.row + +-- ftd.text: $pricing-card-3.subscription +color: $inherited.colors.text +role: $inherited.types.copy-large +margin-top.px: 12 +margin-bottom.px: 24 +style: light + +-- ftd.text: $pricing-card-3.title +width: fill-container +style: medium +text-align: center +color: $inherited.colors.text-strong +role: $inherited.types.heading-small +margin-bottom.px: 24 + +-- feature-loop: $obj.title +active: $obj.active +$loop$: $pricing-card-3.feature-list as $obj + +-- ftd.text: $pricing-card-3.cta-text +link: $pricing-card-3.cta-link +padding-vertical.px: 16 +padding-horizontal.px: 32 +min-width.fixed.px: 192 +background.solid: $inherited.colors.cta-primary.base +text-align: center +border-radius.px: 12 +color: $inherited.colors.cta-primary.text +role: $inherited.types.button-medium +margin-vertical.px: 24 + +-- end: ftd.column + +-- end: pricing-card-3 + + + + + + + + + + +-- component pricing-card-4: +caption title: +boolean active: +integer price: +string currency: +string subscription: +common.feature list feature-list: +string cta-text: +string cta-link: +optional string body-title: +optional body body: +optional string tag: +ftd.color bg-color: +boolean $cta-hover: false + +-- ftd.column: +width.fixed.percent: 30 +width if { ftd.device == "mobile" }: fill-container +background.solid: $pricing-card-4.bg-color +border-radius.px: 12 +spacing.fixed.px: 12 +padding.px: 32 + +-- ftd.column: +width: fill-container +spacing.fixed.px: 24 +padding-bottom.px: 12 +border-bottom-width.px: 2 +border-color: $inherited.colors.text + +-- ftd.row: +color: $inherited.colors.text-strong +role: $inherited.types.heading-medium +width: fill-container + +-- ftd.text: $pricing-card-4.title +width: fill-container +style: medium + +-- ftd.text: $pricing-card-4.currency + +-- ftd.integer: $pricing-card-4.price +role: $inherited.types.heading-large + +-- end: ftd.row + +-- ftd.text: +role: $inherited.types.copy-regular +color: $inherited.colors.text-strong + +$pricing-card-4.body + +-- end: ftd.column + +-- ftd.text: Includes: +role: $inherited.types.copy-large +color: $inherited.colors.text-strong +style: italic + +-- feature-loop-4: $obj.title +active: $obj.active +$loop$: $pricing-card-4.feature-list as $obj + +-- ftd.text: $pricing-card-4.cta-text +link: $pricing-card-4.cta-link +padding-vertical.px: 16 +padding-horizontal.px: 32 +background.solid: $inherited.colors.cta-primary.base +text-align: center +border-radius.px: 8 +color: $inherited.colors.cta-primary.text +role: $inherited.types.button-medium +width: fill-container + +-- end: ftd.column + +-- end: pricing-card-4 + + + + + + + + + +-- component feature-loop-4: +caption title: +boolean active: +ftd.image-src icon: $assets.files.assets.tick.svg + +-- ftd.row: +width: fill-container +spacing.fixed.px: 12 +margin-bottom.px: 12 +align-self: center + +-- ftd.image: +src: $feature-loop-4.icon +width.fixed.px: 18 + +-- ftd.text: $feature-loop-4.title +color: $inherited.colors.text-strong +color if { !feature-loop-4.active } : $inherited.colors.text +role: $inherited.types.copy-small + +-- end: ftd.row + +-- end: feature-loop-4 + + + + + + + + + + +-- component pricing-card-5: +caption title: +boolean active: +integer price: +string currency: +string subscription: +common.feature list feature-list: +string cta-text: +string cta-link: +optional string body-title: +optional body body: +optional string tag: +boolean $cta-hover: false +ftd.color bg-color: + +-- ftd.column: +width.fixed.percent: 30 +width if { ftd.device == "mobile" }: fill-container +border-radius.px: 15 +align-content: center +background.solid: $pricing-card-5.bg-color + +-- ftd.column: +width.fixed.px: 220 +height.fixed.px: 170 +border-radius.px: 15 +padding-vertical.px: 24 +spacing.fixed.px: 18 +align-content: center +background.solid: $inherited.colors.background.step-1 +margin-top.px: -32 +margin-bottom.px: 24 +role: $inherited.types.heading-large +shadow: $shadow +color: $pricing-card-5.bg-color + +-- ftd.text: $pricing-card-5.title +width: fill-container +role: $inherited.types.heading-small +text-align: center + +-- ftd.row: +align-content: center +spacing.fixed.px: 4 +color: $pricing-card-5.bg-color + +-- ftd.text: $pricing-card-5.currency +style: medium + +-- ftd.integer: $pricing-card-5.price + +-- end: ftd.row + +-- ftd.text: $pricing-card-5.subscription +role: $inherited.types.copy-large +style: light + +-- end: ftd.column + +-- feature-loop: $obj.title +active: $obj.active +$loop$: $pricing-card-5.feature-list as $obj + +-- ftd.text: $pricing-card-5.cta-text +link: $pricing-card-5.cta-link +padding-vertical.px: 16 +padding-horizontal.px: 32 +min-width.fixed.px: 192 +background.solid: $inherited.colors.cta-tertiary.text +text-align: center +border-radius.px: 50 +color: $pricing-card-5.bg-color +role: $inherited.types.button-medium +margin-vertical.px: 24 +shadow: $shadow + +-- end: ftd.column + +-- end: pricing-card-5 \ No newline at end of file diff --git a/sidebar.ftd b/sidebar.ftd deleted file mode 100644 index 8d48433..0000000 --- a/sidebar.ftd +++ /dev/null @@ -1,66 +0,0 @@ --- ds.page: Page with right-sidebar 👉 -sidebar: true - --- ds.page.right-sidebar: - --- ds.h3: Heading in sidebar - -You can call any component inside sidebar. - -This right-sidebar will appear on all pages. - --- ds.code: -lang: ftd - -\-- ftd.text: Hello World - --- end: ds.page.right-sidebar - --- ds.page.body: - -If you want to show right-sidebar on your page you can add it like sidebar shown -in this page 👉. - --- ds.h3: `right-sidebar` documentation - -[Click here](https://fastn-community.github.io/doc-site/right-sidebar/) to read -more about `right-sidebar`. - --- ds.h3: How this page is built? - -Copy below code snippet to create pages like this with right-sidebar. - --- ds.code: -lang: ftd - -\-- ds.page: Page with right-sidebar 👉 -sidebar: true - -\-- ds.page.right-sidebar: - -\-- ds.h3: Heading in sidebar - -You can call any component inside sidebar. - -This right-sidebar will appear on all pages. - -\-- ds.code: -lang: ftd - -\-- ftd.text: Hello World - -\-- end: ds.page.right-sidebar - -\-- ds.page.body: - -If you want to show right-sidebar on your page you can add it like sidebar shown -in this page 👉. - -\-- ds.h3: Read right-sidebar documentation - -[Click here](https://fastn-community.github.io/doc-site/right-sidebar/) to read -more about `right-sidebar`. - -\-- end: ds.page - --- end: ds.page