Container Box

The <container-box> component is a styled container that provides padding, borders, backgrounds, and border-radius. It's the last container before content.

Properties

Property	Description	Unit	Example
as	Semantic HTML element	enum	as="main"
p	Padding (all sides)	rem	p="2"
pt	Padding top	rem	pt="1"
pr	Padding right	rem	pr="2"
pb	Padding bottom	rem	pb="3"
pl	Padding left	rem	pl="4"
bg	Background color	string	bg="lightblue"
border-w	Border width (all sides)	px	border-w="2"
border-style	Border style (all sides)	string	border-style="solid"
border-color	Border color (all sides)	string	border-color="red"
border-top-w	Border top width	px	border-top-w="2"
border-top-style	Border top style	string	border-top-style="solid"
border-top-color	Border top color	string	border-top-color="red"
border-right-w	Border right width	px	border-right-w="1"
border-right-style	Border right style	string	border-right-style="solid"
border-right-color	Border right color	string	border-right-color="gray"
border-bottom-w	Border bottom width	px	border-bottom-w="2"
border-bottom-style	Border bottom style	string	border-bottom-style="dashed"
border-bottom-color	Border bottom color	string	border-bottom-color="blue"
border-left-w	Border left width	px	border-left-w="1"
border-left-style	Border left style	string	border-left-style="solid"
border-left-color	Border left color	string	border-left-color="green"
border-radius	Border radius	px	border-radius="8"
flex	Flex property	string	flex="1"
w	Width	rem or keyword	w="20"
min-w	Minimum width	rem or keyword	min-w="10"
max-w	Maximum width	rem or keyword	max-w="60"

Width keywords: min-content, max-content

Allowed as values: main, div, footer, header, aside, section, article, nav

All properties (except as) support responsive variants: sm-*, md-*, lg-*, xl-*, 2xl-*

Basic Example

<container-box p="2" bg="lightblue">
  <p>Content with padding and background</p>
</container-box>

Border Example

<container-box 
  p="2" 
  border-w="2" 
  border-style="solid" 
  border-color="black"
  border-radius="8">
  <p>Content with border</p>
</container-box>

Responsive Example

<container-box 
  p="1" 
  bg="orange"
  md-p="2" 
  md-bg="blue"
  lg-p="4"
  lg-bg="purple">
  <p>Padding and color change at breakpoints</p>
</container-box>

Flex Child Example

<container-flexrow gap="2">
  <container-box p="2" bg="lightblue" flex="1">Flex 1</container-box>
  <container-box p="2" bg="lightcoral" flex="2">Flex 2</container-box>
  <container-box p="2" bg="lightgreen" flex="1">Flex 1</container-box>
</container-flexrow>

Individual Border Sides

<!-- Border on specific sides only -->
<container-box 
  p="2" 
  bg="white"
  border-bottom-w="2" 
  border-bottom-style="solid" 
  border-bottom-color="blue">
  <p>Bottom border only</p>
</container-box>

<!-- Different borders on different sides -->
<container-box 
  p="2"
  bg="white"
  border-top-w="3"
  border-top-style="solid"
  border-top-color="red"
  border-bottom-w="1"
  border-bottom-style="dashed"
  border-bottom-color="gray">
  <p>Thick top border, thin dashed bottom border</p>
</container-box>

<!-- Responsive border sides -->
<container-box 
  p="2"
  bg="white"
  border-bottom-w="2"
  border-bottom-style="solid"
  border-bottom-color="#ddd"
  md-border-bottom-w="0"
  md-border-right-w="2"
  md-border-right-style="solid"
  md-border-right-color="#ddd">
  <p>Bottom border on mobile, right border on desktop</p>
</container-box>

Width Examples

<!-- Fixed width in rem -->
<container-box w="30" p="2" bg="lightblue">
  <p>This box is 30rem wide</p>
</container-box>

<!-- Max width constraint -->
<container-box max-w="50" p="2" bg="lightgreen">
  <p>This box has a maximum width of 50rem</p>
</container-box>

<!-- Min width constraint -->
<container-box min-w="20" p="2" bg="lavender">
  <p>This box has a minimum width of 20rem</p>
</container-box>

<!-- Responsive width -->
<container-box 
  md-w="40" 
  lg-max-w="60" 
  p="2" 
  bg="lightyellow">
  <p>Full width on mobile (default), 40rem on medium screens, max 60rem on large</p>
</container-box>

<!-- Using width keywords -->
<container-box w="min-content" p="2" bg="lightcyan">
  <p>Width based on minimum content size</p>
</container-box>

Semantic HTML Example

<!-- Renders as <header> element -->
<container-box as="header" p="2" bg="lightgray">
  <h1>Site Header</h1>
</container-box>

<!-- Renders as <nav> element -->
<container-box as="nav" p="1" border-bottom-w="1" border-bottom-style="solid">
  <a href="/">Home</a>
  <a href="/about">About</a>
</container-box>

<!-- Renders as <article> element -->
<container-box as="article" p="2" border-w="1" border-style="solid">
  <h2>Article Title</h2>
  <p>Article content goes here...</p>
</container-box>

<!-- Renders as <footer> element -->
<container-box as="footer" p="1" bg="#000">
  <p>Footer content</p>
</container-box>