/
On this page
Container
The .container docs ↗ function creates a highly customizable block of content, and resets the current layout rules back to normal.
Layout reset
Example 1
Imagine you want to create a row with two columns, each containing a heading and some text. A beginner might try the following wrong approach. As explained in the Stacks page, stack functions rely on the strict Markdown concept of a block, an isolated chunk of the document, to determine which elements they handle.
<!-- WRONG! -->
.row alignment:{center} gap:{1cm}
##! Left
Text on left column.
##! Right
Text on right column.Left
Text on left column.
Right
Text on right column.
Example 2
You might then try using columns. This works, but the concept is not quite right. You do not want a layout rule; you just want to reset the document flow back to normal. This is exactly what the container does: it groups elements together according to the natural flow of the document.
<!-- Could be improved -->
.row alignment:{center} gap:{1cm}
.column cross:{start}
##! Left
Text on left column.
.column cross:{start}
##! Right
Text on right column.Left
Text on left column.
Right
Text on right column.
Example 3
The correct way to achieve the desired layout is to use containers. Each container resets the layout rules, allowing the row to treat them as separate blocks of content.
<!-- Correct! -->
.row alignment:{center} gap:{1cm}
.container
##! Left
Text on left column.
.container
##! Right
Text on right column.Left
Text on left column.
Right
Text on right column.
Styling
The following optional parameters are available:
| Parameter | Description | Accepts | Default |
|---|---|---|---|
width | Box width constraint. | Size | No constraint |
height | Box height constraint. | Size | No constraint |
fullwidth | Whether to take up the parent’s full width. Overridden by width. | Boolean | False |
foreground | Text color. | Color | Document’s default |
background | Background color. | Color | None |
border | Border color. | Color | Browser’s default if borderwidth is set, none otherwise |
borderwidth | Border size. | Sizes | Browser’s default if border is set, none otherwise |
borderstyle | Border type. | normal, dashed, dotted, double | normal if border or borderwidth is set, none otherwise |
margin | Whitespace outside the content. | Sizes | None |
padding | Whitespace around the content. | Sizes | None |
radius | Corner or border radius. | Sizes | None |
alignment | Content alignment. | start, center, end | Browser’s default |
textalignment | Text alignment. | start, center, end, justify | Browser’s default |
fontsize, fontweight, fontstyle, fontvariant, textdecoration, textcase | Text transformation. See Advanced text formatting for details. | None | |
classname | Custom CSS class name. | String | None |
Example 4
.container fullwidth:{yes} borderstyle:{dashed} padding:{1cm} fontsize:{medium} fontstyle:{italic} fontvariant:{smallcaps}
This is a styled container. Fancy, isn't it?
Quarkdown can truly give life to complex layouts with ease.This is a styled container. Fancy, isn’t it?
Quarkdown can truly give life to complex layouts with ease.