---
title: Tracking
summary: Component for visualizing activity logs or other monitoring-related data. With its ability to show data in a visually appealing and easily understandable way, the tracking component is an essential tool for any organization that relies on data monitoring and analysis to optimize performance and user experience.
description: Visualize activity logs and uptime data with the tracking component - a compact row of colored blocks that show status over time.
related: [/ui/components/tooltip, /ui/components/chart]
---
import Subheader from '@ui/Subheader.astro';
import Example from '@components/Example.astro';
import CodeDocs from '@components/CodeDocs.astro';
## 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.
## Tracking inside a card
You can add a tracking component inside the cards to give your reports a fresh look and visualize the status of your system in an attractive way. If you want to read how to add other elements to a card it is worth reading [documentation of card](/ui/components/card).
## SCSS variables
Use these SCSS variables to customize the tracking component. The default values are: