> ## Documentation Index
> Fetch the complete documentation index at: https://www.propeldata.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Layout
> Working with layout components.
Layout components are used to separate layout responsibilities from content and interactivity.
This is *the* separation of concerns that makes your dashboard maintainable and easy to reason about, and understanding these principles is key to building your interfaces effectively.
### Box
```jsx theme={"system"}
import { Box } from "@propeldata/ui-kit";
```
Box is the most fundamental layout component.
Box is used to:
* Provide spacing to child elements.
* Impose sizing constraints on content.
* Control layout behavior within flex and grid containers.
* Hide content based on screen size using its responsive `display` prop.
### Flex
```jsx theme={"system"}
import { Box } from "@propeldata/ui-kit";
```
Flex component does everything that Box can do, but comes with an additional set of props to organize items along an axis. It provides convenient access to the CSS [flexbox properties](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
### Grid
The Grid component is used to organize the content in columns and rows. Like Box and Flex, it's made to provide convenient access to the underlying CSS [grid properties](https://css-tricks.com/snippets/css/complete-guide-grid/) without any magic of its own.
```jsx theme={"system"}
import { Grid } from "@propeldata/ui-kit";
```
### Section
```jsx theme={"system"}
import { Section } from "@propeldata/ui-kit";
```
The Section component adds consistent vertical spacing between major page sections, helping establish visual hierarchy. It offers a few predefined spacing sizes to maintain simplicity and consistency throughout your layout.
### Container
```jsx theme={"system"}
import { Container } from "@propeldata/ui-kit";
```
Container's sole responsibility is to provide a consistent `max-width` to the content it wraps. Like Section, it comes just with a couple of pre-defined sizes that work well with common breakpoints and typical content widths for comfortable reading.
### Card
```jsx theme={"system"}
import { Card } from "@propeldata/ui-kit";
```
The Card component is used to display content in a card-like format.
```jsx theme={"system"}
Card headingCard content
```
### Tabs
```jsx theme={"system"}
import { Tabs } from "@propeldata/ui-kit";
```
Organize content sections to be displayed one at a time.
```jsx theme={"system"}
DashboardOrdersView key metrics and KPIs for your business.View incoming orders.
```
### Tab Cards
```jsx theme={"system"}
import { Tabs } from "@propeldata/ui-kit";
```
Organize content sections to be displayed one at a time triggered by clicking on cards.
```jsx theme={"system"}
Revenue Orders Metric 1 Revenue contentOrders contentAverage Order content
```
***
## Common layout props
Each layout component has a set of it's own specialized props and also a shared set of common layout props. All layout props support [responsive object values](/docs/embeddable-ui/themes/breakpoints).
### Padding
Padding props can access the [space scale steps](/docs/embeddable-ui/themes/spacing) or accept any valid [CSS padding value](https://developer.mozilla.org/en-US/docs/Web/CSS/padding).
```jsx theme={"system"}
```
| **Prop** | **Type** | **Default** |
| -------- | ------------------------------ | ---------------- |
| `p` | `Responsive` | No default value |
| `px` | `Responsive` | No default value |
| `py` | `Responsive` | No default value |
| `pt` | `Responsive` | No default value |
| `pr` | `Responsive` | No default value |
| `pb` | `Responsive` | No default value |
| `pl` | `Responsive` | No default value |
### Width
Width props accept any valid [CSS width value](https://developer.mozilla.org/en-US/docs/Web/CSS/width).
```jsx theme={"system"}
```
| **Prop** | **Type** | **Default** |
| ---------- | -------------------- | ---------------- |
| `width` | `Responsive` | No default value |
| `minWidth` | `Responsive` | No default value |
| `maxWidth` | `Responsive` | No default value |
### Height
Height props accept any valid [CSS height value](https://developer.mozilla.org/en-US/docs/Web/CSS/height).
```jsx theme={"system"}
```
| **Prop** | **Type** | **Default** |
| ----------- | -------------------- | ---------------- |
| `height` | `Responsive` | No default value |
| `minHeight` | `Responsive` | No default value |
| `maxHeight` | `Responsive` | No default value |
### Positioning
Positioning props can change how the element is placed relative to the normal flow of the document. As usual, the corresponding CSS values are accepted for each property, and the [space scale steps](/docs/embeddable-ui/themes/spacing) can be used for the offset values.
```jsx theme={"system"}
```
| **Prop** | **Type** | **Default** |
| ---------- | ---------------------------- | ---------------- |
| `position` | `Responsive` | No default value |
| `inset` | `Responsive` | No default value |
| `top` | `Responsive` | No default value |
| `right` | `Responsive` | No default value |
| `bottom` | `Responsive` | No default value |
| `left` | `Responsive` | No default value |
### Flex children
Each layout component has props used to control the style when it is a child of a flex container.
```jsx theme={"system"}
```
| **Prop** | **Type** | **Default** |
| ------------ | ---------------------------- | ---------------- |
| `flexBasis` | `Responsive` | No default value |
| `flexShrink` | `Responsive` | No default value |
| `flexGrow` | `Responsive` | No default value |
### Grid children
Each layout component has props used to control the style when it is a child of a grid container.
```jsx theme={"system"}
```
| **Prop** | **Type** | **Default** |
| ----------------- | -------------------- | ---------------- |
| `gridArea` | `Responsive` | No default value |
| `gridColumn` | `Responsive` | No default value |
| `gridColumnStart` | `Responsive` | No default value |
| `gridColumnEnd` | `Responsive` | No default value |
| `gridRow` | `Responsive` | No default value |
| `gridRowStart` | `Responsive` | No default value |
| `gridRowEnd` | `Responsive` | No default value |
***
## Margin props
Margin props are available on most components in order to provide spacing around the elements. They are not exclusive to layout components.
Margin props can access the [space scale steps](/docs/embeddable-ui/themes/spacing) or accept any valid [CSS margin value](https://developer.mozilla.org/en-US/docs/Web/CSS/margin)
```jsx theme={"system"}