# EduPulse Analytics

> A course analytics theme that holds up across quite different content shapes.

**Education · Light · Tabbed**

A course analytics theme that holds up across quite different content shapes. Three tabs, each with a different job.

## What makes it work

- Teal and green with pinned-note illustrations, which suits the subject without tipping into cute.
- Instructor cards combine a photo, a name, and two metrics in a single block.
- The growth trends tab drops to plain time series, and the theme still reads as the same product.
- A good example of a theme that survives contact with a table.

## The views

Each tab is shown below at full width.

### Course Deep Dive

### Growth Trends

### Top Instructors

## See it live

[Open the live dashboard](https://demo4.holistics.io/dashboards/v4/114234-edupulse-analytics?_pl=385ce4f06042015b0a60cfa0) 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>edupulse_analytics_theme.theme.aml</summary>

```aml
PageTheme edupulse_analytics_theme {
  background {
    bg_image: "linear-gradient(to top, #E3F9DB, #DDF8FF)"
  }
  canvas {
    border {
      border_color: "#CFEEC3"
      border_width {
        top: 2
        left: 2
        right: 2
        bottom: 2
      }
      border_radius {
        top_left: 12
        top_right: 12
        bottom_left: 12
        bottom_right: 12
      }
    }
    shadow: "none"
  }
  block {
    text {
      font_color: "#0F647B"
    }
    label {
      font_size: 16
      font_color: "#0F647B"
    }
    border {
      border_color: "#C7E4EC"
      border_width {
        top: 1
        left: 1
        right: 1
        bottom: 1
      }
      border_radius {
        top_left: 12
        top_right: 12
        bottom_left: 12
        bottom_right: 12
      }
    }
    padding {
      top: 24
      left: 24
      right: 24
      bottom: 24
    }
    background {
      bg_color: "#EDF7F9"
    }
  }
  viz {
    table {
      header {
        bg_color: "#C7F0FB"
      }
      general {
        font_color: "#0F647B"
        hover_color: "#E1F5F9"
        banding_color: "transparent"
        grid_color: "#629AA9"
        border_color: "#629AA9"
      }
    }
  }
}
```

</details>