Common Kernel Attributes

These attributes are available to all ftd kernel components.

id: optional string

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