doc(#36): doc for QR code slide

Author: peterpeterparker

doc/slides/deckdeckgo-slide-qrcode-layout.png

@@ -15,6 +15,7 @@ Some templates offer extra features as for example the slide [Code](#slide-code)
   - [Slide: Youtube](#slide-youtube)
   - [Slide: Code](#slide-code)
   - [Slide: Author](#slide-author)
+  - [Slide: QR Code](#slide-qr-code)
 - [Background](#background)
 
 ## Slides
@@ -55,6 +56,10 @@ Some templates offer extra features as for example the slide [Code](#slide-code)
 
 <img src="https://github.com/fluster/deckdeckgo/blob/master/doc/slides/deckdeckgo-slide-author-layout.png" width="200px">
 
+* [QR Code](#slide-qr-code)
+
+<img src="https://github.com/fluster/deckdeckgo/blob/master/doc/slides/deckdeckgo-slide-qrcode-layout.png" width="200px">
+
 *Note: If you would miss or need further templates, don't hesitate to open an issue and/or submit a PR, it would be my pleasure to add more options*
 
 ### Slide: Title
@@ -497,7 +502,7 @@ The [DeckDeckGo] - Hightlight code component is provided in separate extra libra
 
 #### Attributes
 
-At least `src` or the `slot` code should be provided in order to render code in this template. It offers the same attributes as the [DeckDeckGo] charts Web Component, see its [documentation](https://github.com/fluster/deckdeckgo-code) for the details.
+At least `src` or the `slot` code should be provided in order to render code in this template. It offers the same attributes as the [DeckDeckGo] code Web Component, see its [documentation](https://github.com/fluster/deckdeckgo-highlight-code) for the details.
 
 ##### Example with file URI
 
@@ -672,4 +677,72 @@ div.circle {
 }
 ```
 
+### Slide: QR Code
+
+The "QR code" slide is an handy slide in case you would like to display a QR code. It could for example be use as the very last slide of your presentation to display an easy link pointing to your deck, you previously published online. It would allow your audience to get easily your slides without any delay on their phone.
+
+#### Layout
+
+<img src="https://github.com/fluster/deckdeckgo/blob/master/doc/slides/deckdeckgo-slide-qrcode-layout.png" width="450px">
+
+#### Usage
+
+The "QR code" slide's Web Component could be integrated using the tag `<deckgo-slide-qrcode/>`.
+
+##### Usage
+
+```
+<deckgo-deck>
+  <deckgo-slide-qrcode content="https://deckdeckgo.com">
+    <h1 slot="title">My QR code</h1>
+    <p slot="content">An optional additional content</p>
+  </deckgo-slide-code>
+</deckgo-deck>  
+```
+
+##### Slots
+
+The slots `title` and `content` are optional.
+
+#### Code components
+
+The slide "QR Code" relies on the code component `<deckgo-qrcode/>` which is described in the components [documentation](https://github.com/fluster/deckdeckgo/blob/master/doc/components/components.md).
+
+#### Installation
+
+The [DeckDeckGo] - QR Code component is provided in separate extra library. If you don't use the [DeckDeckGo] starter kit and wish to add the [DeckDeckGo] QR code to your project, you will need to install and integrate it from a CDN or [npm](https://www.npmjs.com/package/deckdeckgo-qrcode) as described in its [installation guide](https://github.com/fluster/deckdeckgo-qrcode#getting-started).
+
+#### Attributes
+
+The attribute `content` should be provided in order to render a QR code in this template. It offers the same attributes as the [DeckDeckGo] QR code Web Component, see its [documentation](https://github.com/fluster/deckdeckgo-qrcode) for the details.
+
+##### Example without any slots
+
+```
+<deckgo-deck>
+  <deckgo-slide-qrcode content="An encoded text">
+  </deckgo-slide-code>
+</deckgo-deck>  
+```
+
+#### Theming
+
+The following theming options will affect this component if set on its host or parent.
+
+| CSS4 variable                      | Default | Note |
+| -------------------------- |:-----------------:|:-----------------:|
+| --background |  |  |
+| --color |  |  |
+| --slide-padding-top | 16px | Padding top of the all slide |
+| --slide-padding-end | 32px | Padding right of the all slide |
+| --slide-padding-bottom | 16px | Padding bottom of the all slide |
+| --slide-padding-start | 32px | Padding left of the all slide |
+| --slide-qrcode-align | center | QR code vertical alignment |
+| --slide-qrcode-text-align | center | QR code horizontal alignment |
+| --slide-qrcode-background | | QR code column's background |
+| --slide-qrcode-title-display | inherit | If you wish to hide the slot="title" |
+
+Furthermore, this slide component offers the exact same CSS4 variables as the [DeckDeckGo] - QR code Web Component, see its [documentation](https://github.com/fluster/deckdeckgo-qrcode) for the details.
+
+
 [DeckDeckGo]: https://deckdeckgo.com