Skip to content
Paramanu v0.1.0-alpha.0

Box

Box is the most basic layout building block. It maps common CSS layout properties to BEM modifier classes using the design token spacing scale.

Basic Usage

Box with padding
import { Box } from "@paramanu/primitives-react"


export default function App() {
return <Box p="4" style={{ border: "1px dashed #ccc" }}>Box with padding</Box>
}
<div class="pm-box pm-box--p-4" style="border: 1px dashed #ccc;">Box with padding</div>

Padding

p-2
p-4
p-6
import { Box } from "@paramanu/primitives-react"


export default function App() {
return (
  <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
    <Box p="2" style={{ border: "1px dashed #ccc" }}>p-2</Box>
    <Box p="4" style={{ border: "1px dashed #ccc" }}>p-4</Box>
    <Box p="6" style={{ border: "1px dashed #ccc" }}>p-6</Box>
  </div>
)
}
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
<div class="pm-box pm-box--p-2" style="border: 1px dashed #ccc;">p-2</div>
<div class="pm-box pm-box--p-4" style="border: 1px dashed #ccc;">p-4</div>
<div class="pm-box pm-box--p-6" style="border: 1px dashed #ccc;">p-6</div>
</div>

Display

Item 1
Item 2
Item 3
import { Box } from "@paramanu/primitives-react"


export default function App() {
return (
  <Box display="flex" p="4" style={{ border: "1px dashed #ccc", gap: "8px" }}>
    <div style={{ background: "#e2e8f0", padding: "8px" }}>Item 1</div>
    <div style={{ background: "#e2e8f0", padding: "8px" }}>Item 2</div>
    <div style={{ background: "#e2e8f0", padding: "8px" }}>Item 3</div>
  </Box>
)
}
<div class="pm-box pm-box--d-flex pm-box--p-4" style="border: 1px dashed #ccc; gap: 8px;">
<div style="background: #e2e8f0; padding: 8px;">Item 1</div>
<div style="background: #e2e8f0; padding: 8px;">Item 2</div>
<div style="background: #e2e8f0; padding: 8px;">Item 3</div>
</div>

Overflow

This content will be clipped when it overflows. 
import { Box } from "@paramanu/primitives-react"


export default function App() {
return (
  <Box p="4" overflow="hidden" style={{ border: "1px dashed #ccc", width: 200, height: 80 }}>
    This content will be clipped when it overflows.
  </Box>
)
}
<div class="pm-box pm-box--p-4 pm-box--overflow-hidden" style="border: 1px dashed #ccc; width: 200px; height: 80px;">
This content will be clipped when it overflows.
</div>