# UEFA Champions League

> Proof of how much presence one well-built header block can give a page.

**Sports & gaming · Dark · Tabbed**

Proof of how much presence one well-built header block can give a page. The hero does the heavy lifting and everything below it stays simple.

## What makes it work

- Player cutouts on a dark ground with an embedded anthem card, all inside a single block at the top.
- Below the hero the page keeps to tables and two charts, so the styling never competes with the data.
- A word cloud and an attendance scatter add variety at very little build cost.
- If you only have time to style one thing, style the header.

## The views

Each tab is shown below at full width.

### Overview

### Team Analysis

### Moments

## See it live

[Open the live dashboard](https://demo4.holistics.io/dashboards/v4/114236-uefa-champions-league?_pl=41c4334a516c31f867b2605e) to click through it yourself. No Holistics account needed.

## Theme code

The theme this dashboard actually uses, written out as a reusable `PageTheme`. Paste it into a
`.theme.aml` file under **Development > Library > Themes** to reuse it across your own dashboards,
or inline it as a single dashboard's `theme:` property. Chart colour palettes are set
[separately](/docs/admin/dashboard-themes/color-palettes), so they are not included here.

<details>
<summary>uefa_champions_league_theme.theme.aml</summary>

```aml
PageTheme uefa_champions_league_theme {
  title: "Electric Blue"
  background {
    bg_size: "cover"
    bg_image: "url('https://prod-media.beinsports.com/image/1769771826111_9777f484-500d-4625-80e3-4e037f6fb41a.png?ver=03-06-2025')"
  }
  canvas {
    border {
      border_color: "#1e293b"
      border_style: "none"
      border_radius {
        top_left: 10
        top_right: 10
        bottom_left: 10
        bottom_right: 10
      }
    }
    shadow: "md"
    background {
      bg_color: "rgba(15, 23, 42, 0.92)"
    }
  }
  block {
    text {
      font_color: "#94a3b8"
    }
    label {
      font_size: 14
      font_color: "#ffffff"
      font_weight: "semibold"
    }
    padding {
      top: 8
      left: 8
      right: 8
      bottom: 8
    }
  }
  viz {
    table {
      header {
        bg_color: "#0f172a"
        font_size: 14
        font_color: "#378fda"
        font_weight: "semibold"
      }
      general {
        bg_color: "#1e293b"
        font_size: 14
        font_color: "#ffffff"
        hover_color: "#1e293b"
        banding_color: "#0f172a"
        grid_color: "#1e293b"
        border_color: "#1e293b"
      }
      sub_title {
        font_size: 12
        font_color: "#94a3b8"
      }
      sub_header {
        bg_color: "#0f172a"
        font_size: 12
        font_color: "#ffffff"
      }
    }
  }
}
```

</details>

The theme is paired with custom CSS, which lives beside it rather than inside it. See
[Custom CSS](/docs/admin/dashboard-themes/custom-css) for where it goes.

<details>
<summary>Custom CSS</summary>

```css
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

h1, p {
  font-family: "Barlow", sans-serif; !important;
}

/* KPI styles */
.h-kpi-metric-kpi {
  font-family: "Barlow", sans-serif;
  font-size: 50px;
  color: #F7863D;
}

.h-kpi-metric-label {
  font-size: 16px;
  color: #ffffff;
}

.h-kpi-metric-diff .friendly-diff:not(.negative) {
  background: #0f766e;
  color: #ccfbf1;
  border-color: #1e293b;
}

.h-kpi-metric-diff .friendly-diff.negative {
  background: #991b1b;
  color: #fee2e2;
  border-color: #1e293b;
}

/* Control variables */
.h-theme-control-block {
  /* Select */
  --h-select-bg: #1e293b;
  --h-select-text: #ffffff;
  --h-select-placeholder: rgba(255, 255, 255, 0.6);
  --h-select-border: #334155;
  --h-select-border-hover: #94a3b8;
  --h-select-border-focus: #378fda;
  --h-select-trigger-icon: rgba(255, 255, 255, 0.7);
  /* Input */
  --h-input-bg: #1e293b;
  --h-input-disabled-bg: #0f172a;
  --h-input-text-color: #ffffff;
  --h-input-placeholder-color: rgba(255, 255, 255, 0.6);
  --h-input-border: #334155;
  --h-input-border-hover: #94a3b8;
  --h-input-border-focus: #378fda;
  --h-input-selection-bg: rgba(91, 194, 231, 0.2);
  --h-input-trigger-icon: rgba(255, 255, 255, 0.7);
  /* Badge */
  --h-badge-bg: #0f172a;
  --h-badge-text: #378fda;
  --h-badge-border: #1e293b;
  --h-badge-hover-bg: #1e293b;
  /* Checkbox */
  --h-checkbox-bg: #1e293b;
  --h-checkbox-hover-bg: #1e293b;
  --h-checkbox-border: #334155;
  --h-checkbox-checked-bg: #378fda;
  --h-checkbox-checked-border: #378fda;
  --h-checkbox-checkmark: #ffffff;
  --h-checkbox-focus-ring: rgba(91, 194, 231, 0.2);
}

/* Checkbox text */
.h-checkbox {
  color: #ffffff;
}

/* Standalone controls + date filter form container */
.dac-ic-block .hui-select-trigger,
.dac-ic-block .h-input,
.h-theme-control-block .h-theme-dm-filter-container .dm-filter-form {
  border-radius: 10px;
}

/* PoP operator select — left edge rounded */
.dac-ic-block .pop-condition-select__operator-select {
  border-radius: 0;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
/* PoP number input — no radius (middle element) */
.dac-ic-block .pop-condition-select__offset-input {
  border-radius: 0;
}
/* PoP period select — right edge rounded */
.dac-ic-block .pop-condition-select__period-select {
  border-radius: 0;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* Date filter mark — synced with badge */
.h-highlightable-input mark {
  background-color: #0f172a;
  color: #378fda;
  border: 1px solid #1e293b;
}

/* Pivot total row */
.ag-floating-bottom .ag-cell {
  background-color: #0f172a;
}
.ag-floating-bottom .ag-cell:not(.h-following-span) {
  color: #378fda;
}

/* Metric sheet sparkline */
.h-chart-cell {
  --h-table-sparkline-color: #378fda;
}
```

</details>