common.ftd

-- import: ftd.dev/assets
-- import: fastn

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


-- my-ds.page: Common Kernel Attributes

-- ds.markdown: 

These attributes are available to all `ftd` "kernel" components.


-- ds.h1: `color:` [`ftd.color`](/built-in-types/#ftd-color)

-- ds.markdown:

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


-- ds.code: specifying color
lang: ftd

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

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


-- ds.markdown:

This will render like this:


-- ds.output:

-- ftd.text: FifthTry
color: $red

-- end: ds.output

-- ds.h1: `background.solid:` [`ftd.color`](/built-in-types/#ftd-color)

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


-- ds.code: specifying background.solid
lang: ftd

\-- ftd.text: FifthTry
background.solid: $red


-- ds.markdown:

This will render like this:


-- ds.output:

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

-- end: ds.output

-- ds.h1: `title: Optional String`

This is used to create
[title attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title)
on generated DOM.

-- ds.h1: `border-width.px: Integer`

Use this property to specify the width of the border. By default the `border-width`
is zero, and is not visible.


-- ds.code: specifying border width
lang: ftd

\-- ftd.text: FifthTry
border-width.px: 2


-- ds.markdown:

This will render like this:


-- ds.output:

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

-- end: ds.output


-- ds.h1: `border-top-width.px: Integer`

The border-top property sets the width of an element's top border.


-- ds.code: specifying border width
lang: ftd

\-- ftd.text: FifthTry
border-top-width.px: 2


-- ds.markdown:

This will render like this:

-- ds.output:

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

-- end: ds.output


-- ds.h1: `border-bottom-width.px: Integer`

The border-bottom property sets the width of an element's bottom border.


-- ds.code: specifying border width
lang: ftd

\-- ftd.text: FifthTry
border-bottom-width.px: 2


-- ds.markdown:

This will render like this:

-- ds.output:

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

-- end: ds.output


-- ds.h1: `border-left-width.px: Integer`

The border-left property sets the width of an element's left border.


-- ds.code: specifying border width
lang: ftd

\-- ftd.text: FifthTry
border-left-width.px: 2


-- ds.markdown:

This will render like this:

-- ds.output:

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

-- end: ds.output


-- ds.h1: `border-right-width.px: Integer`

The border-right property sets the width of an element's right border.


-- ds.code: specifying border width
lang: ftd

\-- ftd.text: FifthTry
border-right-width.px: 2


-- ds.markdown:

This will render like this:

-- ds.output:

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

-- end: ds.output


-- ds.h1: `;; border-style: String`

The border-style property sets the style of an element's borders.


-- ds.code: specifying border width
lang: ftd

\-- ftd.text: FifthTry
;; border-style: dashed
border-width.px: 2


-- ds.markdown:

This will render like this:

-- ds.output:

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

-- end: ds.output


-- ds.h1: `border-color:` [`ftd.color`](/built-in-types/#ftd-color)

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


-- ds.code:
lang: ftd

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

\-- ftd.text: FifthTry
border-width.px: 2
border-color: $red


-- ds.markdown:

This will render like this:

-- ds.output:

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

-- end: ds.output


-- ds.h1: `border-radius.px: Integer`

The border-radius property defines the radius of the element's corners.


-- ds.code:
lang: ftd

\-- ftd.text: FifthTry
border-width.px: 2
border-radius.px: 50


-- ds.markdown:

This will render like this:

-- ds.output:

-- ftd.text: FifthTry
border-width.px: 2
color: $inherited.colors.text
border-radius.px: 50

-- end: ds.output



-- ds.h1: `border-top-left-radius.px: Integer`

The border-top-left-radius property defines the radius of the top left corner.


-- ds.code:
lang: ftd

\-- ftd.text: FifthTry
border-width.px: 2
border-top-left-radius.px: 50


-- ds.markdown:

This will render like this:

-- ds.output:

-- ftd.text: FifthTry
border-width.px: 2
color: $inherited.colors.text
border-top-left-radius.px: 50

-- end: ds.output


-- ds.h1: `border-top-right-radius.px: Integer`

The border-top-right-radius property defines the radius of the top right corner.


-- ds.code:
lang: ftd

\-- ftd.text: FifthTry
border-width.px: 2
border-top-right-radius.px: 50


-- ds.markdown:

This will render like this:

-- ds.output:

-- ftd.text: FifthTry
border-width.px: 2
color: $inherited.colors.text
border-top-right-radius.px: 50

-- end: ds.output


-- ds.h1: `border-bottom-left-radius.px: Integer`

The border-bottom-radius property defines the radius of the bottom left corner.


-- ds.code:
lang: ftd

\-- ftd.text: FifthTry
border-width.px: 2
border-bottom-left-radius.px: 50


-- ds.markdown:

This will render like this:

-- ds.output:

-- ftd.text: FifthTry
border-width.px: 2
color: $inherited.colors.text
border-bottom-left-radius.px: 50

-- end: ds.output



-- ds.h1: `border-bottom-right-radius.px: Integer`

The border-bottom-right-radius property defines the radius of the bottom right 
corner.


-- ds.code:
lang: ftd

\-- ftd.text: FifthTry
border-width.px: 2
border-bottom-right-radius.px: 50


-- ds.markdown:

This will render like this:

-- ds.output:

-- ftd.text: FifthTry
border-width.px: 2
color: $inherited.colors.text
border-bottom-right-radius.px: 50

-- end: ds.output


-- ds.h1: `padding.px: Integer`

Padding is used to create space around an element's content, inside of any defined borders.


-- ds.code:
lang: ftd

\-- ftd.text: FifthTry
padding.px: 60
border-width.px: 2


-- ds.markdown:

This will render like this:

-- ds.output:

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

-- end: ds.output


-- ds.h1: `padding-vertical.px: Integer`

This gives top and bottom padding.


-- ds.code:
lang: ftd

\-- ftd.text: FifthTry
padding-vertical.px: 60


-- ds.markdown:

This will render like this:

-- ds.output:

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

-- end: ds.output



-- ds.h1: `padding-horizontal.px: Integer`

This gives left and right padding.


-- ds.code:
lang: ftd

\-- ftd.text: FifthTry
padding-horizontal.px: 60


-- ds.markdown:

This will render like this:

-- ds.output:

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

-- end: ds.output


-- ds.h1: `padding-left.px: Integer`

This gives left padding.


-- ds.code:
lang: ftd

\-- ftd.text: FifthTry
padding-left.px: 60


-- ds.markdown:

This will render like this:

-- ds.output:

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

-- end: ds.output


-- ds.h1: `padding-right.px: Integer`

This gives right padding.


-- ds.code:
lang: ftd

\-- ftd.text: FifthTry
padding-right.px: 60


-- ds.markdown:

This will render like this:

-- ds.output:

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

-- end: ds.output



-- ds.h1: `padding-top.px: Integer`

This gives top padding.


-- ds.code:
lang: ftd

\-- ftd.text: FifthTry
padding-top.px: 60


-- ds.markdown:

This will render like this:

-- ds.output:

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

-- end: ds.output



-- ds.h1: `padding-bottom.px: Integer`

This gives bottom padding.


-- ds.code:
lang: ftd

\-- ftd.text: FifthTry
padding-bottom.px: 60


-- ds.markdown:

This will render like this:

-- ds.output:

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

-- end: ds.output


-- ds.h1: `width.fixed.px: Integer`

The width property sets the fixed width of an element.

The width of an element does not include padding, borders, or margins.
It takes the [length values](/built-in-types/#length-string)


-- ds.code:
lang: ftd

\-- ftd.text: FifthTry
width.fixed.px: 200


-- ds.markdown:

This will render like this:

-- ds.output:

-- ftd.text: FifthTry
width.fixed.px: 200
color: $inherited.colors.text
border-width.px: 2

-- end: ds.output


-- ds.h1: `min-width: String`

The min-width property defines the minimum width of an element.
It takes the [length values](/built-in-types/#length-string)

If the content is smaller than the minimum width, the minimum width will be applied.

If the content is larger than the minimum width, the min-width property has no effect.


-- ds.code:
lang: ftd

\-- ftd.text: FifthTry
min-width: fill-container


-- ds.markdown:

This will render like this:

-- ds.output:

-- ftd.text: FifthTry
min-width: fill-container
color: $inherited.colors.text
border-width.px: 2

-- end: ds.output


-- ds.h1: `max-width: String`

The max-width property defines the maximum width of an element.
It takes the [length values](/built-in-types/#length-string)

If the content is larger than the maximum width, it will automatically change the height of the element.

If the content is smaller than the maximum width, the max-width property has no effect.


-- ds.code:
lang: ftd

\-- ftd.text: FifthTry
max-width: fill-container


-- ds.markdown:

This will render like this:

-- ds.output:

-- ftd.text: FifthTry
max-width: fill-container
color: $inherited.colors.text
border-width.px: 2

-- end: ds.output


-- ds.h1: `height: String`

The height property sets the height of an element.

The height of an element does not include padding, borders, or margins.
It takes the [length values](/built-in-types/#length-string)


-- ds.code:
lang: ftd

\-- ftd.text: FifthTry
height: fill-container


-- ds.markdown:

This will render like this:

-- ds.output:

-- ftd.text: FifthTry
height: fill-container
color: $inherited.colors.text
border-width.px: 2

-- end: ds.output


-- ds.h1: `min-height: String`

The min-height property defines the minimum height of an element.
It takes the [length values](/built-in-types/#length-string)

If the content is smaller than the minimum height, the minimum height will be applied.

If the content is larger than the minimum height, the min-width property has no effect.


-- ds.code:
lang: ftd

\-- ftd.text: FifthTry
min-height: fill-container


-- ds.markdown:

This will render like this:

-- ds.output:

-- ftd.text: FifthTry
min-height: fill-container
color: $inherited.colors.text
border-width.px: 2

-- end: ds.output


-- ds.h1: `max-height: String`

The max-height property defines the maximum height of an element.
It takes the [length values](/built-in-types/#length-string)

If the content is larger than the maximum height, it will automatically change the height of the element.

If the content is smaller than the maximum height, the max-height property has no effect.


-- ds.code:
lang: ftd

\-- ftd.text: FifthTry
max-height: fill-container


-- ds.markdown:

This will render like this:

-- ds.output:

-- ftd.text: FifthTry
max-height: fill-container
color: $inherited.colors.text
border-width.px: 2

-- end: ds.output

-- ds.h1: `overflow-x: String`

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 at the
left and right edges. It takes the following values:

- hidden
- visible
- auto
- scroll


-- ds.code:
lang: ftd

\-- ftd.text:
background.solid: $red
width.fixed.px: 150
height.fixed.px: 100
overflow-x: scroll

Lorem ipsum dolor sit amet, and a veryveryveryveryveryverylong
word consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat


-- ds.markdown:

This will render like this:

-- ds.output:

-- ftd.text:
color: $inherited.colors.text-strong
background.solid: $red
width.fixed.px: 150
height.fixed.px: 100
overflow-x: scroll

Lorem ipsum dolor sit amet, and a veryveryveryveryveryverylong
word consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat


-- end: ds.output


-- ds.h1: `overflow-y: String`

The overflow-y property specifies whether to clip the content,
add a scroll bar, or display overflow content of a block-level element,
when it overflows at the top and bottom edges. It takes the following values:

- hidden
- visible
- auto
- scroll


-- ds.code:
lang: ftd

\-- ftd.text:
background.solid: $red
width.fixed.px: 150
height.fixed.px: 100
overflow-y: scroll

Lorem ipsum dolor sit amet, and a veryveryveryveryveryverylong
word consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat


-- ds.markdown:

This will render like this:

-- ds.output:

-- ftd.text:
color: $inherited.colors.text-strong
background.solid: $red
width.fixed.px: 150
height.fixed.px: 100
overflow-y: scroll

Lorem ipsum dolor sit amet, and a veryveryveryveryveryverylong
word consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat

-- end: ds.output

-- ds.h1: `cursor: String`

You can set the cursor to be shown over any element by using `cursor` attribute:


-- ds.code:
lang: ftd

\-- ftd.row:
width: fill
border-width.px: 5
border-color: $inherited.colors.text
padding.px: 10
cursor: pointer

\-- ftd.text: this row has pointer as cursor
align: center
width: fill

\-- end: ftd.row



-- ds.markdown:

We support the same format as [CSS cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor).

-- ds.markdown:

This will render like this:

-- ds.output:

-- ftd.row:
width: fill-container
border-width.px: 5
border-color: $inherited.colors.text
padding.px: 10
cursor: pointer


-- ftd.text: this row has pointer as cursor
align-self: center
width: fill-container
color: $inherited.colors.text

-- end: ds.output


-- ds.h1: `link: String`

This converts the element to a hyper link.


-- ds.code:
lang: ftd

\-- ftd.text: google
link: https://www.google.com


-- ds.markdown:

This will render like this:

-- ds.output:

-- ftd.text: google
link: https://www.google.com


-- ds.h1: `open-in-new-tab: boolean, default=False`

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

-- end: ds.output


-- ds.code:
lang: ftd

\-- ftd.text: google
link: https://www.google.com
open-in-new-tab: true


-- ds.markdown:

Which will render like this:

-- ds.output:

-- ftd.text: google (opens in new tab)
link: https://www.google.com
open-in-new-tab: true

-- end: ds.output


/-- ds.h1: `submit: Option<String>`

If `submit` is passed, clicking on it issues a POST request on the provided URL.


/-- ds.code:
lang: ftd

\-- ftd.text: test post
submit: https://httpbin.org/post?x=10


/-- ds.markdown:

Renders as:

/-- ds.output:

/-- ftd.text: test post
submit: https://httpbin.org/post?x=10
color: $inherited.colors.text

/-- ds.markdown:

Note: Be careful about CSRF when using this feature. If the URL is dynamically 
generated, include some CSRF token for example.

Note: both `link` and `submit` can not be provided.


-- ds.h1: `region`

This is the [ARIA Region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles)
role that UI element is playing. Valid values are:


-- ds.h2: `h0`, `h1`, till `h7`


-- ds.code:
lang: ftd

\-- ftd.text: hello
region: h1


/-- ds.markdown:

This tells this is a heading with the given level.


/-- ds.h1: `background-gradient`

To add gradient please use the below gradient properties.


/-- ds.h2: `gradient-direction:  Direction`

Below are the supported Direction type

- bottom to top
- top to bottom
- left to right
- right to left
- bottom-right to top-left
- bottom-left to top-right
- top-right to bottom-left
- top-left to bottom-right
- center
- angle Integer


/-- ds.h2: `gradient-colors: List Color`


/-- ds.h3: Code sample.


/-- ds.code: Left to right gradient
lang: ftd

\-- ftd.row:
width: 400
height: 200
gradient-direction: left to right
gradient-colors: red , blue

\-- end: ftd.row


/-- ds.output:


/-- ftd.row:
width.fixed.px: 400
height.fixed.px: 200
gradient-direction: left to right
gradient-colors: red , blue


/-- ds.markdown:

You can also make a gradient diagonally. 
Following example shows a gradient that starts at bottom left and goes to 
top right.


/-- ds.code: Diagonal Gradient
lang: ftd

\-- ftd.row:
width: 400
height: 200
gradient-direction: bottom-left to top-right
gradient-colors: yellow, orange

\-- end: ftd.row


/-- ds.output:


/-- ftd.row:
width.fixed.px: 400
height.fixed.px: 200
gradient-direction: bottom-left to top-right
gradient-colors: yellow, orange



/-- ds.markdown:

Gradient with multiple colors


/-- ds.code: Multiple colors.
lang: ftd

\-- ftd.row:
width: 400
height: 200
gradient-direction: left to right
gradient-colors: red, green, blue, yellow, black

\-- end: ftd.row


/-- ds.output:


/-- ftd.row:
width.fixed.px: 400
height.fixed.px: 200
gradient-direction: left to right
gradient-colors: red, green, blue, yellow, black


/-- ds.markdown:

Radial gradient that starts from the centre.


/-- ds.code: Radial gradient
lang: ftd

\-- ftd.row:
width: 400
height: 200
gradient-direction: center
gradient-colors: red, green

\-- end: ftd.row


/-- ds.output:


/-- ftd.row:
width: 400
height: 200
gradient-direction: center
gradient-colors: red, green


/-- ds.markdown:

For more control you can use angle instead of the pre-defined directions.
A value of 0deg is equivalent to "bottom to top". A value of 90deg is equivalent 
to "left to right". A value of 180deg is equivalent to "top to bottom".


/-- ds.code: With Angle
lang: ftd

\-- ftd.row:
width: 400
height: 200
gradient-direction: angle 90
gradient-colors: red, green

\-- end: ftd.row


/-- ds.output:


/-- ftd.row:
width: 400
height: 200
gradient-direction: angle 90
gradient-colors: red, green


/-- ds.markdown:

More examples with angle


/-- ds.code: With 45deg Angle
lang: ftd

\-- ftd.row:
width: 400
height: 200
gradient-direction: angle 45
gradient-colors: red, green

\-- end: ftd.row


/-- ds.output:


/-- ftd.row:
width: 400
height: 200
gradient-direction: angle 45
gradient-colors: red, green


/-- ds.h1: `background-image: String`

`background-image` accepts a url as the value. Use this property to make an image 
as background of a container.


/-- ds.code: Container with background image
lang: ftd

\-- ftd.row:
width: fill
height: 300
background-image: https://imgur.com/oCHWQQF.jpg

\-- ftd.text: Sample Text
role: $fastn.type.heading-large
align: center
color: $inherited.colors.text

\-- end: ftd.row


/-- ds.output:


/-- ftd.row:
width: fill
height: 300
background-image: $assets.files.images.oCHWQQF.jpg


/-- ftd.text: Sample Text
role: $fastn.type.heading-large
align: center
color: $inherited.colors.text
width: fill
height: fill


/-- ds.h1: `background-repeat: boolean`

If you are using background-image property, you can also background-repeat
property to true to repeat the image until the container is filled.

This property is usually helpful when you have a small image of a pattern you
want to fill the container with that pattern.


/-- ds.code: background image with background-repeat
lang: ftd

\-- ftd.row:
width: fill
height: 300
background-image: https://imgur.com/LnJ4ziC.png
background-repeat: true

\-- ftd.text: Sample Text
role: $fastn.type.heading-large
align: center
color: $inherited.colors.text
width: fill
height: fill

\-- end: ftd.row


/-- ds.output:


/-- ftd.row:
width: fill
height: 300
background-image: $assets.files.images.LnJ4ziC.png
background-repeat: true


/-- ftd.text: Sample Text
role: $fastn.type.heading-large
align: center
color: $inherited.colors.text
width: fill
height: fill

/-- ds.h1: `background-parallax: boolean`

To achieve parallax effect on your container. Make `background-parallax` property
to true.


/-- ds.code: Container with parallax effect
lang: ftd

\-- ftd.row:
width: fill
height: 300
background-image: https://imgur.com/oCHWQQF.jpg
background-parallax: true

\-- ftd.text: Sample Text
role: $fastn.type.heading-large
align: center
color: $inherited.colors.text

\-- end: ftd.row

/-- ds.output:


/-- ftd.row:
width: fill
height: 300
background-image: $assets.files.images.oCHWQQF.jpg
background-parallax: true


/-- ftd.text: Sample Text
role: $fastn.type.heading-large
align: center
color: $inherited.colors.text
width: fill
height: fill


/-- ds.h1: `sticky: boolean`

An element with sticky; is positioned based on the user's scroll position.


/-- ds.code:
lang: ftd

\-- ftd.text: FifthTry
sticky: true



-- ds.h1: `anchor: String`

It specifies type of positioning of the element relative to it's
parent/ancestor or window

It accepts two values:

- `parent`: The element is positioned relative to the immediate ancestor.
- `window`: The element is positioned relative to the viewport, which means
   it always stays in the same place even if the page is scrolled.

The top, right, bottom, and left properties are used to position the element.
These properties are described later.


-- ds.code:
lang: ftd

\-- ftd.text: FifthTry
top: 1

/-- ds.h1: `shadow-offset-x: Integer`

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.


/-- ds.code:
lang: ftd

\-- ftd.text: FifthTry
shadow-offset-x: 1


/-- ds.h1: `shadow-offset-y: Integer`

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.


/-- ds.code:
lang: ftd

\-- ftd.text: FifthTry
shadow-offset-y: 1


/-- ds.h1: `shadow-blur: Integer`

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.


/-- ds.code:
lang: ftd

\-- ftd.text: FifthTry
shadow-blur: 4


/-- ds.h1: `shadow-size: Integer`

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.


/-- ds.h1: `shadow-color:` [`ftd.color`](/built-in-types/#ftd-color)

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


/-- ds.code: specifying color
lang: ftd

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

\-- ftd.text: FifthTry
shadow-color: $red


/-- ds.markdown:

Let's combine all shadow properties and see the output.


/-- ds.code:
lang: ftd

\-- ftd.text: FifthTry
shadow-offset-x: 14
shadow-offset-y: 10
shadow-blur: 5
shadow-size: 4
shadow-color: $yellow
padding.px: 20
background.solid: $red



/-- ds.output:

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

/-- ftd.text: FifthTry
shadow-offset-x: 14
shadow-offset-y: 10
shadow-blur: 5
shadow-size: 4
shadow-color: $yellow
padding.px: 20
background.solid: $red
color: $inherited.colors.text-strong

-- ds.h1: `z-index: Integer`

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an
element with a lower stack order.

[Read more](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index)


-- ds.code: specifying z-index
lang: ftd

\-- ftd.column:
padding.px: 80

\-- ftd.text: FifthTry Red
z-index: 1
background.solid: $red
left.px: 20
top.px: 20
padding.px: 40
anchor: parent

\-- ftd.text: FifthTry Yellow
z-index: 2
background.solid: $yellow
left.px: 40
top.px: 40
padding.px: 40
anchor: parent

\-- end: ftd.column


-- ds.output:

-- ftd.column:
padding.px: 80

-- ftd.text: FifthTry Red
z-index: 1
background.solid: $red
left.px: 20
top.px: 20
padding.px: 40
anchor: parent

-- ftd.text: FifthTry Yellow
z-index: 2
background.solid: $inherited.colors.custom.one
left.px: 40
top.px: 40
padding.px: 40
anchor: parent


-- end: ds.output


-- ds.h1: `white-space: String`

The white-space CSS property sets how white space inside an
element is handled.

[Read more](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space)


-- ds.code: specifying white-space
lang: ftd

\-- ftd.text:
white-space: pre-wrap

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


-- ds.output:

-- ftd.text:
white-space: pre-wrap
color: $inherited.colors.text

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


-- end: ds.output


-- ds.h1: `text-transform: String`

The text-transform CSS property specifies how to capitalize an element's
text. It can be used to make text appear in all-uppercase or all-lowercase,
or with each word capitalized. It also can help improve legibility for ruby.

[Read more](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform)


-- ds.code: specifying text-transform
lang: ftd

\-- ftd.text:
text-transform: capitalize

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

-- end: ds.output

-- ds.output:

-- ftd.text:
text-transform: capitalize
color: $inherited.colors.text

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

-- end: ds.output

-- end: my-ds.page