From 0968234015fbf6f6719186759a9409b3bbfca392 Mon Sep 17 00:00:00 2001
From: Trevor Morris <code@trovster.com>
Date: Wed, 4 Oct 2023 14:36:50 +0100
Subject: [PATCH] docs: add information about the header slot

---
 README.md       | 17 +++++++++++++----
 docs/index.html |  2 +-
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 08a6cb7..2e5d1ee 100644
--- a/README.md
+++ b/README.md
@@ -2,9 +2,9 @@
 
 # Fitness Components
 
-This provides two Web Components for fitness visualisations. The default design
-is inspired by Apple Fitness. You can use a fully featured card or just the
-rings.
+This provides two Web Components for fitness visualisations. The default ring
+design is inspired by Apple Fitness. You can use a fully featured card or just
+the rings.
 
 ## Installation
 
@@ -25,7 +25,7 @@ must be imported before the custom elements can be used.
 </script>
 ```
 
-Both the card and ring require the move, exercise and stand totals and goals.
+Both the card and ring require the `move`, `exercise` and `stand` totals and goals.
 The card has additional optional values. If you include the date, it appears as
 a header. The `steps`, `distance` and `flights` data appear in the footer
 section. The distance attribute should be provided in **in meters**. By default,
@@ -57,6 +57,15 @@ this is converted to *miles* but you can change this to kilometres using
 ></fitness-ring>
 ```
 
+You can also provide a custom header by using the named slot. If a `date`
+attribute is set, then this will be used it.
+
+```html
+<fitness-card>
+  <div slot="header">The Custom Header</div>
+</fitness-card>
+```
+
 You can control the font and colours of the card and rings using CSS variables.
 The `--fitness-value` controls the colour of the *values* in the footer.
 
diff --git a/docs/index.html b/docs/index.html
index ce7069b..fe713b4 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -14,7 +14,7 @@ <h1>Fitness Web Components</h1>
             <p>
                 This is a demo of the components with default and alternative styles.
                 You can use a fully featured card or just the rings.
-                <span class="note">The default design is inspired by Apple Fitness.</span>
+                <span class="note">The default ring design is inspired by Apple Fitness.</span>
             </p>
             <p>
                 You can download code from the