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 type and is optional.

Sample code using id

Input

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

-- 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 type value and is optional.

Sample code using padding

Input

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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 type value and is optional.

Sample code using margin

Input

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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 type and is optional.

Sample code using color

Input

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

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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 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

-- 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 and is optional.

Sample code using overflow-x

Input