# Sections and cards

A [DashboardContent](https://developer.mediarithmics.io/reference#dashboardcontent) is composed of sections and cards.

* Each section has a title and cards disposed on a grid.
* Each card is a white block organizing [charts](https://developer.mediarithmics.io/dashboards/charts) horizontally or vertically.

<figure><img src="https://4196284719-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MMuoqM-5hJ5JY0WnAKL%2Fuploads%2Fs2mgS6SSht50ZLqHzHLs%2Fimage.png?alt=media&#x26;token=951384c8-fe6e-4883-9912-69c98845542f" alt=""><figcaption><p>Dashboard structure</p></figcaption></figure>

The size and position of each card is defined by a 12 column grid, with as many rows as needed. Cards size and position are set with `{h,w,x,y}` properties :&#x20;

* `h` is the number of rows that the card takes.
* `w` is the number of columns that the card takes
* `{x,y}` are the coordinates of the top left corner of the card on the grid

Here is a sample grid with five cards and their corresponding properties :&#x20;

![A sample grid with 5 cards](https://lh5.googleusercontent.com/H6pY5bRARXZcGmoTzNq9UGfIrubGQa_J4moSjiIaeTUkxK9mheT0R2iIpBwc64dlI-EvCpDiiA5YZdKcomsyK4MAv7zARBuNaWF4Ep-n0POOJUPswlQWzxLLcZftXhwdNdKKGTDymj0)