fun RenderContext.stackUp(styling: FlexParams.() -> Unit = {}, baseClass: StyleClass? = null, id: String? = null, prefix: String = "stack-up", build: StackUpComponent.() -> Unit = {}): Div

This layout component enables the vertical stacking of child components.

The component itself does not do anything special besides offering a context for child components, that will be rendered vertically from top to bottom. You can configure the spacing between the items and invert the order the child items are rendered.

stackUp {
spacing { large } // define a margin between two items
items { // open a sub context for adding arbitrary HTML elements or other components!
p { +"Some text paragraph" }
p { +"Another text section }
// go on for arbitrary other HTML elements!

Pay attention tp always set the child items within the `items` expression and not directly within the StackComponent context. You won't get an error, but the child items are rendered falsy if applied wrong!


a Div element in order to use this component as top level element of an UI part. This way it can be directly integrated into one of the render functions!

See also



optional CSS class that should be applied to the element


a lambda expression for setting up the component itself. Details in StackComponent


the ID of the element


the prefix for the generated CSS class resulting in the form `$prefix-$hash`


a lambda expression for declaring the styling as fritz2's styling DSL