The `id` attribute is used to specify a unique id for an element. It slugifies the value provided. The element can be directly accessed by appending a hash character (#) followed by an slugified id name in current module url. It takes input of [`string`](ftd/built-in-types/#string) type and is optional.

Sample code using `id`

Input

-- ftd.text: FifthTry
id: fifthtry
color: $inherited.colors.text

Lang:

ftd

Output

FifthTry

In the above example we have an `ftd.text` element that points to the id name `fifthtry`. This element can be accessed with `#fifthtry` appended after the current document url: http://fastn.com/ftd/common/#fifthtry

`padding: optional ftd.length`

The `padding` attribute is used to create space around an element's content, inside of any defined borders. It accepts the [`ftd.length`](ftd/built-in-types/#ftd-length) type value and is optional.

Sample code using `padding`

Input

-- ftd.text: FifthTry
padding.px: 60
color: $inherited.colors.text
border-width.px: 2

Lang:

ftd

Output

FifthTry

`padding-vertical: optional ftd.length`

This attribute gives top and bottom padding to an element. It takes input of [`ftd.length`](ftd/built-in-types/#ftd-length) type and is optional.

Sample code using `padding-vertical`

Input

-- ftd.text: FifthTry
padding-vertical.px: 60
color: $inherited.colors.text
border-width.px: 2

Lang:

ftd

Output

FifthTry

`padding-horizontal: optional ftd.length`

This attribute gives left and right padding to an element. It takes input of [`ftd.length`](ftd/built-in-types/#ftd-length) type and is optional.

Sample code using `padding-horizontal`

Input

-- ftd.text: FifthTry
padding-horizontal.px: 60
color: $inherited.colors.text
border-width.px: 2

Lang:

ftd

Output

FifthTry

`padding-left: optional ftd.length`

This attribute gives left padding to an element. It takes input of [`ftd.length`](ftd/built-in-types/#ftd-length) type and is optional.

Sample code using `padding-left`

Input

-- ftd.text: FifthTry
padding-left.px: 60
color: $inherited.colors.text
border-width.px: 2

Lang:

ftd

Output

FifthTry

`padding-right: optional ftd.length`

This attribute gives right padding to an element. It takes input of [`ftd.length`](ftd/built-in-types/#ftd-length) type and is optional.

Sample code using `padding-right`

Input

-- ftd.text: FifthTry
padding-right.px: 60
color: $inherited.colors.text
border-width.px: 2

Lang:

ftd

Output

FifthTry

`padding-top: optional ftd.length`

This attribute gives top padding to an element. It takes input of [`ftd.length`](ftd/built-in-types/#ftd-length) type and is optional.

Sample code using `padding-top`

Input

-- ftd.text: FifthTry
padding-top.px: 60
color: $inherited.colors.text
border-width.px: 2

Lang:

ftd

Output

FifthTry

`padding-bottom: optional ftd.length`

This attribute gives bottom padding to an element. It takes input of [`ftd.length`](ftd/built-in-types/#ftd-length) type and is optional.

Sample code using `padding-bottom`

Input

-- ftd.text: FifthTry
padding-bottom.px: 60
color: $inherited.colors.text
border-width.px: 2

Lang:

ftd

Output

FifthTry

`margin: optional ftd.length`

The `margin` attribute is used to create space around an element's content, outside of any defined borders. It accepts the [`ftd.length`](ftd/built-in-types/#ftd-length) type value and is optional.

Sample code using `margin`

Input

-- ftd.text: FifthTry
margin.px: 60
color: $inherited.colors.text
border-width.px: 2

Lang:

ftd

Output

FifthTry

`margin-vertical: optional ftd.length`

This attribute gives top and bottom margin to an element. It takes input of [`ftd.length`](ftd/built-in-types/#ftd-length) type and is optional.

Sample code using `margin-vertical`

Input

-- ftd.text: FifthTry
margin-vertical.px: 60
color: $inherited.colors.text
border-width.px: 2

Lang:

ftd

Output

FifthTry

`margin-horizontal: optional ftd.length`

This attribute gives left and right margin to an element. It takes input of [`ftd.length`](ftd/built-in-types/#ftd-length) type and is optional.

Sample code using `margin-horizontal`

Input

-- ftd.text: FifthTry
margin-horizontal.px: 60
color: $inherited.colors.text
border-width.px: 2

Lang:

ftd

Output

FifthTry

`margin-left: optional ftd.length`

This attribute gives left margin to an element. It takes input of [`ftd.length`](ftd/built-in-types/#ftd-length) type and is optional.

Sample code using `margin-left`

Input

-- ftd.text: FifthTry
margin-left.px: 60
color: $inherited.colors.text
border-width.px: 2

Lang:

ftd

Output

FifthTry

`margin-right: optional ftd.length`

This attribute gives right margin to an element. It takes input of [`ftd.length`](ftd/built-in-types/#ftd-length) type and is optional.

Sample code using `margin-right`

Input

-- ftd.text: FifthTry
margin-right.px: 60
color: $inherited.colors.text
border-width.px: 2

Lang:

ftd

Output

FifthTry

`margin-top: optional ftd.length`

This attribute gives top margin to an element. It takes input of [`ftd.length`](ftd/built-in-types/#ftd-length) type and is optional.

Sample code using `margin-top`

Input

-- ftd.text: FifthTry
margin-top.px: 60
color: $inherited.colors.text
border-width.px: 2

Lang:

ftd

Output

FifthTry

`margin-bottom: optional ftd.length`

This attribute gives bottom margin to an element. It takes input of [`ftd.length`](ftd/built-in-types/#ftd-length) type and is optional.

Sample code using `margin-bottom`

Input

-- ftd.text: FifthTry
margin-bottom.px: 60
color: $inherited.colors.text
border-width.px: 2

Lang:

ftd

Output

FifthTry

`align-self: optional ftd.align-self`

This property sets the alignment of the current element inside a container. It takes input of [`ftd.align-self`](ftd/built-in-types/#ftd-align-self) type and is optional.

Sample code using `align-self`

Input

-- ftd.color red-yellow:
light: red
dark: yellow

-- ftd.column:
width.fixed.px: 200

-- ftd.text: Start
color: $red-yellow
align-self: start

-- ftd.text: Center
color: $red-yellow
align-self: center

-- ftd.text: End
color: $red-yellow
align-self: end

-- end: ftd.column

Lang:

ftd

Output

Start

Center

End

`color: optional ftd.color`

The color property sets the color of an element. It takes input of [`ftd.color`](ftd/built-in-types/#ftd-color) type and is optional.

Sample code using `color`

Input

-- ftd.color red-yellow:
light: red
dark: yellow

-- ftd.text: FifthTry
color: $red-yellow

Lang:

ftd

Output

FifthTry

`width: optional ftd.resizing, default=auto`

This property sets the width of the element. It takes value of type type [`ftd.resizing`](ftd/built-in-types/#ftd-resizing) and is optional. Default value is set to `auto` if not provided.

Sample code using `width`

Input

-- ftd.color red-yellow:
light: red
dark: yellow

-- ftd.column:
width.fixed.px: 100
border-color: $red-yellow
border-width.px: 2

-- ftd.text: Width of this container is 100px
color: $inherited.colors.text
padding.px: 10

-- end: ftd.column

Lang:

ftd

Output

Width of this container is 100px

`min-width: optional ftd.resizing`

This property will set the minimum width of the element. It takes value of type [`ftd.resizing`](ftd/built-in-types/#ftd-resizing) and is optional.

Sample code using `min-width`

Input

-- ftd.color red-yellow:
light: red
dark: yellow

-- ftd.column:
min-width.fixed.px: 400
border-color: $red-yellow
border-width.px: 2

-- ftd.text: Min Width of this container is 400px
color: $inherited.colors.text
padding.px: 10

-- end: ftd.column

Lang:

ftd

Output

Min Width of this container is 400px

`max-width: optional ftd.resizing`

This property will set the maximum width of the element. It takes value of type [`ftd.resizing`](ftd/built-in-types/#ftd-resizing) and is optional.

Sample code using `max-width`

Input

-- ftd.color red-yellow:
light: red
dark: yellow

-- ftd.column:
max-width.fixed.px: 300
border-color: $red-yellow
border-width.px: 2

-- ftd.text:
color: $inherited.colors.text
padding.px: 10

Max Width of this container is 300px.
If you add more text than it can accommodate, then it will overflow.

-- end: ftd.column

Lang:

ftd

Output

Max Width of this container is 300px. If you add more text than it can accommodate, then it will overflow.

`height: optional ftd.resizing, default=auto`

This property sets the height of the element. It takes value of type type [`ftd.resizing`](ftd/built-in-types/#ftd-resizing) and is optional. Default value is set to `auto` if not provided.

Sample code using `height`

Input

-- ftd.color red-yellow:
light: red
dark: yellow

-- ftd.column:
height.fixed.px: 100
border-color: $red-yellow
border-width.px: 2

-- ftd.text: Height of this container is 100px
color: $inherited.colors.text
padding.px: 10

-- end: ftd.column

Lang:

ftd

Output

Height of this container is 100px

`min-height: optional ftd.resizing`

This property will set the minimum height of the element. It takes value of type [`ftd.resizing`](ftd/built-in-types/#ftd-resizing) and is optional.

Sample code using `min-height`

Input

-- ftd.color red-yellow:
light: red
dark: yellow

-- ftd.column:
min-height.fixed.px: 100
border-color: $red-yellow
border-width.px: 2
spacing.fixed.px: 10

-- ftd.text: Min Height of this container is 100px
color: $inherited.colors.text
padding.px: 10

-- ftd.text:
color: $inherited.colors.text
padding.px: 10

If more text are added inside this container, the text might overflow
if it can't be accommodated.

-- end: ftd.column

Lang:

ftd

Output

Min Height of this container is 100px

If more text are added inside this container, the text might overflow if it can't be accommodated.

`max-height: optional ftd.resizing`

This property will set the maximum height of the element. It takes value of type [`ftd.resizing`](ftd/built-in-types/#ftd-resizing) and is optional.

Sample code using `max-height`

Input

-- ftd.color red-yellow:
light: red
dark: yellow

-- ftd.column:
max-height.fixed.px: 50
max-width.fixed.px: 300
border-color: $red-yellow
border-width.px: 2

-- ftd.text:
color: $inherited.colors.text
padding.px: 10

Max Height of this container is 50px.
If you add more text than it can accommodate, then it will overflow.

-- end: ftd.column

Lang:

ftd

Output

Max Height of this container is 50px. If you add more text than it can accommodate, then it will overflow.

`background: optional ftd.background`

The background property can be used to set the background of an element. The background can be set to a solid color or an image. It takes value of type [`ftd.background`](ftd/built-in-types/#ftd-background) which is an or-type.

`background.solid: ftd.color`

The background.solid property sets the background color of an element. It takes input of [`ftd.color`](ftd/built-in-types/#ftd-color) type.

Specifying background as a solid color

Input

-- ftd.color yellow-red:
light: yellow
dark: red

-- ftd.text: FifthTry
background.solid: $yellow-red
color: $inherited.colors.text-strong

Lang:

ftd

Output

FifthTry

`background.image: ftd.background-image`

The `background.image` property sets the background image of an element. It takes input of [`ftd.background-image`](ftd/built-in-types/#ftd-background-image) type and is optional.

Specifying background as an image

Input

-- ftd.background-image bg-image:
src: $fastn-assets.files.images.logo-fifthtry.svg
repeat: no-repeat
position: center

-- ftd.row:
width: fill-container
height.fixed.px: 200
background.image: $bg-image

-- ftd.text: Fifthtry logo as background image

-- end: ftd.row

Lang:

ftd

Output

Fifthtry logo as background image

`background.linear-gradient: ftd.linear-gradient`

The `background.linear-gradient` property sets a linear gradient to the background of an element. It takes input of [`ftd.linear-gradient`](ftd/built-in-types/#ftd-linear-gradient) type and is optional.

Specifying linear gradient as background

Input

-- integer $gradient-counter: 0

-- ftd.linear-gradient lg:
direction: bottom-left
colors: $color-values

-- ftd.linear-gradient lg-2:
direction: top-right
colors: $color-values-2

-- ftd.linear-gradient lg-3:
direction: right
colors: $rainbow-values

-- ftd.linear-gradient-color list rainbow-values:

-- ftd.linear-gradient-color: violet
end.percent: 14.28

-- ftd.linear-gradient-color: indigo
start.percent: 14.28
end.percent: 28.57

-- ftd.linear-gradient-color: blue
start.percent: 28.57
end.percent: 42.85

-- ftd.linear-gradient-color: green
start.percent: 42.85
end.percent: 57.14

-- ftd.linear-gradient-color: yellow
start.percent: 57.14
end.percent: 71.42

-- ftd.linear-gradient-color: orange
start.percent: 71.42
end.percent: 85.71

-- ftd.linear-gradient-color: red
start.percent: 85.71

-- end: rainbow-values

-- ftd.linear-gradient-color list color-values:

-- ftd.linear-gradient-color: red
stop-position.percent: 20

-- ftd.linear-gradient-color: yellow

-- end: color-values

-- ftd.linear-gradient-color list color-values-2:

-- ftd.linear-gradient-color: blue
-- ftd.linear-gradient-color: green

-- end: color-values-2

-- ftd.row:
width: fill-container
height.fixed.px: 200
background.linear-gradient: $lg
background.linear-gradient if { gradient-counter % 3 == 1 }: $lg-2
background.linear-gradient if { gradient-counter % 3 == 2 }: $lg-3
$on-click$: $ftd.increment($a = $gradient-counter)
align-content: center

-- ftd.text: This is linear gradient (click to change)
color: $inherited.colors.text-strong

-- end: ftd.row

Lang:

ftd

Output

This is linear gradient (click to change)

`border-width: optional ftd.length`

This property sets the width of the border. It takes input of type [`ftd.length`](ftd/built-in-types/#ftd-length) and is optional.

Sample code using `border-width`

Input

-- ftd.color red-yellow:
light: red
dark: yellow

-- ftd.text: FifthTry
border-width.px: 3
color: $inherited.colors.text
border-color: $red-yellow

Lang:

ftd

Output

FifthTry

`border-left-width: optional ftd.length`

This property sets the width of the left border. It takes input of type [`ftd.length`](ftd/built-in-types/#ftd-length) and is optional.

Sample code using `border-left-width`

Input

-- ftd.color red-yellow:
light: red
dark: yellow

-- ftd.text: FifthTry
border-left-width.px: 3
color: $inherited.colors.text
border-color: $red-yellow

Lang:

ftd

Output

FifthTry

`border-right-width: optional ftd.length`

This property sets the width of the right border. It takes input of type [`ftd.length`](ftd/built-in-types/#ftd-length) and is optional.

Sample code using `border-right-width`

Input

-- ftd.color red-yellow:
light: red
dark: yellow

-- ftd.text: FifthTry
border-right-width.px: 3
color: $inherited.colors.text
border-color: $red-yellow

Lang:

ftd

Output

FifthTry

`border-top-width: optional ftd.length`

This property sets the width of the top border. It takes input of type [`ftd.length`](ftd/built-in-types/#ftd-length) and is optional.

Sample code using `border-top-width`

Input

-- ftd.color red-yellow:
light: red
dark: yellow

-- ftd.text: FifthTry
border-top-width.px: 3
color: $inherited.colors.text
border-color: $red-yellow

Lang:

ftd

Output

FifthTry

`border-bottom-width: optional ftd.length`

This property sets the width of the bottom border. It takes input of type [`ftd.length`](ftd/built-in-types/#ftd-length) and is optional.

Sample code using `border-bottom-width`

Input

-- ftd.color red-yellow:
light: red
dark: yellow

-- ftd.text: FifthTry
border-bottom-width.px: 3
color: $inherited.colors.text
border-color: $red-yellow

Lang:

ftd

Output

FifthTry

`border-radius: optional ftd.length`

This property rounds the corners of the border. It takes input of type [`ftd.length`](ftd/built-in-types/#ftd-length) and is optional.

Sample code using `border-radius`

Input

-- ftd.color red-yellow:
light: red
dark: yellow

-- ftd.text: FifthTry
border-width.px: 2
color: $inherited.colors.text
border-color: $red-yellow
border-radius.px: 5

Lang:

ftd

Output

FifthTry

`border-top-left-radius: optional ftd.length`

This property rounds the top left corner of the border. It takes input of type [`ftd.length`](ftd/built-in-types/#ftd-length) and is optional.

Sample code using `border-top-left-radius`

Input

-- ftd.color red-yellow:
light: red
dark: yellow

-- ftd.text: FifthTry
border-width.px: 3
color: $inherited.colors.text
border-color: $red-yellow
border-top-left-radius.px: 8

Lang:

ftd

Output

FifthTry

`border-top-right-radius: optional ftd.length`

This property rounds the top right corner of the border. It takes input of type [`ftd.length`](ftd/built-in-types/#ftd-length) and is optional.

Sample code using `border-top-right-radius`

Input

-- ftd.color red-yellow:
light: red
dark: yellow

-- ftd.text: FifthTry
border-width.px: 3
color: $inherited.colors.text
border-color: $red-yellow
border-top-right-radius.px: 8

Lang:

ftd

Output

FifthTry

`border-bottom-left-radius: optional ftd.length`

This property rounds the bottom left corner of the border. It takes input of type [`ftd.length`](ftd/built-in-types/#ftd-length) and is optional.

Sample code using `border-bottom-left-radius`

Input

-- ftd.color red-yellow:
light: red
dark: yellow

-- ftd.text: FifthTry
border-width.px: 3
color: $inherited.colors.text
border-color: $red-yellow
border-bottom-left-radius.px: 8

Lang:

ftd

Output

FifthTry

`border-bottom-right-radius: optional ftd.length`

This property rounds the bottom right corner of the border. It takes input of type [`ftd.length`](ftd/built-in-types/#ftd-length) and is optional.

Sample code using `border-bottom-right-radius`

Input

-- ftd.color red-yellow:
light: red
dark: yellow

-- ftd.text: FifthTry
border-width.px: 3
color: $inherited.colors.text
border-color: $red-yellow
border-bottom-right-radius.px: 8

Lang:

ftd

Output

FifthTry

`border-color: optional ftd.color`

The border-color property sets the color of an element's four borders. It takes input of [`ftd.color`](/built-in-types/#ftd-color) type.

Sample code using `border-color`

Input

-- ftd.color red-yellow:
light: red
dark: yellow

-- ftd.text: FifthTry
border-width.px: 2
color: $inherited.colors.text
border-color: $red-yellow

Lang:

ftd

Output

FifthTry

`border-left-color: optional ftd.color`

The border-left-color property sets the color of an element's left border. It takes input of [`ftd.color`](/built-in-types/#ftd-color) type.

Sample code using `border-left-color`

Input

-- ftd.color red-yellow:
light: red
dark: yellow

-- ftd.text: FifthTry
border-width.px: 2
color: $inherited.colors.text
border-left-color: $red-yellow

Lang:

ftd

Output

FifthTry

`border-right-color: optional ftd.color`

The border-right-color property sets the color of an element's right border. It takes input of [`ftd.color`](/built-in-types/#ftd-color) type.

Sample code using `border-right-color`

Input

-- ftd.color red-yellow:
light: red
dark: yellow

-- ftd.text: FifthTry
border-width.px: 2
color: $inherited.colors.text
border-right-color: $red-yellow

Lang:

ftd

Output

FifthTry

`border-top-color: optional ftd.color`

The border-top-color property sets the color of an element's top border. It takes input of [`ftd.color`](/built-in-types/#ftd-color) type.

Sample code using `border-top-color`

Input

-- ftd.color red-yellow:
light: red
dark: yellow

-- ftd.text: FifthTry
border-width.px: 2
color: $inherited.colors.text
border-top-color: $red-yellow

Lang:

ftd

Output

FifthTry

`border-bottom-color: optional ftd.color`

The border-bottom-color property sets the color of an element's bottom border. It takes input of [`ftd.color`](/built-in-types/#ftd-color) type.

Sample code using `border-bottom-color`

Input

-- ftd.color red-yellow:
light: red
dark: yellow

-- ftd.text: FifthTry
border-width.px: 2
color: $inherited.colors.text
border-bottom-color: $red-yellow

Lang:

ftd

Output

FifthTry

`border-style: optional ftd.border-style, default=solid`

The border-style property sets the style of an element's borders. It takes a [`ftd.border-style`](ftd/built-in-types/#ftd-border-style) value and is optional. By default, `border-style` is set to `solid` if this value is not provided.

Sample code using `border-style`

Input

-- ftd.text: FifthTry
border-style: dashed
border-width.px: 2
border-color: $red-yellow
color: $inherited.colors.text

Lang:

ftd

Output

FifthTry

`border-style-left: optional ftd.border-style`

The border-style property sets the style of an element's left border. It takes a [`ftd.border-style`](ftd/built-in-types/#ftd-border-style) value and is optional.

Sample code using `border-style-left`

Input

-- ftd.text: FifthTry
border-style-left: dashed
border-width.px: 2
border-color: $red-yellow
color: $inherited.colors.text

Lang:

ftd

Output

FifthTry

`border-style-right: optional ftd.border-style`

The border-style property sets the style of an element's right border. It takes a [`ftd.border-style`](ftd/built-in-types/#ftd-border-style) value and is optional.

Sample code using `border-style-right`

Input

-- ftd.text: FifthTry
border-style-right: dashed
border-width.px: 2
border-color: $red-yellow
color: $inherited.colors.text

Lang:

ftd

Output

FifthTry

`border-style-top: optional ftd.border-style`

The border-style property sets the style of an element's top border. It takes a [`ftd.border-style`](ftd/built-in-types/#ftd-border-style) value and is optional.

Sample code using `border-style-top`

Input

-- ftd.text: FifthTry
border-style-top: dashed
border-width.px: 2
border-color: $red-yellow
color: $inherited.colors.text

Lang:

ftd

Output

FifthTry

`border-style-bottom: optional ftd.border-style`

The border-style property sets the style of an element's bottom border. It takes a [`ftd.border-style`](ftd/built-in-types/#ftd-border-style) value and is optional.

Sample code using `border-style-bottom`

Input

-- ftd.text: FifthTry
border-style-bottom: dashed
border-width.px: 2
border-color: $red-yellow
color: $inherited.colors.text

Lang:

ftd

Output

FifthTry

`border-style-horizontal: optional ftd.border-style`

The border-style property sets the style of an element's left and right borders. It takes a [`ftd.border-style`](ftd/built-in-types/#ftd-border-style) value and is optional.

Sample code using `border-style-horizontal`

Input

-- ftd.text: FifthTry
border-style-horizontal: dashed
border-width.px: 2
border-color: $red-yellow
color: $inherited.colors.text

Lang:

ftd

Output

FifthTry

`border-style-vertical: optional ftd.border-style`

The border-style property sets the style of an element's top and bottom borders. It takes a [`ftd.border-style`](ftd/built-in-types/#ftd-border-style) value and is optional.

Sample code using `border-style-vertical`

Input

-- ftd.text: FifthTry
border-style-vertical: dashed
border-width.px: 2
border-color: $red-yellow
color: $inherited.colors.text

Lang:

ftd

Output

FifthTry

`overflow: optional ftd.overflow`

The overflow property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows through any edge. It takes value of type [`ftd.overflow`](ftd/built-in-types/#ftd-overflow) and is optional.

Sample code using `overflow`

Input

-- ftd.row:
width: fill-container
spacing: space-evenly
color: $inherited.colors.text

-- ftd.text:
width.fixed.px: 150
height.fixed.px: 100
overflow: visible
border-color: $red-yellow
border-width.px: 2

overflow = Visible

The quick, brown fox jumps over a lazy dog.
DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.

-- ftd.text:
width.fixed.px: 150
height.fixed.px: 100
overflow: scroll
border-color: $red-yellow
border-width.px: 2

overflow = Scroll

The quick, brown fox jumps over a lazy dog.
DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.

-- ftd.text:
width.fixed.px: 150
height.fixed.px: 100
overflow: auto
border-color: $red-yellow
border-width.px: 2

overflow = Auto

The quick, brown fox jumps over a lazy dog.
DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.

-- ftd.text:
width.fixed.px: 150
height.fixed.px: 100
overflow: hidden
border-color: $red-yellow
border-width.px: 2

overflow = Hidden

The quick, brown fox jumps over a lazy dog.
DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.

-- end: ftd.row

Lang:

ftd

Output

overflow = Visible Thequickbrownfoxjumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.

overflow = Scroll Thequickbrownfoxjumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.

overflow = Auto Thequickbrownfoxjumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.

overflow = Hidden Thequickbrownfoxjumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.

`overflow-x: optional ftd.overflow`

The overflow-x property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows through left and right edges. It takes value of type [`ftd.overflow`](ftd/built-in-types/#ftd-overflow) and is optional.

Sample code using `overflow-x`

Input

-- ftd.row:
width: fill-container
spacing: space-evenly

-- ftd.text:
width.fixed.px: 150
height.fixed.px: 100
overflow-x: visible
border-color: $red-yellow
border-width.px: 2

overflow-x = Visible

The quick, brown fox jumps over a lazy dog.
DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.

-- ftd.text:
width.fixed.px: 120
height.fixed.px: 100
overflow-x: scroll
border-color: $red-yellow
border-width.px: 2

overflow-x = Scroll

The quick, brown fox jumps over a lazy dog.
DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.

-- ftd.text:
width.fixed.px: 150
height.fixed.px: 100
overflow-x: auto
border-color: $red-yellow
border-width.px: 2

overflow-x = Auto

The quick, brown fox jumps over a lazy dog.
DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.

-- ftd.text:
color: $inherited.colors.text
width.fixed.px: 150
height.fixed.px: 100
overflow-x: hidden
border-color: $red-yellow
border-width.px: 2

overflow-x = Hidden

The quick, brown fox jumps over a lazy dog.
DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.

-- end: ftd.row

Lang:

ftd

Output

overflow-x = Visible The value of Pi is 3.1415926535897932384626433832795029. The value of e is 2.7182818284590452353602874713526625.

overflow-x = Scroll The value of Pi is 3.1415926535897932384626433832795029. The value of e is 2.7182818284590452353602874713526625.

overflow-x = Auto The value of Pi is 3.1415926535897932384626433832795029. The value of e is 2.7182818284590452353602874713526625.

overflow-x = Hidden The value of Pi is 3.1415926535897932384626433832795029. The value of e is 2.7182818284590452353602874713526625.

`overflow-y: optional ftd.overflow`

The overflow-y property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows through top and bottom edges. It takes value of type [`ftd.overflow`](ftd/built-in-types/#ftd-overflow) and is optional.

Sample code using `overflow-y`

Input

-- ftd.row:
width: fill-container
spacing: space-evenly
color: $inherited.colors.text

-- ftd.text:
width.fixed.px: 150
height.fixed.px: 100
overflow-y: visible
border-color: $red-yellow
border-width.px: 2

overflow-y = Visible

The quick, brown fox jumps over a lazy dog.
DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.

-- ftd.text:
width.fixed.px: 150
height.fixed.px: 100
overflow-y: scroll
border-color: $red-yellow
border-width.px: 2

overflow-y = Scroll

The quick, brown fox jumps over a lazy dog.
DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.

-- ftd.text:
width.fixed.px: 150
height.fixed.px: 100
overflow-y: auto
border-color: $red-yellow
border-width.px: 2

overflow-y = Auto

The quick, brown fox jumps over a lazy dog.
DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.

-- ftd.text:
width.fixed.px: 150
height.fixed.px: 100
overflow-y: hidden
border-color: $red-yellow
border-width.px: 2

overflow-y = Hidden

The quick, brown fox jumps over a lazy dog.
DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.

-- end: ftd.row

Lang:

ftd

Output

overflow-y = Visible The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.

overflow-y = Scroll The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.

overflow-y = Auto The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.

overflow-y = Hidden The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.

`cursor: optional ftd.cursor`

This cursor property will set the cursor type when mouse is hovered over the element. It takes value of type [`ftd.cursor`](ftd/built-in-types/#ftd-cursor) and is optional.

Sample code using `cursor`

Input

-- ftd.column:
width: fill-container
padding.px: 10
spacing.fixed.px: 10

-- ftd.text: This text will show pointer cursor on hover
color: $inherited.colors.text
padding.px: 10
cursor: pointer
border-width.px: 2
border-color: $red-yellow

-- ftd.text: This text will show progress cursor on hover
color: $inherited.colors.text
padding.px: 10
cursor: progress
border-width.px: 2
border-color: $red-yellow


-- ftd.text: This text will show zoom-in cursor on hover
color: $inherited.colors.text
padding.px: 10
cursor: zoom-in
border-width.px: 2
border-color: $red-yellow

-- ftd.text: This text will show help cursor on hover
color: $inherited.colors.text
padding.px: 10
cursor: help
border-width.px: 2
border-color: $red-yellow

-- ftd.text: This text will show cross-hair cursor on hover
color: $inherited.colors.text
padding.px: 10
cursor: crosshair
border-width.px: 2
border-color: $red-yellow

-- end: ftd.column

Lang:

ftd

Output

This text will show pointer cursor on hover

This text will show progress cursor on hover

This text will show zoom-in cursor on hover

This text will show help cursor on hover

This text will show cross-hair cursor on hover

`region: optional ftd.region`

This region property will set the [`ARIA Region`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles) role that the UI element will be playing. It takes value of type [`ftd.region`](ftd/built-in-types/#ftd-region) and is optional.

Sample code using `region`

Input

-- ftd.text: Hello World
region: h1
color: $inherited.colors.text

Lang:

ftd

Output

Hello World

`link: optional String`

This converts the element to a hyper link.

Sample code using `link`

Input

-- ftd.text: fifthtry
link: https://www.fifthtry.com
color: $inherited.colors.text

Lang:

ftd

Output

fifthtry

`open-in-new-tab: optional boolean, default=False`

If `link` is provided, this attribute can also be set to open the link in new tab instead of current tab. By default, this attribute is set to `false`.

Sample code using `open-in-new-tab` along with `link`

Input

-- ftd.text: fifthtry (opens in new tab)
link: https://www.fifthtry.com
open-in-new-tab: true
color: $inherited.colors.text

Lang:

ftd

Output

fifthtry (opens in new tab)

`role: optional ftd.responsive-type`

This property is used to define several text different properties such as font-size, font-weight, letter-spacing, font-family and line-height. It takes value of type [`ftd.responsive-type`](ftd/built-in-types/#ftd-responsive-type) and is optional.

Sample code using `role`

Input

-- ftd.column:
color: $inherited.colors.text
width: fill-container
spacing.fixed.px: 10

-- ftd.text: Heading Hero
role: $inherited.types.heading-hero

-- ftd.text: Heading Large
role: $inherited.types.heading-large

-- ftd.text: Copy Regular
role: $inherited.types.copy-regular

-- end: ftd.column

Lang:

ftd

Output

Heading Hero

Heading Large

Copy Regular

`resize: optional ftd.resize`

This property sets whether the element is resizable in any direction or not. It takes value of type [`ftd.resize`](ftd/built-in-types/#ftd-resize) and is optional

Sample code using `resize`

Input

-- ftd.row:
resize: both
border-color: $red-yellow
border-width.px: 1
margin.px: 10

-- ftd.text: This row is resizable both directions
color: $inherited.colors.text

-- end: ftd.row

-- ftd.row:
resize: horizontal
border-color: $red-yellow
border-width.px: 1
margin.px: 10

-- ftd.text: This row is resizable only horizontally
color: $inherited.colors.text

-- end: ftd.row

-- ftd.row:
resize: vertical
border-color: $red-yellow
border-width.px: 1
margin.px: 10

-- ftd.text: This row is resizable only vertically
color: $inherited.colors.text

-- end: ftd.row

Lang:

ftd

Output

This row is resizable both directions

This row is resizable only horizontally

This row is resizable only vertically

`sticky: optional boolean`

This property lets you make an element stick to a specific position on the page when it is scrolled. It takes value of type boolean and is optional.

Sample code using `sticky`

Input

-- ftd.column:
padding.px: 10
color: $inherited.colors.text
spacing.fixed.px: 50
height.fixed.px: 200
width.fixed.px: 300
overflow-y: scroll
border-color: $red-yellow
border-width.px: 2

-- ftd.text: The blue planet below is sticky

-- ftd.text: Blue planet
color: black
background.solid: deepskyblue
sticky: true
width.fixed.px: 120
text-align: center
left.px: 50
top.px: 0

-- ftd.text:
padding.px: 10

Far out in the uncharted backwaters of the unfashionable end of the western
spiral arm of the Galaxy lies a small unregarded blue planet.
Orbiting this at a distance of roughly ninety-two million miles is an
utterly insignificant little planet whose ape-descended life
forms are so amazingly primitive that they still think `fastn` code written
by humans are still a pretty neat idea of escalating knowledge throughout the
universe.

-- end: ftd.column

Lang:

ftd

Output

The blue planet below is sticky

Blue planet

Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded blue planet. Orbiting this at a distance of roughly ninety-two million miles is an utterly insignificant little planet whose ape-descended life forms are so amazingly primitive that they still think `fastn` code written by humans are still a pretty neat idea of escalating knowledge throughout the universe.

`shadow: optional ftd.shadow`

This property will let you create a box shadow. It takes [`ftd.shadow`](ftd/built-in-types/#ftd-shadow) value which is of record type and is optional.

Sample code using `shadow`

Input

-- ftd.color yellow-red:
light: yellow
dark: red

-- ftd.shadow s:
color: $yellow-red
x-offset.px: 10
y-offset.px: 10
blur.px: 1

-- ftd.text: FifthTry
shadow: $s
margin.px: 10

Lang:

ftd

Output

FifthTry

`anchor: optional ftd.anchor`

This property is used to specify the positioning of the element with respect to its ancestor, window or other element referred by id. It takes value of type [`ftd.anchor`](ftd/built-in-types/#ftd-anchor) and is optional.

Sample code using `anchor`

Input

-- ftd.column:
margin.px: 10
padding.px: 20
border-color: $red-yellow
border-width.px: 2
width.fixed.px: 600

-- ftd.column:
id: c1
padding.px: 20
border-color: green
border-width.px: 2
width.fixed.px: 400

-- ftd.text: Inside Inner Container
color: $inherited.colors.text-strong
anchor.id: c1
top.px: 0
left.px: 0

-- end: ftd.column

-- end: ftd.column

-- ftd.column:
id: c2
margin.px: 10
padding.px: 20
border-color: $red-yellow
border-width.px: 2
width.fixed.px: 600

-- ftd.column:
padding.px: 20
border-color: blue
border-width.px: 2
width.fixed.px: 400

-- ftd.text: Inside Outer Container
color: $inherited.colors.text-strong
anchor.id: c2
top.px: 0
left.px: 0

-- end: ftd.column

-- end: ftd.column

Lang:

ftd

Output

Inside Inner Container

Inside Outer Container

`opacity: optional decimal`

This property defines the opacity of the element. The level of opacity corresponds to the level of transparency, with a value of 1 indicating no transparency, 0.5 indicating 50% transparency, and 0 indicating complete transparency.

Sample code using `opacity`

Input

-- integer $counter: 0

-- string sample-text:

Far far away, behind the word mountains, far from the countries
Vokalia and Consonantia, there live the blind texts. Separated they
in Bookmarksgrove right at the coast of the Semantics, a large language
ocean. A small river named Duden flows by their place and supplies it
with the necessary regelialia. It is a paradisematic country, in which
roasted parts of sentences fly into your mouth. Even the all-powerful
Pointing has no control about the blind texts it is an almost unorthographic
life One day however a small line of blind text by the name of Lorem
Ipsum decided to leave for the far World of Grammar.

-- ftd.column:
width: fill-container
background.solid: #963770
opacity: 1.0
opacity if { counter % 4 == 1 }: 0.7
opacity if { counter % 4 == 2 }: 0.5
opacity if { counter % 4 == 3 }: 0.2

-- ftd.text: $sample-text
color: white
padding.px: 10

-- end: ftd.column

-- ftd.text: Change opacity
color: $inherited.colors.text
$on-click$: $ftd.increment($a = $counter)
margin-vertical.px: 10
border-width.px: 1
align-self: center
text-align: center

Lang:

ftd

Output

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.

Change opacity

`whitespace: optional ftd.whitespace`

This property sets how white-space is handled inside an element. It takes value of type [`ftd.white-space`](ftd/built-in-types/#ftd-white-space) and is optional.

Sample code using `whitespace`

Input

-- string sample-text:

But ere she from the church-door stepped She smiled and told us why:

'It was a wicked woman's curse,' Quoth she, 'and what care I?'
She smiled, and smiled, and passed it off Ere from the door she stept—

-- end: sample-text

-- ftd.column:
spacing.fixed.px: 10
color: $inherited.colors.text

-- ftd.text: $sample-text
white-space: normal
padding.px: 10
width.fixed.px: 400
border-color: $red-yellow
border-width.px: 2

-- ftd.text: $sample-text
white-space: nowrap
padding.px: 10
width.fixed.px: 400
border-color: $red-yellow
border-width.px: 2

-- ftd.text: $sample-text
white-space: pre
padding.px: 10
width.fixed.px: 400
border-color: $red-yellow
border-width.px: 2

-- ftd.text: $sample-text
white-space: break-spaces
padding.px: 10
width.fixed.px: 400
border-color: $red-yellow
border-width.px: 2

-- end: ftd.column

Lang:

ftd

Output

But ere she from the church-door stepped She smiled and told us why: 'It was a wicked woman's curse,' Quoth she, 'and what care I?' She smiled, and smiled, and passed it off Ere from the door she stept—

`text-transform: optional ftd.text-transform`

This text-transform property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. This takes value of type [`ftd.text-transform`](ftd/built-in-types/#ftd-text-transform) and is optional.

Input

-- string sample-text:

But ere she from the church-door stepped She smiled and told us why:

'It was a wicked woman's curse,' Quoth she, 'and what care I?'
She smiled, and smiled, and passed it off Ere from the door she stept—

-- end: sample-text

-- ftd.column:
spacing.fixed.px: 10
color: $inherited.colors.text

-- ftd.text: $sample-text
padding.px: 10
width.fixed.px: 400
text-transform: none
border-color: $red-yellow
border-width.px: 2

-- ftd.text: $sample-text
padding.px: 10
width.fixed.px: 400
text-transform: capitalize
border-color: $red-yellow
border-width.px: 2

-- ftd.text: $sample-text
padding.px: 10
width.fixed.px: 400
text-transform: uppercase
border-color: $red-yellow
border-width.px: 2

-- ftd.text: $sample-text
padding.px: 10
width.fixed.px: 400
text-transform: lowercase
border-color: $red-yellow
border-width.px: 2

-- end: ftd.column

Lang:

ftd

Output

`classes: string list`

This property is used to specify a class to an element. It takes value as a list of strings.

Sample code using `classes`

Input

-- ftd.text:
color: $inherited.colors.text
classes: markdown, text

# This text has class `markdown` and `text`

Lang:

ftd

Output

# This text has classes `markdown` and `text`

`top: optional ftd.length`

This property affects the vertical positioning of the element from the top edge of the nearest container. It takes value of type [`ftd.length`](ftd/built-in-types/#ftd-length) and is optional.

Sample code using `top`

Input

-- ftd.column:
width.fixed.px: 400
height.fixed.px: 100
border-color: $red-yellow
border-width.px: 2

-- ftd.text: Move down from top edge by 20px
top.px: 20
anchor: parent
padding-horizontal.px: 10
color: $inherited.colors.text

-- end: ftd.column

Lang:

ftd

Output

Move down from top edge by 20px

`bottom: optional ftd.length`

This property affects the vertical positioning of the element from the bottom edge of the nearest container. It takes value of type [`ftd.length`](ftd/built-in-types/#ftd-length) and is optional.

Sample code using `bottom`

Input

-- ftd.column:
width.fixed.px: 400
height.fixed.px: 100
border-color: $red-yellow
border-width.px: 2

-- ftd.text: Move up from bottom edge by 20px
bottom.px: 20
anchor: parent
padding-horizontal.px: 10
color: $inherited.colors.text

-- end: ftd.column

Lang:

ftd

Output

Move up from bottom edge by 20px

`left: optional ftd.length`

This property affects the horizontal positioning of the element from the left edge of the nearest container. It takes value of type [`ftd.length`](ftd/built-in-types/#ftd-length) and is optional.

Sample code using `left`

Input

-- ftd.column:
width.fixed.px: 400
height.fixed.px: 50
border-color: $red-yellow
border-width.px: 2

-- ftd.text: Move right from left edge by 50px
left.px: 50
anchor: parent
padding-vertical.px: 10
color: $inherited.colors.text

-- end: ftd.column

Lang:

ftd

Output

Move right from left edge by 50px

`right: optional ftd.length`

This property affects the horizontal positioning of the element from the right edge of the nearest container. It takes value of type [`ftd.length`](ftd/built-in-types/#ftd-length) and is optional.

Sample code using `right`

Input

-- ftd.column:
width.fixed.px: 400
height.fixed.px: 50
border-color: $red-yellow
border-width.px: 2

-- ftd.text: Move left from right edge by 50px
right.px: 50
anchor: parent
padding-vertical.px: 10
color: $inherited.colors.text

-- end: ftd.column

Lang:

ftd

Output

Move left from right edge by 50px

`css: string list`

This property will let you specify any external css files which you might want to use with your `fastn` components. This takes value as a list of strings which will be the names of all css files you want to include in your `fastn` document.

Sample code using `css`

;; Assuming you have defined some css for
;; elements having class `custom-text`, `custom-shadow`
;; inside `text.css` and `shadow.css` respectively

-- ftd.text:
css: text.css, shadow.css
classes: custom-text, custom-shadow

Lang:

ftd

`js: string list`

This property lets you include any external javascript files which you might want to use inside your `fastn` document. This takes value as a list of string which will be the names of all js files which needs to be included.

Sample code using `js`

;; Assuming you have js files named `str.js`, `math.js`
;; which contains functions `len(s)`, double(i)
;; len(s) = which returns the length of the string
;; double(i) = which doubles the value

-- string s1: Hello

-- integer foo(s):
string s:
js: str.js, math.js

double(len(s))

-- ftd.integer: $foo(s = $s1)

Lang:

ftd

`z-index: optional integer`

This property lets you control the stacking order of positioned elements. It specifies the order in which elements are stacked on top of each other when they overlap. Elements with a higher z-index value appear on top of elements with a lower z-index value. It takes value of type [`integer`](ftd/built-in-types/#integer) and is optional.

Sample code using `z-index`

Input

-- ftd.color red-blue:
light: red
dark: blue

-- ftd.row:
width: fill-container
height.fixed.px: 180
color: black

-- ftd.text: z-index = 3
left.px: 50
top.px: 20
padding.px: 20
width.fixed.px: 200
text-align: center
border-color: $red-blue
border-width.px: 2
background.solid: deepskyblue
z-index: 3
anchor: parent

-- ftd.text: z-index = 2
left.px: 70
top.px: 60
padding.px: 20
text-align: center
width.fixed.px: 200
border-color: $red-blue
border-width.px: 2
background.solid: deepskyblue
z-index: 2
anchor: parent

-- ftd.text: z-index = 1
left.px: 90
top.px: 100
padding.px: 20
text-align: center
width.fixed.px: 200
border-color: $red-blue
border-width.px: 2
background.solid: deepskyblue
z-index: 1
anchor: parent

-- end: ftd.row

Lang:

ftd

Output

z-index = 3

z-index = 2

z-index = 1

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.

Quick links:

- [Install `fastn`](install/) - [Create `fastn` package](create-fastn-package/) - [Expander Crash Course](expander/) - [Syntax Highlighting in Sublime Text](/sublime/)

Join us

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.