<div class=“hero mdc-theme–on-primary mdc-theme–primary-bg”>

<div class="mdc-layout-grid grid-container">
        <div class="mdc-layout-grid__inner">
                <div
                        class="
                                mdc-layout-grid__cell mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-6
                        "
                >
                        <h1 class="mdc-typography--headline3">{{ site.title }}</h1>
                        <p class="mdc-typography--headline5">{{ site.description }}</p>

                        <p class="hero-actions">
                                <a
                                        href="{{ 'getting-started' | relative_url }}"
                                        class="mdc-button mdc-button--outlined mdc-theme--on-primary"
                                >
                                        <span class="mdc-button__ripple"></span>
                                        <span class="mdc-button__label">Get Started</span>
                                </a>
                        </p>
                </div>

                <div
                        class="
                                mdc-layout-grid__cell
                                mdc-layout-grid__cell--span-8-tablet
                                mdc-layout-grid__cell--span-6
                                mdc-layout-grid__cell--align-middle
                        "
                >
                        {{ page.hero_example | markdownify }}
                </div>
        </div>
</div>

</div>