Container

The .container^[docs] function generates a highly customizable blocks of content, along with resetting the current layout rules back to normal.

---

Image you want to make a row with two columns, each one with a heading and some text below. The following is what a novice might attempt:

<!-- WRONG! -->
.row alignment:{center} gap:{1cm}
  ## Left
  Text on left column.
    
  ## Right
  Text on right column.

As mentioned in the Stacks page:

In order to understand which elements they [stack functions] must handle, they rely on the strict Markdown concept of block, an isolated chunk of the document [...]

Rendering the previous snippet brings us to this (incorrect) result:

Some may then use columns:

<!-- Could be improved -->
.row alignment:{center} gap:{1cm}
  .column cross:{start}
    ## Left
    Text on left column.
    
  .column cross:{start}
    ## Right
    Text on right column.

This works, but the concept isn't really correct: we don't want some layout rule, we just want to reset the document flow back to normal.
This is what the container layout does: grouping elements together according to the natural flow of the document.

<!-- Correct! -->
.row alignment:{center} gap:{1cm}
  .container
    ## Left
    Text on left column.
    
  .container
    ## Right
    Text on right column.

Result:

Styling

Optional parameters:

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 content.	Sizes	(none)
padding	Whitespace around content.	Sizes	(none)
radius	Corner/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 all details.		(none)

 

.container 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.