Prototyping Demo

Page - Guide 

<section>
    <div class="pageheader-dots">
        <div class="pageheader-dots__back">← <a href="/">Back to the Design System</a></div>
        <div class="pageheader-dots__dots">
            <div class="pageheader-dots__wrapper">
                <div class="pageheader-dots__container">
                    <p class="pageheader-dots__top-heading">8/8</p>
                    <div id="js-pageheader-scene">
                        <p data-depth="0.2" class="pageheader-dots__main-heading">
                            Congratulations!
                        </p>
                        <p data-depth="0.6" class="pageheader-dots__main-heading-shadow">
                            Congratulations!
                        </p>
                    </div>
                    <p class="pageheader-dots__sub-heading">Your site is now live and your ready to start prototyping and learn Atomic Design.<br>If you have questions, suggestions or need help, go to <a href="https://github.com/Novicell/prototyping-demo" target="_blank">Github repo</a> and
                        submit<br> an issue or reach out to at Brian Jensen at <a href="mailto:bsj@novicell.dk">bsj@novicell.dk</a>.</p>
                    <div class="pageheader-dots__button">
                        <a href="/components/preview/page-guide-7" title="Previous" class="link-button--ghost" property="url">Previous</a>

                        <a href="/components/preview/page-all" title="See examples" class="link-button" property="url">See examples</a>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
 
<section>
    {{> '@pageheader-dots' }}
</section>
 
{
  "pageHeader": {
    "top": "8/8",
    "main": "Congratulations!",
    "sub": "Your site is now live and your ready to start prototyping and learn Atomic Design.<br>If you have questions, suggestions or need help, go to <a href=\"https://github.com/Novicell/prototyping-demo\" target=\"_blank\">Github repo</a> and submit<br> an issue or reach out to at Brian Jensen at <a href=\"mailto:bsj@novicell.dk\">bsj@novicell.dk</a>."
  },
  "previousButton": {
    "url": "/components/preview/page-guide-7",
    "title": "Previous",
    "text": "Previous"
  },
  "nextButton": {
    "url": "/components/preview/page-all",
    "title": "See examples",
    "text": "See examples"
  }
}