Bling Components

Home

Holder

Badge

`holder` and it’s Usage

-- holder component is a FTD container. Here you can add any ftd component Or any ftd code. -- holder comes with different UI. Showing below a example of triangular container.

`holder`

Package Name

fifthtry.github.io/bling/holder

holder is a new conversation experience via using FTD lang:

To use holder on your web package, add below into FASTN.ftd file:

-- fastn.dependency: fifthtry.github.io/bling as bling
-- fastn.auto-import: bling/holder as holder

-- fastn.dependency: fifthtry.github.io/bling as bling
-- fastn.auto-import: bling/holder as holder

Once you add above lines into your web package, add holder into your .ftd files:

-- holder.triangular

Show code

Hide code

Output of above example:

This is your Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

Multiple -- holder.triangular containers:

Show code

Hide code

-- holder.triangular:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut

-- ft.code:
lang: ftd

-- ftd.column holder:
optional caption title:
optional body body:
width: auto
width { ftd.device == "mobile" }: fill-container

-- ft.markdown:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut

-- holder.triangular: Lorem ipsum dolor
make-odd: true <default: false - make true for middle container>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut

-- ft.code:
lang: ftd

-- ftd.column holder:
optional caption title:
optional body body:
width: auto
width { ftd.device == "mobile" }: fill-container

-- ft.markdown:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut

-- holder.triangular:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut

-- ft.code:
lang: ftd

-- ftd.column holder:
optional caption title:
optional body body:
width: auto
width { ftd.device == "mobile" }: fill-container

-- ft.markdown:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut

-- end: holder.triangular

-- holder.triangular:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut

-- ft.code:
lang: ftd

-- ftd.column holder:
optional caption title:
optional body body:
width: auto
width { ftd.device == "mobile" }: fill-container

-- ft.markdown:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut

-- holder.triangular: Lorem ipsum dolor
make-odd: true <default: false - make true for middle container>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut

-- ft.code:
lang: ftd

-- ftd.column holder:
optional caption title:
optional body body:
width: auto
width { ftd.device == "mobile" }: fill-container

-- ft.markdown:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut

-- holder.triangular:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut

-- ft.code:
lang: ftd

-- ftd.column holder:
optional caption title:
optional body body:
width: auto
width { ftd.device == "mobile" }: fill-container

-- ft.markdown:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut

-- end: holder.triangular

Output of above example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

-- ftd.column holder:
optional caption title:
optional body body:
width: auto
width { ftd.device == "mobile" }: fill-container

-- ftd.column holder:
optional caption title:
optional body body:
width: auto
width { ftd.device == "mobile" }: fill-container

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

-- ftd.column holder:
optional caption title:
optional body body:
width: auto
width { ftd.device == "mobile" }: fill-container

-- ftd.column holder:
optional caption title:
optional body body:
width: auto
width { ftd.device == "mobile" }: fill-container

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

-- ftd.column holder:
optional caption title:
optional body body:
width: auto
width { ftd.device == "mobile" }: fill-container

-- ftd.column holder:
optional caption title:
optional body body:
width: auto
width { ftd.device == "mobile" }: fill-container

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

Bling Components

Holder

`holder` and it’s Usage

-- holder component is a FTD container. Here you can add any ftd component Or any ftd code. -- holder comes with different UI. Showing below a example of triangular container.

`holder`

Package Name

fifthtry.github.io/bling/holder

holder is a new conversation experience via using FTD lang:

To use holder on your web package, add below into FASTN.ftd file:

-- fastn.dependency: fifthtry.github.io/bling as bling
-- fastn.auto-import: bling/holder as holder

-- fastn.dependency: fifthtry.github.io/bling as bling
-- fastn.auto-import: bling/holder as holder

Once you add above lines into your web package, add holder into your .ftd files:

-- holder.triangular

Show code

Hide code

Output of above example:

This is your Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

Multiple -- holder.triangular containers:

Show code

Hide code

-- holder.triangular:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut

-- ft.code:
lang: ftd

-- ftd.column holder:
optional caption title:
optional body body:
width: auto
width { ftd.device == "mobile" }: fill-container

-- ft.markdown:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut

-- holder.triangular: Lorem ipsum dolor
make-odd: true <default: false - make true for middle container>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut

-- ft.code:
lang: ftd

-- ftd.column holder:
optional caption title:
optional body body:
width: auto
width { ftd.device == "mobile" }: fill-container

-- ft.markdown:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut

-- holder.triangular:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut

-- ft.code:
lang: ftd

-- ftd.column holder:
optional caption title:
optional body body:
width: auto
width { ftd.device == "mobile" }: fill-container

-- ft.markdown:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut

-- end: holder.triangular

-- holder.triangular:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut

-- ft.code:
lang: ftd

-- ftd.column holder:
optional caption title:
optional body body:
width: auto
width { ftd.device == "mobile" }: fill-container

-- ft.markdown:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut

-- holder.triangular: Lorem ipsum dolor
make-odd: true <default: false - make true for middle container>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut

-- ft.code:
lang: ftd

-- ftd.column holder:
optional caption title:
optional body body:
width: auto
width { ftd.device == "mobile" }: fill-container

-- ft.markdown:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut

-- holder.triangular:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut

-- ft.code:
lang: ftd

-- ftd.column holder:
optional caption title:
optional body body:
width: auto
width { ftd.device == "mobile" }: fill-container

-- ft.markdown:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut

-- end: holder.triangular

Output of above example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

-- ftd.column holder:
optional caption title:
optional body body:
width: auto
width { ftd.device == "mobile" }: fill-container

-- ftd.column holder:
optional caption title:
optional body body:
width: auto
width { ftd.device == "mobile" }: fill-container

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

-- ftd.column holder:
optional caption title:
optional body body:
width: auto
width { ftd.device == "mobile" }: fill-container

-- ftd.column holder:
optional caption title:
optional body body:
width: auto
width { ftd.device == "mobile" }: fill-container

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

-- ftd.column holder:
optional caption title:
optional body body:
width: auto
width { ftd.device == "mobile" }: fill-container

-- ftd.column holder:
optional caption title:
optional body body:
width: auto
width { ftd.device == "mobile" }: fill-container

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

holder and it’s Usage

holder

Output of above example:

Output of above example:

holder and it’s Usage

holder

Output of above example:

Output of above example:

`holder` and it’s Usage

`holder`

`holder` and it’s Usage

`holder`