Want to try fastn for your company's website?

Explore

Get Started

`ftd.rive` (animation)

Container Root Attributes

`import`

Using export/exposing

Functions

Built-in Functions

Built-in Rive Functions

Built-in Local Storage Functions

Built-in Variables

`ftd` Events

Rive Events

Use color scheme package

How to make page responsive

Using JS

JS in function

Web Component

Create `fastn` package

Same argument & attribute types

`ftd.column`

A column is a container component that stacks a list of children vertically.

ℹ️

column

Make sure to close your column container using the `end` syntax. This is mandatory. `-- end: <container-name>`

Usage

-- ftd.column:

;; &lt;Child components>

-- end: ftd.column

Lang:

ftd

Attributes

`ftd.column` accepts the [container root attributes](ftd/container-root-attributes/), [container attributes](ftd/container-attributes/) as well all the [common attributes](ftd/common/).

Example

-- ftd.column:
spacing.fixed.px: 20

-- ftd.text: Hello

-- ftd.text: World

-- end: ftd.column

Lang:

ftd

In this example, a column container is created with a fixed spacing of 20 pixels between the child components. Two `ftd.text` components are then placed within the row, which will be vertically stacked with the specified spacing.

Output

Hello

World