# View (/docs/products/dash-dots/reference/components/view)

Every page has one `View` around the rest. Nest more `View`s to group content into rows, columns and cards.

**Children:** Components

## Example

![The View component](/assets/images/dash-dots/components/view.webp)

```xml title="view.dml"
<View variant="card" direction="row" align="center" justify="between">
  <Text weight="medium">Balance</Text>
  <Text weight="bold" numeric>SLE 1,250.00</Text>
</View>
```

## Props

| Prop                                                                   | Type                                                                                                                                                    | What it is                                                                                                                                                         |
| ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `id`                                                                   | `string`                                                                                                                                                | A name for `this.captureView`, which makes a picture of this View.                                                                                                 |
| `hidden`                                                               | `boolean`                                                                                                                                               | Takes the View off the screen and keeps what's inside alive, such as a Scroll's position. An `<If>` removes what's inside, so it starts afresh when it comes back. |
| `disabled`                                                             | `boolean`                                                                                                                                               | Dims the View, and nothing in it takes a tap. Screen readers skip it, so say why outside it.                                                                       |
| `gap`                                                                  | [spacing](/docs/products/dash-dots/reference/components#spacing)                                                                                        |                                                                                                                                                                    |
| `direction`                                                            | `column`, `row`                                                                                                                                         |                                                                                                                                                                    |
| `align`                                                                | `stretch`, `start`, `center`, `end`                                                                                                                     | Across `direction`.                                                                                                                                                |
| `justify`                                                              | `start`, `center`, `end`, `between`                                                                                                                     | Along `direction`. `between` puts the first and last child at the ends.                                                                                            |
| `wrap`                                                                 | `boolean`                                                                                                                                               | Lets children that don't fit flow onto another line.                                                                                                               |
| `grow`                                                                 | `boolean`                                                                                                                                               | Fills the space the parent has left, along the parent's direction.                                                                                                 |
| `padding`, `paddingTop`, `paddingStart`, `paddingEnd`, `paddingBottom` | [spacing](/docs/products/dash-dots/reference/components#spacing)                                                                                        | Space inside its edges, all round or on one side.                                                                                                                  |
| `variant`                                                              | `plain`, `card`                                                                                                                                         | `card` is a surface with a hairline and rounded corners. The box props change any of those. Default: `plain`.                                                      |
| `elevation`                                                            | `none`, `low`, `high`                                                                                                                                   | A shadow under the box, so it seems to sit above the page. `high` is for what floats over others.                                                                  |
| `background`                                                           | [background](/docs/products/dash-dots/reference/components#backgrounds), or a [custom color](/docs/products/dash-dots/developers/theming#custom-colors) |                                                                                                                                                                    |
| `border`                                                               | [border](/docs/products/dash-dots/reference/components#borders)                                                                                         |                                                                                                                                                                    |
| `radius`                                                               | [corner radius](/docs/products/dash-dots/reference/components#corner-radii)                                                                             |                                                                                                                                                                    |
| `width`                                                                | `fill`, or a `number` of points                                                                                                                         |                                                                                                                                                                    |
| `height`                                                               | `fill`, or a `number` of points                                                                                                                         |                                                                                                                                                                    |
| `minHeight`                                                            | `number`                                                                                                                                                |                                                                                                                                                                    |
| `maxWidth`                                                             | `number`                                                                                                                                                |                                                                                                                                                                    |
| `aspect`                                                               | [aspect ratio](/docs/products/dash-dots/reference/components#aspect-ratios)                                                                             |                                                                                                                                                                    |

## Events

| Event   | Sends   | Notes |
| ------- | ------- | ----- |
| `onTap` | Nothing |       |

> **Note:** Setting `aspect` makes `height` pointless: the aspect sets the height. The build warns when both are set.