# Status-page


## Examples

### Header

```html
<link rel="stylesheet" href="//cdn.grade.design/mark/tokens/${tokensVersion}/light.css" />
<link rel="stylesheet" href="//cdn.grade.design/mark/fonts/${fontsVersion}/fonts.css" />
<link rel="stylesheet" href="//cdn.grade.design/mark/css/${cssVersion}/statuspal.css" />
<script type="module" src="//cdn.grade.design/mark/ui/${uiVersion}/index.js"></script>
<m-app-header class="topbar">
  <a slot="logo" href="/"
    ><img
      class="topbar__logo"
      alt="Grade logo"
      src="https://cdn.grade.design/mark/assets/${assetsVersion}/logos/grade-logo-coral.svg"
      height="24"
  /></a>
  <span slot="additional-navigation"> {{lang_selector}} </span>
</m-app-header>
```

### Footer

```html
<m-app-footer class="bottombar">
  <a slot="left" href="https://www.grade.com/">Grade.com</a>
  <span slot="left">{{subscribe_button}}</span>
  <span slot="right">© 2025 Grade</span>
</m-app-footer>
```