A ftd.container is a generalized container component where the user will be deciding how it should be behaving. So unlike other ftd containers like ftd.row and ftd.column which have some pre-defined behavior, the users will have the capability to control the behavior of this ftd.container which won't be imposing any pre-defined behavior.

ℹ️

container

Make sure to close your container using the end syntax. This is mandatory.

-- end: <container-name>

Usage

-- ftd.container:

;; << Child components >>

-- end: ftd.container

Lang:

ftd

Attributes

Container accepts the container root attributes as well all the common attributes .

Example

Sample code using ftd.container

Input

-- ftd.container:
color: $inherited.colors.text

-- ftd.text: Hello
display: inline

-- ftd.text: World
display: inline
color: $red-yellow

-- end: ftd.container

Lang:

ftd

Output

Hello

World

In the above example, container is created which contains two text components. Two ftd.text components are displayed side by side since their display behavior is inline.