# Tracking
> A row of colored blocks that shows one status per time period, for uptime and activity logs.
Visualize activity logs and uptime data with the tracking component - a compact row of colored blocks that show status over time.
Source: https://docs.tabler.io/ui/components/tracking
---
## Basic example
Build a tracking view from a `.tracking` wrapper with one `.tracking-block` element per time period. Use background classes such as `bg-success` or `bg-danger` to show each status, and add [tooltips](/ui/components/tooltip) for details.
```html
```
## Tracking inside a card
A tracking strip fits in a [card](/ui/components/card), for example under a subheader and a summary line in the `card-body`.
```html
```
## Square blocks
Add `tracking-squares` to draw the blocks as squares of equal size instead of tall bars. Use it for a compact status strip, for example one square per day.
```html
```
## Accessibility
- A tracking strip is a chart made of blocks. Give the container `role="img"` and an `aria-label` that sums it up, for example "Uptime over the last 90 days, 3 incidents".
- The tooltips on the blocks are mouse-only. Put the same information in a table or a summary line so it can be reached another way.
- Green and red blocks look identical to many users. Add a shape, a label, or a legend next to the strip.
- Do not make each block focusable. Ninety focus stops for one chart is worse than none.
## SCSS variables
Use these SCSS variables to customize the tracking component. The default values are:
```scss
$tracking-height: 1.5rem;
$tracking-gap-width: 0.125rem;
$tracking-border-radius: var(--border-radius);
$tracking-block-min-width: 0.25rem;
```
_Source: `core/scss/_variables.scss`_