ftd kernel
components.id: optional string
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.id
-- ftd.text: FifthTry id: fifthtry color: $inherited.colors.text
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/#fifthtrypadding: optional ftd.length
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.padding
-- ftd.text: FifthTry padding.px: 60 color: $inherited.colors.text border-width.px: 2
padding-vertical: optional ftd.length
ftd.length
type and is optional.padding-vertical
-- ftd.text: FifthTry padding-vertical.px: 60 color: $inherited.colors.text border-width.px: 2
padding-horizontal: optional ftd.length
ftd.length
type and is optional.padding-horizontal
-- ftd.text: FifthTry padding-horizontal.px: 60 color: $inherited.colors.text border-width.px: 2
padding-left: optional ftd.length
ftd.length
type and is optional.padding-left
-- ftd.text: FifthTry padding-left.px: 60 color: $inherited.colors.text border-width.px: 2
padding-right: optional ftd.length
ftd.length
type and is optional.padding-right
-- ftd.text: FifthTry padding-right.px: 60 color: $inherited.colors.text border-width.px: 2
padding-top: optional ftd.length
ftd.length
type and is optional.padding-top
-- ftd.text: FifthTry padding-top.px: 60 color: $inherited.colors.text border-width.px: 2
padding-bottom: optional ftd.length
ftd.length
type and is optional.padding-bottom
-- ftd.text: FifthTry padding-bottom.px: 60 color: $inherited.colors.text border-width.px: 2
margin: optional ftd.length
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.margin
-- ftd.text: FifthTry margin.px: 60 color: $inherited.colors.text border-width.px: 2
margin-vertical: optional ftd.length
ftd.length
type and is optional.margin-vertical
-- ftd.text: FifthTry margin-vertical.px: 60 color: $inherited.colors.text border-width.px: 2
margin-horizontal: optional ftd.length
ftd.length
type and is optional.margin-horizontal
-- ftd.text: FifthTry margin-horizontal.px: 60 color: $inherited.colors.text border-width.px: 2
margin-left: optional ftd.length
ftd.length
type and is optional.margin-left
-- ftd.text: FifthTry margin-left.px: 60 color: $inherited.colors.text border-width.px: 2
margin-right: optional ftd.length
ftd.length
type and is optional.margin-right
-- ftd.text: FifthTry margin-right.px: 60 color: $inherited.colors.text border-width.px: 2
margin-top: optional ftd.length
ftd.length
type and is optional.margin-top
-- ftd.text: FifthTry margin-top.px: 60 color: $inherited.colors.text border-width.px: 2
margin-bottom: optional ftd.length
ftd.length
type and is optional.margin-bottom
-- ftd.text: FifthTry margin-bottom.px: 60 color: $inherited.colors.text border-width.px: 2
align-self: optional ftd.align-self
ftd.align-self
type and is optional.align-self
-- 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
color: optional ftd.color
ftd.color
type and is optional.color
-- ftd.color red-yellow: light: red dark: yellow -- ftd.text: FifthTry color: $red-yellow
width: optional ftd.resizing, default=auto
ftd.resizing
and is optional. Default value is set to auto
if not provided.width
-- 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
min-width: optional ftd.resizing
ftd.resizing
and is optional.min-width
-- 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
max-width: optional ftd.resizing
ftd.resizing
and is optional.max-width
-- 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
height: optional ftd.resizing, default=auto
ftd.resizing
and is optional. Default value is set to auto
if not provided.height
-- 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
min-height: optional ftd.resizing
ftd.resizing
and is optional.min-height
-- 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
max-height: optional ftd.resizing
ftd.resizing
and is optional.max-height
-- 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
background: optional ftd.background
ftd.background
which is an or-type.background.solid: ftd.color
ftd.color
type.-- ftd.color yellow-red: light: yellow dark: red -- ftd.text: FifthTry background.solid: $yellow-red color: $inherited.colors.text-strong
background.image: ftd.background-image
background.image
property sets the background image of an element. It takes input of ftd.background-image
type and is optional.-- 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
background.linear-gradient: ftd.linear-gradient
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.-- 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
border-width: optional ftd.length
ftd.length
and is optional.border-width
-- ftd.color red-yellow: light: red dark: yellow -- ftd.text: FifthTry border-width.px: 3 color: $inherited.colors.text border-color: $red-yellow
border-left-width: optional ftd.length
ftd.length
and is optional.border-left-width
-- ftd.color red-yellow: light: red dark: yellow -- ftd.text: FifthTry border-left-width.px: 3 color: $inherited.colors.text border-color: $red-yellow
border-right-width: optional ftd.length
ftd.length
and is optional.border-right-width
-- ftd.color red-yellow: light: red dark: yellow -- ftd.text: FifthTry border-right-width.px: 3 color: $inherited.colors.text border-color: $red-yellow
border-top-width: optional ftd.length
ftd.length
and is optional.border-top-width
-- ftd.color red-yellow: light: red dark: yellow -- ftd.text: FifthTry border-top-width.px: 3 color: $inherited.colors.text border-color: $red-yellow
border-bottom-width: optional ftd.length
ftd.length
and is optional.border-bottom-width
-- ftd.color red-yellow: light: red dark: yellow -- ftd.text: FifthTry border-bottom-width.px: 3 color: $inherited.colors.text border-color: $red-yellow
border-radius: optional ftd.length
ftd.length
and is optional.border-radius
-- 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
border-top-left-radius: optional ftd.length
ftd.length
and is optional.border-top-left-radius
-- 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
border-top-right-radius: optional ftd.length
ftd.length
and is optional.border-top-right-radius
-- 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
border-bottom-left-radius: optional ftd.length
ftd.length
and is optional.border-bottom-left-radius
-- 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
border-bottom-right-radius: optional ftd.length
ftd.length
and is optional.border-bottom-right-radius
-- 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
border-color: optional ftd.color
ftd.color
type.border-color
-- ftd.color red-yellow: light: red dark: yellow -- ftd.text: FifthTry border-width.px: 2 color: $inherited.colors.text border-color: $red-yellow
border-left-color: optional ftd.color
ftd.color
type.border-left-color
-- ftd.color red-yellow: light: red dark: yellow -- ftd.text: FifthTry border-width.px: 2 color: $inherited.colors.text border-left-color: $red-yellow
border-right-color: optional ftd.color
ftd.color
type.border-right-color
-- ftd.color red-yellow: light: red dark: yellow -- ftd.text: FifthTry border-width.px: 2 color: $inherited.colors.text border-right-color: $red-yellow
border-top-color: optional ftd.color
ftd.color
type.border-top-color
-- ftd.color red-yellow: light: red dark: yellow -- ftd.text: FifthTry border-width.px: 2 color: $inherited.colors.text border-top-color: $red-yellow
border-bottom-color: optional ftd.color
ftd.color
type.border-bottom-color
-- ftd.color red-yellow: light: red dark: yellow -- ftd.text: FifthTry border-width.px: 2 color: $inherited.colors.text border-bottom-color: $red-yellow
border-style: optional ftd.border-style, default=solid
ftd.border-style
value and is optional. By default, border-style
is set to solid
if this value is not provided.border-style
-- ftd.text: FifthTry border-style: dashed border-width.px: 2 border-color: $red-yellow color: $inherited.colors.text
border-style-left: optional ftd.border-style
ftd.border-style
value and is optional.border-style-left
-- ftd.text: FifthTry border-style-left: dashed border-width.px: 2 border-color: $red-yellow color: $inherited.colors.text
border-style-right: optional ftd.border-style
ftd.border-style
value and is optional.border-style-right
-- ftd.text: FifthTry border-style-right: dashed border-width.px: 2 border-color: $red-yellow color: $inherited.colors.text
border-style-top: optional ftd.border-style
ftd.border-style
value and is optional.border-style-top
-- ftd.text: FifthTry border-style-top: dashed border-width.px: 2 border-color: $red-yellow color: $inherited.colors.text
border-style-bottom: optional ftd.border-style
ftd.border-style
value and is optional.border-style-bottom
-- ftd.text: FifthTry border-style-bottom: dashed border-width.px: 2 border-color: $red-yellow color: $inherited.colors.text
border-style-horizontal: optional ftd.border-style
ftd.border-style
value and is optional.border-style-horizontal
-- ftd.text: FifthTry border-style-horizontal: dashed border-width.px: 2 border-color: $red-yellow color: $inherited.colors.text
border-style-vertical: optional ftd.border-style
ftd.border-style
value and is optional.border-style-vertical
-- ftd.text: FifthTry border-style-vertical: dashed border-width.px: 2 border-color: $red-yellow color: $inherited.colors.text
overflow: optional ftd.overflow
ftd.overflow
and is optional.overflow
-- 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
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-x: optional ftd.overflow
ftd.overflow
and is optional.overflow-x