Learn full-stack web development using fastn in a week

Frontend

Built-in Types

fastn comes with some built-in types. These can be used to define properties of components or fields of record and or-type. These types can be categorized into two main groups: Primitive and Derived.

Primitive: The primitive types are the building blocks for creating more complex types. e.g. string, boolean, integer etc
Derived: The derived types can be constructed using primitive types or other derived types. e.g. ftd.color, ftd.image-src etc.

Primitive Types

Primitive types are basic building blocks that can be used to construct more complex types like record and or-type. These types include:

`boolean`

This type is used to represent boolean values true and false.

-- boolean is-monday: true

Lang:

ftd

`integer`

This is integer type, can be positive or negative.

-- integer number-of-days-in-a-week: 7

Lang:

ftd

`decimal`

This type is used to represent decimal numbers.

-- decimal pi: 3.14159

Lang:

ftd

`string`

This is unicode string.

-- string message: hello world!

Lang:

ftd

a multi-line string

-- string message:

this is a multiline string.

can have any number of lines.

or long paragraph, if you have a long paragraph to write. it can
contain unicode characters in any भाषा, or emojis, 💁👌🎍😍.

Lang:

ftd

`caption`

caption is a special type, it is an alias for string, but can not be used when declaring a variable.

This type is used for record, or-type. and component arguments.

If a record or or-type field, or component argument is defined as caption, it can be passed in the "caption" location in ftd::p1 "section".

record with caption

-- record person:
caption name:

-- person amitu: Amit Upadhyay

-- person shobhit:
name: Shobhit Sharma

Lang:

ftd

If something is specified as caption, it can come in the "caption" location, eg in case of amitu var, or it can come as an explicit key, as in the declaration of shobhit variable.

ℹ️

Passing other types in caption area

By default caption is alias for string but if you want to pass types other than string you can do the following:

record with caption as integer

-- record marks:
caption integer number:

Lang:

ftd

`body`

body is a special type, it is an alias for string, but can not be used when declaring a variable.

This type is used for record, or-type and component arguments.

If a record or or-type field, or component argument is defined as body, it can be passed in the "body" location in ftd::p1 "section".

record with body

-- record person:
name: caption
bio: body

-- person amitu: Amit Upadhyay

this is single

or multi-line bio of Amit.

-- person shobhit:
name: Shobhit Sharma
bio: or we can put things in "header"

Lang:

ftd

If something is specified as body, it can come in the "body" location, eg in case of amitu var, or it can come as an explicit key, as in the declaration of shobhit variable.

ℹ️

Passing other types in body area

By default body is alias for string but if you want to pass types other than string you can do the following:

record with body as integer

-- record marks:
body integer number:

Lang:

ftd

`caption or body`

caption or body is a special type, it is an alias for string, but can not be used when declaring a variable.

This type is used for record, or-type and component arguments.

If a record or or-type field, or component argument is defined as caption or body, it can be passed in either the "caption" or "body" location in ftd::p1 "section".

record with caption or body

-- record person:
caption or body name:

-- person amitu: Amit Upadhyay

-- person shobhit:
name: Shobhit Sharma

-- person abrar:

Abrar Khan

Lang:

ftd

If something is specified as caption or body, it can come in the "caption" location, eg in case of amitu var, or it can come as an explicit key, as in the declaration of shobhit variable, or in "body" location, eg for abrar.

ℹ️

Passing other types in caption or body area

By default caption or body is alias for string but if you want to pass types other than string you can do the following:

record with body as integer

-- record marks:
caption or body integer number:

Lang:

ftd

`ftd.ui`

ftd.ui is a data type in the fastn language that represents a user interface component.

-- ftd.ui list uis:
-- ftd.text: Hello
-- end: uis

-- uis.0:

Lang:

ftd

In this example, we create a list of UI components called uis, which contains a single component of type ftd.text with text property value as Hello.

-- uis.0: will display the first item in the uis list,

Output

Hello

`ftd.color-scheme`

ftd.color-scheme can be passed to ftd.document, ftd.row or ftd.column components, and is inherited by children. Anywhere you can use $inherited.colors variable of type ftd.color-scheme to access colors.

Checkout using color-schemes to learn more about how to use colors properly.

ftd.color-scheme

-- record color-scheme:
ftd.background-colors background:
ftd.color border:
ftd.color border-strong:
ftd.color text:
ftd.color text-strong:
ftd.color shadow:
ftd.color scrim:
ftd.cta-colors cta-primary:
ftd.cta-colors cta-secondary:
ftd.cta-colors cta-tertiary:
ftd.cta-colors cta-danger:
ftd.pst accent:
ftd.btb error:
ftd.btb success:
ftd.btb info:
ftd.btb warning:
ftd.custom-colors custom:

Lang:

ftd

ftd.background-colors

-- record background-colors:
ftd.color base:
ftd.color step-1:
ftd.color step-2:
ftd.color overlay:
ftd.color code:

Lang:

ftd

ftd.cta-colors

-- record cta-colors:
ftd.color base:
ftd.color hover:
ftd.color pressed:
ftd.color disabled:
ftd.color focused:
ftd.color border:
ftd.color text:

Lang:

ftd

ftd.pst

-- record pst:
ftd.color primary:
ftd.color secondary:
ftd.color tertiary:

Lang:

ftd

ftd.btb

-- record btb:
ftd.color base:
ftd.color text:
ftd.color border:

Lang:

ftd

ftd.custom

-- record custom:
ftd.color one:
ftd.color two:
ftd.color three:
ftd.color four:
ftd.color five:
ftd.color six:
ftd.color seven:
ftd.color eight:
ftd.color nine:
ftd.color ten:

Lang:

ftd

`children`

children is a special type, it is an alias for ftd.ui list, but can not be used when declaring a variable.

This type is used for record, or-type and component arguments.

If a record or or-type field, or component argument is defined as children, it can be passed in "subsection" location in ftd::p1 "section".

;; First `foo` invocation
-- foo:
-- ftd.text: I love `ftd`!
-- end: foo


;; Second `foo` invocation
-- foo:

-- foo.foo-uis:
-- ftd.text: I love `ftd`!
-- end: foo.foo-uis

-- end: foo

;; Third `foo` invocation
-- foo:
foo-uis: $uis


;; `foo` declaration
-- component foo:
children foo-uis:

-- ftd.column:
background.solid: yellow
children: $foo.foo-uis

-- end: ftd.column

-- end: foo

Lang:

ftd

If argument is specified as children, it can come in the “subsection” location, eg in case of first foo component invocation, or it can come as an explicit key, as in the second and third foo component invocation.

Derived Types

Derived types are more complex and are built using primitive types or other derived types. Derived types comes in two types: record and or-type.

`ftd.linear-gradient`

ftd.linear-gradient is a record. It accepts two values as fields: direction of type ftd.linear-gradient-directions and colors as list of string type.

ftd.linear-gradient

-- record linear-gradient:
ftd.linear-gradient-directions direction: bottom
ftd.linear-gradient-color list colors:

Lang:

ftd

direction: This field defines the direction of gradient line. It takes value of type ftd.linear-gradient-directions and is optional. By default, it takes bottom.
colors: This field takes a list of ftd.linear-gradient-color which defines the colors used in the gradient.

`ftd.breakpoint-width-data`

ftd.breakpoint-width-data is a record. It accepts one value as caption which is mobile breakpoint width.

ftd.breakpoint-width-data

-- record breakpoint-width-data:
caption integer mobile:

Lang:

ftd

mobile: This field defines the mobile breakpoint width under which the device would be considered mobile otherwise desktop.

`ftd.linear-gradient-color`

ftd.linear-gradient-color is a record. It accepts several values as fields as mentioned below.

ftd.linear-gradient-color

-- record linear-gradient-color:
caption ftd.color color:
optional ftd.length start:
optional ftd.length end:
optional ftd.length stop-position:

Lang:

ftd

color: This field takes the color value of type ftd.color and is of caption type.
start: This field defines start position of the color and takes value of type ftd.length and is optional.
end: This field defines the color end position and takes value of type ftd.length and is optional.
stop-position: This field defines the color stop position from where the gradient mid occurs and takes value of type ftd.length and is optional.

`ftd.linear-gradient-directions`

ftd.linear-gradient-directions is an or-type. It can be angle, turn or any directional constant as shown below.

ftd.linear-gradient-directions

-- or-type linear-gradient-directions:

-- ftd.decimal angle:
-- ftd.decimal turn:
-- constant string left: left
-- constant string right: right
-- constant string top: top
-- constant string bottom: bottom
-- constant string top-left: top-left
-- constant string top-right: top-right
-- constant string bottom-left: bottom-left
-- constant string bottom-right: bottom-right

-- end: linear-gradient-directions

Lang:

ftd

As shown above, the ftd.linear-gradient-directions has following variants:

angle: This value will set the gradient direction to the specified angle. It takes value of type ftd.decimal.
turn: This value sets the gradient direction by turning the gradient line to the value specified. It takes value of type ftd.decimal.
left: This value sets the gradient direction to left.
right: This value sets the gradient direction to right.
top: This value sets the gradient direction to top.
bottom: This value sets the gradient direction to bottom.
top-left: This value sets the gradient direction to top-left.
bottom-left: This value sets the gradient direction to bottom-left.
top-right: This value sets the gradient direction to top-right.
top-left: This value sets the gradient direction to top-left.

`ftd.background`

ftd.background is an or-type. It accepts either solid color of type ftd.color or an image of type ftd.background-image.

ftd.background

-- or-type background:

-- ftd.color solid:
-- ftd.background-image image:
-- ftd.linear-gradient linear-gradient:

-- end: background

Lang:

ftd

As shown above, the ftd.background has following variants:

solid: This value will set the specified solid color as the background. It takes value of type ftd.color.
image: This value will set the specified image as the background image It takes value of type ftd.background-image.
linear-gradient: This value will set the specified linear gradient as the background. It takes value of type ftd.linear-gradient.

`ftd.background-image`

It is record type with the following fields.

ftd.background-image record

-- record background-image:
caption ftd.image-src src:
optional ftd.background-repeat repeat:
optional ftd.background-position position:
optional ftd.background-size size:

Lang:

ftd

src: This field of ftd.background-image stores the source of image to be displayed in both light and dark modes.
repeat: This field specifies whether the image needs to be repeated or not. It takes ftd.background-repeat value and is optional. By default, the background image will be repeated in both directions.
size: This field specifies the size of the background image which will be displayed. It takes ftd.background-size value and is optional.
position: This field specifies the position of the background image. It takes ftd.background-position value and is optional. By default, the background image will be shown at the top-left position.

`ftd.background-repeat`

The ftd.background-repeat property is used to specify how background images are repeated. It is an or-type which is used with ftd.background-image and is optional under it.

ftd.background-repeat

-- or-type background-repeat:

-- constant string repeat: repeat
-- constant string repeat-x: repeat-x
-- constant string repeat-y: repeat-y
-- constant string no-repeat: no-repeat
-- constant string space: space
-- constant string round: round

-- end: background-repeat

Lang:

ftd

As shown above, the ftd.background-repeat has following variants:

repeat: This value will make the background image repeat as much as possible in both directions to cover the whole container area. The last image will be clipped if it doesn't fit as per container dimensions.
repeat-x: This value will show similar behaviour as repeat except the fact that the images will be repeated only in x-direction (horizontal direction) and the last image will be clipped if it doesnt fit within the container area.
repeat-y: This value will show similar behaviour as repeat except the fact that the images will be repeated only in y-direction (vertical direction) and the last image will be clipped if it doesnt fit within the container area.
no-repeat: This value will make the image not repeat itself in any direction and hence container area might not get entirely covered in case if the container area is larger than the image itself.
space: This value will make the image repeat itself in both directions just like repeat except the fact that the last images wont be clipped and whitespace will be evenly distributed between the images. The only case where clipping will happen when there is not enough space for a single image.
round: This value will make the background image repeat itself and then are either squished or stretched to fill up the container space leaving no gaps.

`ftd.background-position`

The ftd.background-position property is used to specify the positioning of the background image. It is an or-type which is used with ftd.background-image and is optional under it.

ftd.background-position

-- or-type background-position:

-- constant string left: left
-- constant string center: center
-- constant string bottom: bottom
-- constant string left-top: left-top
-- constant string left-center: left-center
-- constant string left-bottom: left-bottom
-- constant string center-top: center-top
-- constant string center-center: center-center
-- constant string center-bottom: center-bottom
-- constant string right-top: right-top
-- constant string right-center: right-center
-- constant string right-bottom: right-bottom

-- anonymous record length:

-- ftd.length x:
-- ftd.length y:

-- end: length

-- end: background-position

Lang:

ftd

As shown above, the ftd.background-position has following variants:

left- Positions the image to the left of the container.
center- Positions the image to the center of the container.
right- Positions the image to the right of the container.
left-top - Positions the image to the left in horizontal direction and top along the vertical direction of the container.
left-center - Positions the image to the left in horizontal direction and center along the vertical direction of the container.
left-bottom - Positions the image to the left in horizontal direction and bottom along the vertical direction of the container.
center-top - Positions the image to the center in horizontal direction and top along the vertical direction of the container.
center-center - Positions the image to the center in horizontal direction and center along the vertical direction of the container.
center-bottom - Positions the image to the center in horizontal direction and bottom along the vertical direction of the container.
right-top - Positions the image to the right in horizontal direction and top along the vertical direction of the container.
right-center - Positions the image to the right in horizontal direction and center along the vertical direction of the container.
right-bottom - Positions the image to the right in horizontal direction and bottom along the vertical direction of the container.
length - This anonymous record value will set the position value based on the specified x and y values.

`ftd.background-size`

The ftd.background-size property is used to specify the dimensions of the background image. It is an or-type which is used with ftd.background-image and is optional under it.

ftd.background-size

-- or-type background-size:

-- constant string auto: auto
-- constant string cover: cover
-- constant string contain: contain

-- anonymous record length:

-- ftd.length x:
-- ftd.length y:

-- end: length

-- end: background-size

Lang:

ftd

As shown above, the ftd.background-size has following variants:

auto: This value will scale the background image in the corresponding directions while maintaining the intrinsic proportions of the specified image.
cover: This value will scale the image to the smallest possible size to fill the container area leaving no empty space while preserving its ratio. Image will be cropped for either direction if the container dimensions differ from the image dimensions.
contain: This value will scale the background image as large as possible within its container area without cropping or stretching the image.
length: This anonymous record value will set the dimensions of the background image based on the specified x and y values.

`ftd.image-fetch-priority`

The ftd.image-fetch-priority property is used to specify the priority of the image.

ftd.image-fetch-priority

-- or-type image-fetch-priority:

-- constant string high: high
-- constant string low: low

-- end: image-fetch-priority

Lang:

ftd

As shown above, the ftd.image-fetch-priority has following variants

high: Fetch the image at a high priority relative to other images.
low: Fetch the image at a low priority relative to other images.

`ftd.color`

It is record type with the following fields.

ftd.color record (ftd.ftd)

-- record color:
caption light:
string dark: $color.light

Lang:

ftd

The light field of ftd.color stores the color to be displayed in light mode, while the dark field stores the color to be displayed in dark mode. If the dark field is not provided, the light field's value is used as a default.

Example Usage

Consider the following example:

Two colors

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

Lang:

ftd

This would return red color in light mode and orange color in dark mode.

It is also possible to use ftd.color with only one field. For example:

One color

-- ftd.color just-red:
light: red

;; or

-- ftd.color just-red: red

Lang:

ftd

This would return red color in both light mode and dark mode.

Using `ftd.color` in component property

Lets look at example of using ftd.color type variable.

Two colors

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

-- ftd.text: Switch your color mode (light/dark)
color: $red-orange

Lang:

ftd

In this example, the ftd.text component will display color of text specified in red-orange variable, based on the current color mode.

The output will look like this. Switch your color mode (light/dark) to see the wonder!

Output

Switch your device mode (light/dark)

Supported Color Formats

The value of light and dark can be any string supported by CSS3 Color spec.

Along with CSS3 colors we also support 8 digit RGBA format (eg #RRGGBBAA) from CSS Color Module Level 4.

`ftd.image-src`

ftd.image-src is a record type used to store image URLs for both light and dark mode. This record is a type for the src property of ftd.image component.

The record structure of ftd.image-src is as follows:

ftd.image-src record (ftd.ftd)

-- record image-src:
caption light:
string dark: $image-src.light

Lang:

ftd

The light field of ftd.image-src stores the image URL to be displayed in light mode, while the dark field stores the image URL to be displayed in dark mode. If the dark field is not provided, the light field's value is used as a default.

Example Usage

Consider the following example:

Two images

-- ftd.image-src my-images:
light: https://fastn.com/-/fastn.com/images/fastn.svg
dark: https://fastn.com/-/fastn.com/images/fastn-dark.svg

Lang:

ftd

In this example, the image URL https://fastn.com/-/fastn.com/images/fastn.svg is returned in light mode, while https://fastn.com/-/fastn.com/images/fastn-dark.svg is returned in dark mode.

It is also possible to use ftd.image-src with only one field. For example:

One image

-- ftd.image-src just-light:
light: https://fastn.com/-/fastn.com/images/fastn.svg

;; or

-- ftd.image-src just-light: https://fastn.com/-/fastn.com/images/fastn.svg

Lang:

ftd

In this case, the same image URL https://fastn.com/-/fastn.com/images/fastn.svg is returned in both light and dark modes.

Supported image formats

The HTML standard doesn't list what image formats to support, so user agents may support different formats.

To get the comprehensive information about image formats and their web browser support, check the Image file type and format guide.

`ftd.resizing`

The ftd.resizing property is used to control the dimensions of an element. It is an or-type. The ftd.resizing property is commonly used for component properties such as width, height, min-width, max-width, min-height and max-height.

ftd.resizing

-- or-type resizing:

-- constant string fill-container: fill-container
-- constant string hug-content: hug-content
-- constant string auto: auto
-- ftd.length fixed:

-- end: resizing

Lang:

ftd

As shown above, the ftd.resizing has following variants:

fixed: The fixed variant of ftd.resizing is used to give a fixed length to an element. For example, width.fixed.px: 100 sets the width of an element to be 100 pixels. This variant is useful when a specific size is required for an element, regardless of the size of its parent or contents.
hug-content: The hug-content variant of ftd.resizing is used to dynamically resize the container element to be as small as possible while still surrounding its contents. This variant is useful when you want the size of the container element to match the size of its contents.
fill-container: The fill-container variant of ftd.resizing is used to stretch the element to the width and/or height of its parent element. This variant is useful when you want an element to fill the entire space of its parent container.
auto: The auto variant of ftd.resizing allows the browser to calculate and select a width for the specified element. This variant is useful when you want the element to size itself automatically based on its contents or other factors.

Example Usage of `ftd.resizing`

Example Usage of ftd.resizing

-- ftd.text: Hello
width: fill-container
height: auto
max-width.fixed.px: 300
min-width: hug-content

Lang:

ftd

In the above example, the ftd.text component has a width stretches to the width of its parent container, a height calculated and set by browser automatically based on its contents or other factors, max-width sets to be 300 pixels and min-width dynamically resizes to be as small as possible while still surrounding its contents.

`ftd.length`

The ftd.length type is used for passing UI dimensions and is an or-type, meaning it can take on different variants.

ftd.length

-- or-type length:

-- integer px:
-- decimal percent:
-- string calc:
-- decimal vh:
-- decimal vw:
-- decimal vmin:
-- decimal vmax:
-- decimal dvh:
-- decimal lvh:
-- decimal svh:
-- decimal em:
-- decimal rem:
-- ftd.responsive-length responsive:

-- end: length

-- record responsive-length:
ftd.length desktop:
ftd.length mobile: $responsive-length.desktop

Lang:

ftd

As shown above, the ftd.length has following variants:

px: This variant gives an integer value followed by the px unit of space. For example, padding.px: 100 sets the padding to be 100 pixels.
percent: This variant gives an integer value followed by the % unit of space. For example, width.fixed.percent: 50 sets the width to be 50% of the parent element's width.
calc: This variant takes a single expression as its parameter, and its result is used as the value. For example, padding.calc: 100% - 80px sets the padding to be the result of the expression 100% - 80px.
vh: This variant sets the value relative to 1% of the height of the viewport. For example, height.fixed.vh: 50 sets the height to be 50% of the viewport's height.
vw: This variant sets the value relative to 1% of the width of the viewport. For example, width.fixed.vw: 25 sets the width to be 25% of the viewport's width.
vmin: This variant sets the value relative to the smaller dimension between the width and height of the viewport. For example, width.fixed.vmin: 25 sets the width to be 25% of the smaller dimension.
vmax: This variant sets the value relative to the larger dimension between the width and height of the viewport. For example, width.fixed.vmax: 25 sets the width to be 25% of the larger dimension.
dvh: This variant sets the value relative to the dynamic viewport height , when the area of "web content" get changed. For example, width.fixed.dvh: 25 sets the height to be 25% of the dynmaically changing viewport height.
lvh: This variant sets the value relative to the large viewport height. For example, width.fixed.lvh: 25 sets the height to be 25% of the larger viewport height.
svh: This variant sets the value relative to the large viewport height. For example, width.fixed.svh: 25 sets the height to be 25% of the smaller viewport height.
em: This variant sets the value relative to the size of the parent element, in the case of typographical properties like font-size, and the font size of the element itself, in the case of other properties like width.
rem: This variant sets the value relative to the size of the root element.

Besides these, there is a special variant named responsive.This variant is of record type named ftd.responsive-length. It helps to give different length for different devices (mobile/desktop). It has two fields, desktop and mobile, which are ftd.length types. The desktop field specifies the value of the length on desktop devices, while the mobile field specifies the value on mobile devices.

Learn more about these length units based on viewport on MDN.

For example,

responsive

-- ftd.responsive-length p:
desktop.px: 20
mobile.percent: 10

-- ftd.text: Hello
padding.responsive: $p
background.solid: $inherited.colors.background.step-1
color: $inherited.colors.text
border-width.px: 1
border-color: $inherited.colors.border

Lang:

ftd

Output

Hello

The above code sets the padding to be 20 pixels on desktop devices and 10 percent on mobile devices.

Note that the calc variant can be used with any of the other variants to perform calculations on the values.

Example Usage of `ftd.length`

Example Usage of ftd.length

-- ftd.text: Hello
width.fixed.percent: 50
height.fixed.px: 300
margin.rem: 2
padding.calc: 100% - 80px

Lang:

ftd

In the above example, the ftd.text component has a width of 50% of its parent element's width, a fixed height of 300 pixels, a margin of 2 times the font size of the root element, and a padding calculated using the expression 100% - 80px.

`ftd.length-pair`

ftd.length-pair is used to store two lengths, .x and .y, usually used for representing screen coordinates.

-- record length-pair:
ftd.length x:
ftd.length y:

Lang:

ftd

`ftd.type`

ftd.type is a record. It is not a direct type for any component property, but it has a derived type ftd.responsive-type which is a type role, a common property for component. It specifies the typography of the element.

type record (ftd.ftd)

-- record type:
optional ftd.font-size size:
optional ftd.font-size line-height:
optional ftd.font-size letter-spacing:
optional integer weight:
optional string list font-family:

Lang:

ftd

It defines the line-height, size, weight, font-family and letter-spacing.

`line-height`

The line-height field sets the height of a line box. It's commonly used to set the distance between lines of text.

`size`

The size field sets the size of the font.

`weight`

The weight property sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently set.

`font-family`

The font-family property specifies a font family name and/or generic family name for the selected element. You can pass a single value or a list of family names.

Typically, a value should be accessed from the assets module in the form $assets.fonts.<font-name>, where <font-name> is defined in your FASTN.ftd file or in the FASTN.ftd file of one of your dependencies.

-- ftd.type regular:
line-height.em: 1.4
weight: 400
size.rem: 1.45
font-family: $my-fonts
;; Or, if you just want one font-family specified:
;; font-family: $assets.fonts.Montserrat 

-- string list my-fonts:

-- string: $assets.fonts.Montserrat
-- string: serif
-- string: system-ui

-- end: fonts

Lang:

ftd

`letter-spacing`

The letter-spacing sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of letter-spacing causes characters to spread farther apart, while negative values of letter-spacing bring characters closer together.

-- ftd.type dtype:
size.px: 40
weight: 700
font-family: cursive
line-height.px: 65
letter-spacing.px: 5

Lang:

ftd

`ftd.responsive-type`

ftd.responsive-type is a record. It is a type for role property, a common property for component. It specifies the responsive typography of an element using fields for desktop and mobile, which are of type ftd.type.

ftd.responsive-type

-- record responsive-type:
caption ftd.type desktop:
ftd.type mobile: $responsive-type.desktop

Lang:

ftd

As shown above, the ftd.responsive-type has following fields:

desktop: An optional ftd.type field that specifies the typography of the element on desktop screens.
mobile: An optional ftd.type field that specifies the typography of the element on mobile screens. If this field is not specified, the desktop value will be used as the default for mobile screens.

Example Usage

Lets understand this with an example.

-- ftd.type desktop-type:
size.px: 40
weight: 900
font-family: cursive
line-height.px: 65
letter-spacing.px: 5

-- ftd.type mobile-type:
size.px: 20
weight: 100
font-family: fantasy
line-height.px: 35
letter-spacing.px: 3

-- ftd.responsive-type responsive-typography:
desktop: $desktop-type
mobile: $mobile-type

-- ftd.text: Hello World
role: $responsive-typography

Lang:

ftd

In this example, we define two ftd.type type variables, desktop-type and mobile-type, which specify the typography for desktop and mobile screens respectively. We then define an ftd.responsive-type type variable responsive-typography, which specifies the responsive typography for the element. Finally, we set the role property of an ftd.text component to responsive-typography.

When the device is switched between desktop and mobile views, the font size, font weight, font family, line height, and letter spacing of the text changes based on the specified values for the current device.

Check the below output in different devices.

Output

Hello World

`ftd.align-self`

ftd.align-self is an or-type. It is a type for align-self property, a common property for component. It specifies the alignment of an element within its container in the block direction, i.e., the direction perpendicular to the main axis.

ftd.align-self

-- or-type align-self:

-- constant string start: start
-- constant string center: center
-- constant string end: end

-- end: align-self

Lang:

ftd

As shown above, the ftd.align-self has following variants:

start: The element is positioned at the beginning of the container
center: The element is positioned at the center of the container
end: The element is positioned at the end of the container

`ftd.align`

ftd.align is an or-type. It is a type for the align-content property, a property for container-type components. It specifies the alignment of items in the container component along both the horizontal and vertical axes.

ftd.align

-- or-type align:

-- constant string top-left: top-left
-- constant string top-center: top-center
-- constant string top-right: top-right
-- constant string right: right
-- constant string left: left
-- constant string center: center
-- constant string bottom-left: bottom-left
-- constant string bottom-center: bottom-center
-- constant string bottom-right: bottom-right

-- end: align

Lang:

ftd

As shown above, the ftd.align has following variants:

top-left: Aligns items to the top-left corner of the container.
top-center: Aligns items to the top-center of the container.
top-right: Aligns items to the top-right corner of the container.
right: Aligns items to the right side of the container.
left: Aligns items to the left side of the container.
center: Centers items both horizontally and vertically within the container.
bottom-left: Aligns items to the bottom-left corner of the container.
bottom-center: Aligns items to the bottom-center of the container.
bottom-right: Aligns items to the bottom-right corner of the container.

`ftd.text-align`

ftd.text-align is an or-type. It is a type for text-align property, a common property for component. It specifies the horizontal alignment of text within an element.

ftd.text-align

-- or-type text-align:

-- constant string start: start
-- constant string center: center
-- constant string end: end
-- constant string justify: justify

-- end: text-align

Lang:

ftd

As shown above, the ftd.text-align has following variants:

start: aligns text to the left edge of the element, which is the default value.
center: centers text horizontally within the element.
end: aligns text to the right edge of the element.
justify: aligns text to both the left and right edges of the element, creating additional space between words as necessary to fill the available width.

`ftd.spacing`

ftd.spacing is an or-type that is used for the spacing property, a common property for container components. It determines the distribution of space between and around the container's items when they don't use all available space on the main-axis.

ftd.spacing

-- or-type spacing:

-- ftd.length fixed:
-- constant string space-between: space-between
-- constant string space-around: space-around
-- constant string space-evenly: space-evenly

-- end: spacing

Lang:

ftd

As shown above, the ftd.spacing has following variants:

fixed: A fixed distance between each item, specified in a specific unit of measurement, as given by ftd.length such as pixels, ems etc.
space-between: The space between items is evenly distributed. The first item is at the start of the container and the last item is at the end of the container, with any remaining space distributed equally between the items.
space-around: The space is distributed evenly around each item, with half the space on either side of the item. This means that the space between the first and last items and the container edges is half the space between the items.
space-evenly: The space is distributed evenly between and around each item, including the space between the first and last items and the container edges.

`ftd.anchor`

ftd.anchor is an or-type. It is a type for anchor property, a common property for component. It specifies the positioning of the element relative to its parent, ancestor, or the window.

ftd.anchor

-- or-type anchor:

-- constant string parent: absolute
-- constant string window: fixed
-- string id:

-- end: anchor

Lang:

ftd

As shown above, the ftd.anchor has following variants:

parent: This specifies that the element is positioned relative to its parent container.
window: This specifies that the element is positioned relative to the browser window, and will not move even if the page is scrolled.
id: This specifies that the element is positioned relative to another ancestor element with the given id.

When using anchor property, component should also include an offset properties, like top or bottom and left or right which specifies the offset of the element from the anchor element. If not given, it takes the default offset as top.px: 0 and left.px: 0

`ftd.resize`

ftd.resize is an or-type. It is a type for resize property, a common property for component. It specifies whether an element is resizable and in which directions.

ftd.resize

-- or-type resize:

-- constant string both: both
-- constant string horizontal: horizontal
-- constant string vertical: vertical

-- end: resize

Lang:

ftd

As shown above, the ftd.resize has following variants:

both: The element can be resized both horizontally and vertically.
horizontal: The element can only be resized horizontally.
vertical: The element can only be resized vertically.

`ftd.overflow`

ftd.overflow is an or-type. It is a type for overflow property, a common property for component. It specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.

ftd.overflow

-- or-type overflow:

-- constant string scroll: scroll
-- constant string visible: visible
-- constant string hidden: hidden
-- constant string auto: auto

-- end: overflow

Lang:

ftd

As shown above, the ftd.overflow has following variants:

visible - Default. The overflow is not clipped. The content renders outside the element's box
hidden - The overflow is clipped, and the rest of the content will be invisible
scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
auto - Similar to scroll, but it adds scrollbars only when necessary

`ftd.cursor`

ftd.cursor is an or-type. It is a type for cursor property, a common property for component. It specifies the mouse cursor to be displayed when pointing over an element.

ftd.cursor

-- or-type cursor:

-- constant string default: default
-- constant string none: none
-- constant string context-menu: context-menu
-- constant string help: help
-- constant string pointer: pointer
-- constant string progress: progress
-- constant string wait: wait
-- constant string cell: cell
-- constant string crosshair: crosshair
-- constant string text: text
-- constant string vertical-text: vertical-text
-- constant string alias: alias
-- constant string copy: copy
-- constant string move: move
-- constant string no-drop: no-drop
-- constant string not-allowed: not-allowed
-- constant string grab: grab
-- constant string grabbing: grabbing
-- constant string e-resize: e-resize
-- constant string n-resize: n-resize
-- constant string ne-resize: ne-resize
-- constant string nw-resize: nw-resize
-- constant string s-resize: s-resize
-- constant string se-resize: se-resize
-- constant string sw-resize: sw-resize
-- constant string w-resize: w-resize
-- constant string ew-resize: ew-resize
-- constant string ns-resize: ns-resize
-- constant string nesw-resize: nesw-resize
-- constant string nwse-resize: nwse-resize
-- constant string col-resize: col-resize
-- constant string row-resize: row-resize
-- constant string all-scroll: all-scroll
-- constant string zoom-in: zoom-in
-- constant string zoom-out: zoom-out

-- end: cursor

Lang:

ftd

As shown above, the ftd.cursor has following variants:

alias: The cursor indicates an alias of something is to be created
all-scroll:The cursor indicates that something can be scrolled in any direction
auto: Default. The browser sets a cursor
cell: The cursor indicates that a cell (or set of cells) may be selected
col-resize: The cursor indicates that the column can be resized horizontally
context-menu: The cursor indicates that a context-menu is available
copy: The cursor indicates something is to be copied
crosshair: The cursor render as a crosshair
default: The default cursor
e-resize: The cursor indicates that an edge of a box is to be moved right (east)
ew-resize: Indicates a bidirectional resize cursor
grab: The cursor indicates that something can be grabbed
grabbing: The cursor indicates that something can be grabbed
help: The cursor indicates that help is available
move: The cursor indicates something is to be moved
n-resize: The cursor indicates that an edge of a box is to be moved up (north)
ne-resize: The cursor indicates that an edge of a box is to be moved up and right (north/east)
nesw-resize: Indicates a bidirectional resize cursor
ns-resize: Indicates a bidirectional resize cursor
nw-resize: The cursor indicates that an edge of a box is to be moved up and left (north/west)
nwse-resize: Indicates a bidirectional resize cursor
no-drop: The cursor indicates that the dragged item cannot be dropped here
none: No cursor is rendered for the element
not-allowed: The cursor indicates that the requested action will not be executed
pointer: The cursor is a pointer and indicates a link
progress: The cursor indicates that the program is busy (in progress)
row-resize: The cursor indicates that the row can be resized vertically
s-resize: The cursor indicates that an edge of a box is to be moved down (south)
se-resize: The cursor indicates that an edge of a box is to be moved down and right (south/east)
sw-resize: The cursor indicates that an edge of a box is to be moved down and left (south/west)
text: The cursor indicates text that may be selected
vertical-text: The cursor indicates vertical-text that may be selected
w-resize: The cursor indicates that an edge of a box is to be moved left (west)
wait: The cursor indicates that the program is busy
zoom-in: The cursor indicates that something can be zoomed in
zoom-out: The cursor indicates that something can be zoomed out

`ftd.display`

ftd.display is an or-type. It is a type for display property under text-attributes. It specifies the display behaviour of an element.

ftd.display

-- or-type display:

-- constant string block: block
-- constant string inline: inline
-- constant string inline-block: inline-block

-- end: display

Lang:

ftd

As shown above, the ftd.display has following variants:

block: This value creates a rectangular box that takes up the full width available within its parent container and creates a new line after it.
inline: This value causes an element to flow with the text, allowing it to appear alongside other inline elements. It does not create a new line after it, and the width and height of the element are determined by its content.
inline-block: This value combines the features of both block and inline displays. It creates a rectangular box that takes up only the necessary width required by its content, but also allows for other elements to appear on the same line.

`ftd.region`

ftd.region is an or-type. It is a type for region property, a property for text component. This property is used to specify the level of section headings in a document. It also generate slug and set it as the id for text component.

ftd.region

-- or-type region:

-- constant string h1: h1
-- constant string h2: h2
-- constant string h3: h3
-- constant string h4: h4
-- constant string h5: h5
-- constant string h6: h6

-- end: region

Lang:

ftd

As shown above, the ftd.region type includes six possible constant string values: h1, h2, h3, h4, h5, and h6. Each of these values represents a different level of section heading, with h1 being the highest level and h6 being the lowest.

By using appropriate ftd.region variant, structured and semantically meaningful documents or webpages can be created. The generated slugs ensure that each section heading has an ID that can be used for linking or navigating within the document or webpage.

`ftd.white-space`

ftd.white-space is an or-type. It is a type for white-space property, a common property for component. It specifies how white-space inside an element is handled.

ftd.white-space

-- or-type white-space:

-- constant string normal: normal
-- constant string nowrap: nowrap
-- constant string pre: pre
-- constant string pre-wrap: pre-wrap
-- constant string pre-line: pre-line
-- constant string break-spaces: break-spaces

-- end: white-space

Lang:

ftd

As shown above, the ftd.white-space has following variants:

normal: This value is the default behavior. Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks.
nowrap: Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a line break or new line is encountered.
pre: This value preserves whitespace characters. Text will only wrap on line breaks.
pre-line: Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks.
pre-wrap: This value preserves whitespace characters. Text will wrap when necessary, and on line breaks.

By using these values, you can control how white-space characters are treated inside an element, allowing for more precise control over the layout and formatting of text content. For example, using pre or pre-wrap can be useful when displaying code snippets or other text that requires precise formatting, while normal or pre-line may be more appropriate for regular paragraphs or text blocks.

`ftd.type-data`

ftd.type-data is a record type used to define typography data. It allows developers and designers to establish consistent and visually appealing typography styles throughout an application or website.

ftd.type-data

-- record type-data:
ftd.responsive-type heading-large:
ftd.responsive-type heading-medium:
ftd.responsive-type heading-small:
ftd.responsive-type heading-hero:
ftd.responsive-type heading-tiny:
ftd.responsive-type copy-small:
ftd.responsive-type copy-regular:
ftd.responsive-type copy-large:
ftd.responsive-type fine-print:
ftd.responsive-type blockquote:
ftd.responsive-type source-code:
ftd.responsive-type button-small:
ftd.responsive-type button-medium:
ftd.responsive-type button-large:
ftd.responsive-type link:
ftd.responsive-type label-large:
ftd.responsive-type label-small:

Lang:

ftd

As shown above, the ftd.type-data has following fields:

`heading-large`:

Represents a type of typography for large headings. It is typically used to display prominent and visually impactful headings in a document or user interface.

Desktop

font-family: sans-serif
font-size: 50px
line-height: 65px
font-weight: 400

Mobile

font-family: sans-serif
font-size: 36px
line-height: 54px
font-weight: 400

`heading-medium`:

Represents a type of typography for medium-sized headings.

Desktop

font-family: sans-serif
font-size: 38px
line-height: 57px
font-weight: 400

Mobile

font-family: sans-serif
font-size: 26px
line-height: 40px
font-weight: 400

`heading-small`:

Represents a type of typography for small headings.

Desktop

font-family: sans-serif
font-size: 24px
line-height: 31px
font-weight: 400

Mobile

font-family: sans-serif
font-size: 22px
line-height: 29px
font-weight: 400

`heading-hero`:

Represents a type of typography for tiny headings. It is typically used for very small and subtle headings or captions.

Desktop

font-family: sans-serif
font-size: 80px
line-height: 104px
font-weight: 400

Mobile

font-family: sans-serif
font-size: 48px
line-height: 64px
font-weight: 400

`heading-tiny`:

Represents a type of typography for tiny headings. It is typically used for very small and subtle headings or captions.

Desktop

font-family: sans-serif
font-size: 20px
line-height: 26px
font-weight: 400

Mobile

font-family: sans-serif
font-size: 18px
line-height: 24px
font-weight: 400

`copy-small`:

Represents a type of typography for small-sized body copy or text blocks. It is typically used for displaying concise paragraphs, descriptions, or other textual content.

Desktop

font-family: sans-serif
font-size: 14px
line-height: 24px
font-weight: 400

Mobile

font-family: sans-serif
font-size: 12px
line-height: 16px
font-weight: 400

`copy-regular`:

Represents a type of typography for regular-sized body copy or text blocks. It is typically used for displaying standard paragraphs, descriptions, or other textual content.

Desktop

font-family: sans-serif
font-size: 18px
line-height: 30px
font-weight: 400

Mobile

font-family: sans-serif
font-size: 16px
line-height: 24px
font-weight: 400

`copy-large`:

Represents a type of typography for large-sized body copy or text blocks. It is typically used for displaying important or emphasized paragraphs, descriptions, or other textual content.

Desktop

font-family: sans-serif
font-size: 22px
line-height: 34px
font-weight: 400

Mobile

font-family: sans-serif
font-size: 18px
line-height: 28px
font-weight: 400

`fine-print`:

Represents a type of typography for fine print or small-sized text. It is typically used for displaying legal disclaimers, copyright information, or other supplementary text that requires smaller font size and reduced emphasis.

Desktop

font-family: sans-serif
font-size: 12px
line-height: 16px
font-weight: 400

Mobile

font-family: sans-serif
font-size: 12px
line-height: 16px
font-weight: 400

`blockquote`:

Represents a type of typography for blockquote text, which is a quoted section of text often used to highlight and emphasize external content or significant statements.

Desktop

font-family: sans-serif
font-size: 16px
line-height: 21px
font-weight: 400

Mobile

font-family: sans-serif
font-size: 16px
line-height: 21px
font-weight: 400

`source-code`:

Represents a type of typography for displaying source code or programming code snippets. It is typically used to present code examples, syntax highlighting, and improve code readability.

Desktop

font-family: sans-serif
font-size: 18px
line-height: 30px
font-weight: 400

Mobile

font-family: sans-serif
font-size: 16px
line-height: 21px
font-weight: 400

`button-small`:

Represents a type of typography for small-sized buttons. It is typically used for displaying buttons with compact dimensions, such as in navigation bars, form elements, or areas with limited space.

Desktop

font-family: sans-serif
font-size: 14px
line-height: 19px
font-weight: 400

Mobile

font-family: sans-serif
font-size: 14px
line-height: 19px
font-weight: 400

`button-medium`:

Represents a type of typography for medium-sized buttons. It is typically used for displaying buttons with a balanced size, suitable for various interactive elements and user interface components.

Desktop

font-family: sans-serif
font-size: 16px
line-height: 21px
font-weight: 400

Mobile

font-family: sans-serif
font-size: 16px
line-height: 21px
font-weight: 400

`button-large`:

Represents a type of typography for large-sized buttons. It is typically used for displaying buttons with a prominent and impactful design, suitable for important calls to action or primary interaction points.

Desktop

font-family: sans-serif
font-size: 18px
line-height: 24px
font-weight: 400

Mobile

font-family: sans-serif
font-size: 18px
line-height: 24px
font-weight: 400

`button-large`:

Desktop

font-family: sans-serif
font-size: 18px
line-height: 24px
font-weight: 400

Mobile

font-family: sans-serif
font-size: 18px
line-height: 24px
font-weight: 400

`link`:

Represents a type of typography for hyperlinks or clickable text. It is typically used for styling text that serves as a link to other web pages or resources.

Desktop

font-family: sans-serif
font-size: 14px
line-height: 19px
font-weight: 400

Mobile

font-family: sans-serif
font-size: 14px
line-height: 19px
font-weight: 400

`label-large`:

Represents a type of typography for large-sized labels. It is typically used for displaying labels or tags that require a larger size and visual prominence.

Desktop

font-family: sans-serif
font-size: 14px
line-height: 19px
font-weight: 400

Mobile

font-family: sans-serif
font-size: 14px
line-height: 19px
font-weight: 400

`label-small`:

Represents a type of typography for small-sized labels. It is typically used for displaying compact labels or tags that require a smaller size and subtle presentation.

Desktop

font-family: sans-serif
font-size: 12px
line-height: 16px
font-weight: 400

Mobile

font-family: sans-serif
font-size: 12px
line-height: 16px
font-weight: 400

`ftd.text-transform`

ftd.text-transform is an or-type that represents the different values for the text-transform property, which is a common property for components. This property specifies how to transform the capitalization of an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.

ftd.text-transform

-- or-type text-transform:

-- constant string none: none
-- constant string capitalize: capitalize
-- constant string uppercase: uppercase
-- constant string lowercase: lowercase
-- constant string initial: initial
-- constant string inherit: inherit

-- end: text-transform

Lang:

ftd

As shown above, the ftd.text-transform has following variants:

none: No capitalization. The text renders as it is. This is default
capitalize: Transforms the first character of each word to uppercase
uppercase: Transforms all characters to uppercase
lowercase: Transforms all characters to lowercase
initial: Sets this property to its default value.
inherit: Inherits this property from its parent element.

`ftd.border-style`

ftd.border-style is an or-type that defines the style of an element's four borders. It is a type for the border-style property, which is a common property used to set the style of an component's border.

ftd.border-style

-- or-type border-style:

-- constant string dotted: dotted
-- constant string dashed: dashed
-- constant string solid: solid
-- constant string double: double
-- constant string groove: groove
-- constant string ridge: ridge
-- constant string inset: inset
-- constant string outset: outset

-- end: border-style

Lang:

ftd

As shown above, the ftd.border-style has following variants:

dotted: Specifies a dotted border. The border is a series of dots.
dashed: Specifies a dashed border. The border is made up of a series of dashes.
solid: Specifies a solid border. This is the default value.
double: Specifies a double border. The border is a double line, consisting of two parallel lines.
groove: Specifies a 3D grooved border. The effect depends on the border-color value. The border looks like it is carved into the page, with a 3D effect.
ridge: Specifies a 3D ridged border. The effect depends on the border-color value. The border looks like it is popping out of the page, with a 3D effect.
inset: Specifies a 3D inset border. The effect depends on the border-color value. The border looks like it is embedded in the page, with a 3D effect.
outset: Specifies a 3D outset border. The effect depends on the border-color value. The border looks like it is coming out of the page, with a 3D effect.

`ftd.loading`

ftd.loading is an or-type. This is the type for loading property of ftd.iframe component. It is a strategy to identify whether resources are blocking and load these immediately or non-blocking (non-critical) and load these only when needed.

ftd.loading

-- or-type loading:

-- constant string lazy: lazy
-- constant string eager: eager

-- end: loading

Lang:

ftd

It has two variants lazy and eager.

eager: Loads an element immediately
lazy: Defer loading of element until some conditions are met

`ftd.text-input-type`

ftd.text-input-type is an or-type. The 'type' property of ftd.text-input component accepts the optional of this type. It has various variant which defines information field type.

ftd.text-input-type

-- or-type text-input-type:

-- constant string text: text
-- constant string email: email
-- constant string password: password
-- constant string url: url
-- constant string datetime: datetime
-- constant string date: date
-- constant string time: time
-- constant string month: month
-- constant string week: week
-- constant string color: color
-- constant string file: file

-- end: text-input-type

Lang:

ftd

As you can see above the ftd.text-input-type has following variants:

text: The default value. A single-line text field. Line-breaks are automatically removed from the input value.
email: A field for editing an email address. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.
password: A single-line text field whose value is obscured. Will alert user if site is not secure.
url: A field for entering a URL. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.
datetime: A field for entering a date and time with time zone.
date: A field for entering a date (year, month, and day).
time: A field for entering a time value.
month: A field for entering a month and year.
week: A field for entering a date consisting of a week-year number and a week number.
color: A field for specifying a color value.
file: A field that lets the user select one or more files.

`ftd.text-style`

ftd.text-style is an or-type. The style under text attributes accepts the optional list of this type. It allows various constant values which defines the specific inline style.

ftd.text-style

-- or-type text-style:

-- constant string underline: underline
-- constant string strike: strike
-- constant string italic: italic
-- constant string heavy: heavy
-- constant string extra-bold: extra-bold
-- constant string semi-bold: semi-bold
-- constant string bold: bold
-- constant string regular: regular
-- constant string medium: medium
-- constant string light: light
-- constant string extra-light: extra-light
-- constant string hairline: hairline

-- end: text-style

Lang:

ftd

As you can see above the ftd.text-style has following variants:

Text Decoration

underline: This value will set the text to have a decorative line beneath it.
strike: This value will set the text to have a decorative line going through its middle.

Font Style

italic: This value will make your text italic.

Font Weights

heavy: This value will set the font weight to 900.
extra-bold: This value will set the font weight to 800.
bold: This value will set the font weight to 700.
semi-bold: This value will set the font weight to 600.
medium: This value will set the font weight to 500.
regular: This value will set the font weight to 400.
light: This value will set the font weight to 300.
extra-light: This value will set the font weight to 200.
hairline: This value will set the font weight to 100.

`ftd.shadow`

It is record type with the following fields.

ftd.shadow record

-- record shadow:
ftd.color color:
ftd.length x-offset: 0
ftd.length y-offset: 0
ftd.length blur: 0
ftd.length spread: 0
boolean inset: false

Lang:

ftd

color: This field of ftd.shadow stores the color of the shadow to be displayed in both light and dark modes.
x-offset: It is one of the shadow property. It is length value to set the shadow offset. shadow-offset-x specifies the horizontal distance. Negative values place the shadow to the left of the element. By default, this will be set to 0px if not specified.
y-offset: It is one of the shadow property. It is length value to set the shadow offset. shadow-offset-y specifies the vertical distance. Negative values place the shadow above the element. By default, this will be set to 0px if not specified.
blur: It adds blur in shadow. The larger the value of shadow-blur, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. By default, this will be set to 0px if not specified.
spread: It specifies the size of shadow. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. By default, this will be set to 0px if not specified.
inset: This field will make the shadow inset (if provided true). By default, outset shadow will be used if this value is not specified or is given false.

`ftd.mask`

It is or-type type with the following fields.

ftd.mask or-type

-- or-type mask:

-- ftd.mask-image image:

-- ftd.mask-multi multi:

-- end: mask

Lang:

ftd

image: This value will set the mask image and/or the linear gradient. It takes value of type ftd.mask-image which is of record type.
multi: This value will allow you to set multiple properties such as image, size, position, etc. at once.

`ftd.mask-image`

It is record type with the following fields.

ftd.mask-image record

-- record mask-image:
caption ftd.image-src src:
optional ftd.linear-gradient linear-gradient:
optional ftd.color color:

Lang:

ftd

src: This field of ftd.mask-image stores the source of mask image in both light and dark modes.
linear-gradient: This value will set a linear gradient as mask image. It takes value of type ftd.linear-gradient.
color: This field specifies the color for the mask image. It takes ftd.color value and is optional.

`ftd.mask-multi`

It is record type with the following fields.

ftd.mask-multi record

-- record mask-multi:
ftd.mask-image image:
optional ftd.mask-size size:
optional ftd.mask-size size-x:
optional ftd.mask-size size-y:
optional ftd.mask-repeat repeat:
optional ftd.mask-position position:

Lang:

ftd

image: This field of type ftd.mask-image sets the mask image to be used.
size: This field of type ftd.mask-size will set the size of the mask image.
size-x: This field of type ftd.mask-size will set the horizontal length of the mask image.
size-y: This field of type ftd.mask-size will set the vertical length of the mask image.
repeat: This field of type ftd.mask-repeat specifies how background images are repeated.
position: This field of type ftd.mask-position sets the position of the mask image.

`ftd.mask-repeat`

The ftd.mask-repeat property is used to specify how mask images are repeated. It is an or-type which is used with ftd.mask-multi and is optional under it.

ftd.mask-repeat

-- or-type mask-repeat:

-- constant string repeat: repeat
-- constant string repeat-x: repeat-x
-- constant string repeat-y: repeat-y
-- constant string no-repeat: no-repeat
-- constant string space: space
-- constant string round: round

-- end: mask-repeat

Lang:

ftd

As shown above, the ftd.mask-repeat has following variants:

repeat: This value will make the mask image repeat as much as possible in both directions to cover the whole container area. The last image will be clipped if it doesn't fit as per container dimensions.
repeat-x: This value will show similar behaviour as repeat except the fact that the images will be repeated only in x-direction (horizontal direction) and the last image will be clipped if it doesnt fit within the container area.
repeat-y: This value will show similar behaviour as repeat except the fact that the images will be repeated only in y-direction (vertical direction) and the last image will be clipped if it doesnt fit within the container area.
no-repeat: This value will make the image not repeat itself in any direction and hence container area might not get entirely covered in case if the container area is larger than the image itself.
space: This value will make the image repeat itself in both directions just like repeat except the fact that the last images wont be clipped and whitespace will be evenly distributed between the images. The only case where clipping will happen when there is not enough space for a single image.
round: This value will make the background image repeat itself and then are either squished or stretched to fill up the container space leaving no gaps.

`ftd.mask-position`

The ftd.mask-position property is used to specify the positioning of the mask image. It is an or-type which is used with ftd.mask-multi and is optional under it.

ftd.mask-position

-- or-type mask-position:

-- constant string left: left
-- constant string center: center
-- constant string bottom: bottom
-- constant string left-top: left-top
-- constant string left-center: left-center
-- constant string left-bottom: left-bottom
-- constant string center-top: center-top
-- constant string center-center: center-center
-- constant string center-bottom: center-bottom
-- constant string right-top: right-top
-- constant string right-center: right-center
-- constant string right-bottom: right-bottom

-- anonymous record length:

-- ftd.length x:
-- ftd.length y:

-- end: length

-- end: mask-position

Lang:

ftd

As shown above, the ftd.mask-position has following variants:

left- Positions the image to the left of the container.
center- Positions the image to the center of the container.
right- Positions the image to the right of the container.
left-top - Positions the image to the left in horizontal direction and top along the vertical direction of the container.
left-center - Positions the image to the left in horizontal direction and center along the vertical direction of the container.
left-bottom - Positions the image to the left in horizontal direction and bottom along the vertical direction of the container.
center-top - Positions the image to the center in horizontal direction and top along the vertical direction of the container.
center-center - Positions the image to the center in horizontal direction and center along the vertical direction of the container.
center-bottom - Positions the image to the center in horizontal direction and bottom along the vertical direction of the container.
right-top - Positions the image to the right in horizontal direction and top along the vertical direction of the container.
right-center - Positions the image to the right in horizontal direction and center along the vertical direction of the container.
right-bottom - Positions the image to the right in horizontal direction and bottom along the vertical direction of the container.
length - This anonymous record value will set the position value based on the specified x and y values.

`ftd.mask-size`

The ftd.mask-size property is used to specify the dimensions of the mask image. It is an or-type which is used with ftd.mask-multi and is optional under it.

ftd.mask-size

-- or-type mask-size:

-- constant string auto: auto
-- constant string cover: cover
-- constant string contain: contain

-- anonymous record length:

-- ftd.length x:
-- ftd.length y:

-- end: length

-- end: mask-size

Lang:

ftd

As shown above, the ftd.mask-size has following variants:

auto: This value will scale the mask image in the corresponding directions while maintaining the intrinsic proportions of the specified image.
cover: This value will scale the image to the smallest possible size to fill the container area leaving no empty space while preserving its ratio. Image will be cropped for either direction if the container dimensions differ from the image dimensions.
contain: This value will scale the mask image as large as possible within its container area without cropping or stretching the image.
length: This anonymous record value will set the dimensions of the background image based on the specified x and y values.

Built-in Types

Contents

Primitive Types

boolean

integer

decimal

string

caption

body

caption or body

ftd.ui

ftd.color-scheme

children

Derived Types

ftd.linear-gradient

ftd.breakpoint-width-data

ftd.linear-gradient-color

ftd.linear-gradient-directions

ftd.background

ftd.background-image

ftd.background-repeat

ftd.background-position

ftd.background-size

ftd.image-fetch-priority

ftd.color

Example Usage

Using ftd.color in component property

Supported Color Formats

ftd.image-src

Example Usage

Supported image formats

ftd.resizing

Example Usage of ftd.resizing

ftd.length

Example Usage of ftd.length

ftd.length-pair

ftd.type

line-height

size

weight

font-family

letter-spacing

ftd.responsive-type

Example Usage

ftd.align-self

ftd.align

ftd.text-align

ftd.spacing

ftd.anchor

ftd.resize

ftd.overflow

ftd.cursor

ftd.display

ftd.region

ftd.white-space

ftd.type-data

heading-large:

heading-medium:

heading-small:

heading-hero:

heading-tiny:

copy-small:

copy-regular:

copy-large:

fine-print:

blockquote:

source-code:

button-small:

button-medium:

button-large:

button-large:

link:

label-large:

label-small:

ftd.text-transform

ftd.border-style

ftd.loading

ftd.text-input-type

ftd.text-style

ftd.shadow

`boolean`

`integer`

`decimal`

`string`

`caption`

`body`

`caption or body`

`ftd.ui`

`ftd.color-scheme`

`children`

`ftd.linear-gradient`

`ftd.breakpoint-width-data`

`ftd.linear-gradient-color`

`ftd.linear-gradient-directions`

`ftd.background`

`ftd.background-image`

`ftd.background-repeat`

`ftd.background-position`

`ftd.background-size`

`ftd.image-fetch-priority`

`ftd.color`

Using `ftd.color` in component property

`ftd.image-src`

`ftd.resizing`

Example Usage of `ftd.resizing`

`ftd.length`

Example Usage of `ftd.length`

`ftd.length-pair`

`ftd.type`

`line-height`

`size`

`weight`

`font-family`

`letter-spacing`

`ftd.responsive-type`

`ftd.align-self`

`ftd.align`

`ftd.text-align`

`ftd.spacing`

`ftd.anchor`

`ftd.resize`

`ftd.overflow`

`ftd.cursor`

`ftd.display`

`ftd.region`

`ftd.white-space`

`ftd.type-data`

`heading-large`:

`heading-medium`:

`heading-small`:

`heading-hero`:

`heading-tiny`:

`copy-small`:

`copy-regular`:

`copy-large`:

`fine-print`:

`blockquote`:

`source-code`:

`button-small`:

`button-medium`:

`button-large`:

`button-large`:

`link`:

`label-large`:

`label-small`:

`ftd.text-transform`

`ftd.border-style`

`ftd.loading`

`ftd.text-input-type`

`ftd.text-style`

`ftd.shadow`

`ftd.mask`

`ftd.mask-image`

`ftd.mask-multi`

`ftd.mask-repeat`

`ftd.mask-position`

`ftd.mask-size`