Banners are an important element of website design and can be used to enhance the user experience, increase engagement, and drive conversions.
🌟 Ex.g. Look at the top of this page.
To learn more about banner component - Click here.
A banner is typically a horizontal bar that appears at the very top of a webpage, often referred to as a "top banner" or "header banner".
It usually contains important information or calls to action that are designed to catch the user's attention and encourage them to take action.ds.page.banner
inside your page then refer below
code snippet.-- fastn.dependency: fastn-community.github.io/banner
-- import: fastn-community.github.io/banner
-- ds.page:
show-banner: true
-- ds.page.banner:
-- banner.banner:
If you like fastn, give it a ⭐️ star on [GitHub.](https://github.com/fastn-stack/fastn/)
Also, follow us on [Twitter](https://twitter.com/FifthTryHQ),
[Linkedin](https://www.linkedin.com/company/fastn-stack/),
[Instagram](https://www.instagram.com/fastn_stack/)
-- end: ds.page.banner
-- ds.page.body:
This is body content of your page.
-- end: ds.page
Click on the download icon of the above code-block. page.ftd
file will be
downloaded.
fastn serve
on your localhost. Access your localhost in the
browser and open http://127.0.0.1:8000/page/
url, you will see page with a
banner as seen on top of this page.FASTN/ds.ftd
global module that helps you to keep all your global
properties and configurations in one .ftd
file.-- fastn.dependency: fastn-community.github.io/banner
FASTN/ds.ftd
module of midnight-storm
?You can modify a FASTN/ds.ftd
module which is already added inside your
fastn
package.
Let's learn how to modify FASTN/ds.ftd
module:
Edit FASTN/ds.ftd
module and enable show-banner: true
ftd.ui list banner:
property from page
component and add
-- ftd.ui list page.banner
and its content inside your FASTN/ds.ftd
file below -- end: page.footer
as shown in below code snippet.
-- import: fastn-community.github.io/banner
-- import: fastn-community.github.io/midnight-storm/common
-- import: fastn-community.github.io/midnight-storm
export: author-bio,code,compact-text,featured-post,h0,h1,h2,h3,iframe,image,image-first,image-in-between,link,link-group,markdown,not-found-1,not-found-2,output,post,posts,rendered,tip,without-image,youtube
-- component page:
children wrapper:
optional caption title:
optional body body:
boolean sidebar: true
ftd.ui list right-sidebar:
optional string document-title:
optional string document-description:
optional ftd.raw-image-src document-image:
optional string site-name: $common.site-name
optional ftd.image-src site-logo: $common.site-logo
boolean full-width: false
boolean blog: false
boolean show-banner: false
ftd.ui list banner:
ftd.ui list hero:
-- midnight-storm.page: $page.title
site-logo: $page.site-logo
body: $page.body
show-footer: true
right-sidebar: $page.right-sidebar
sidebar: $page.sidebar
document-title: $page.document-title
document-description: $page.document-description
document-image: $page.document-image
github-url: https://github.com/fastn-community/midnight-storm/
github-icon: true
full-width: $page.full-width
blog: $page.blog
show-banner: $page.show-banner
banner: $page.banner
hero: $page.hero
-- midnight-storm.page.footer:
-- midnight-storm.footer:
site-logo: $common.site-logo
site-url: $common.site-url
logo-width: $common.logo-width
logo-height: $common.logo-height
footer-links: $common.footer-links
social-links: $common.social-links
-- end: midnight-storm.page.footer
-- ftd.ui list page.banner:
-- banner.banner:
If you like fastn, give it a ⭐️ star on [GitHub.](https://github.com/fastn-stack/fastn/)
Also, follow us on [Twitter](https://twitter.com/FifthTryHQ),
[Linkedin](https://www.linkedin.com/company/fastn-stack/),
[Instagram](https://www.instagram.com/fastn_stack/)
-- end: page.banner
-- ftd.column:
spacing.fixed.em: 0.8
width: fill-container
children: $page.wrapper
-- end: ftd.column
-- end: midnight-storm.page
-- end: page
Click on the download icon of the above code-block. ds.ftd
file will be
downloaded.
Replace FASTN/ds.ftd
file with this downloaded file inside your fastn
project.
Then deploy or run fastn serve
on your localhost. Access your localhost in the
browser e.g.http://127.0.0.1:8000/
you will see all your pages with a
banner on top of every page.