Landing page

<body class="kx-page">
    <div class="kx-page__canvas">

        <div class="kx-page__main">
            <main class="kx-main" role="main">

                <div class="kx-page__content">

                    <section class="kx-theme--white kx-pt--xxlarge kx-pb--xlarge">
                        <div class="kx-container kx-container--mob-s kx-mx--auto kx-theme--foam">
                            Container: <strong>mob-s</strong>
                            <div class="kx-row kx-row--gutters">
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <section class="kx-theme--white kx-pt--xxlarge kx-pb--xlarge">
                        <div class="kx-container kx-container--mob-m kx-mx--auto kx-theme--foam">
                            Container: <strong>mob-m</strong>
                            <div class="kx-row kx-row--gutters">
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <section class="kx-theme--white kx-pt--xxlarge kx-pb--xlarge">
                        <div class="kx-container kx-container--tab-m kx-mx--auto kx-theme--foam">
                            Container: <strong>tab-m</strong>
                            <div class="kx-row kx-row--gutters">
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <section class="kx-theme--white kx-pt--xxlarge kx-pb--xlarge">
                        <div class="kx-container kx-container--tab-l kx-mx--auto kx-theme--foam">
                            Container: <strong>tab-l</strong>
                            <div class="kx-row kx-row--gutters">
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <section class="kx-theme--white kx-pt--xxlarge kx-pb--xlarge">
                        <div class="kx-container kx-container--ltp-s kx-mx--auto kx-theme--foam">
                            Container: <strong>ltp-s</strong>
                            <div class="kx-row kx-row--gutters">
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <section class="kx-theme--white kx-pt--xxlarge kx-pb--xlarge">
                        <div class="kx-container kx-container--ltp-m kx-mx--auto kx-theme--foam">
                            Container: <strong>ltp-m</strong>
                            <div class="kx-row kx-row--gutters">
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <section class="kx-theme--white kx-pt--xxlarge kx-pb--xlarge">
                        <div class="kx-container kx-container--dtp kx-mx--auto kx-theme--foam">
                            Container: <strong>dtp</strong>
                            <div class="kx-row kx-row--gutters">
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <section class="kx-theme--white kx-pt--xxlarge kx-pb--xlarge">
                        <div class="kx-container kx-mx--auto kx-theme--foam">
                            Container: <strong>full-width</strong>
                            <div class="kx-row kx-row--gutters">
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                                    <div class="kx-theme--teal kx-p--small">Col</div>
                                </div>
                            </div>
                        </div>
                    </section>

                </div>
            </main>
        </div>

    </div>

    <script>
        let buttons = document.querySelectorAll('.kx-btn');
        for (let i = 0; i < buttons.length; i++) {
            buttons[i].addEventListener('click', function(event) {
                this.blur();
            });
        }
    </script>
    <script src="../../assets/scripts/js/helpers.js"></script>
    <script src="../../assets/scripts/js/navigation.js"></script>
    <script src="../../assets/scripts/js/object-fit-fallback.js"></script>

    <script src="../../assets/scripts/js/components/dropdown.js"></script>

</body>
{% extends "@page-clean" %}

{% block main %}
    <section class="kx-theme--white kx-pt--xxlarge kx-pb--xlarge">
        <div class="kx-container kx-container--mob-s kx-mx--auto kx-theme--foam">
            Container: <strong>mob-s</strong>
            <div class="kx-row kx-row--gutters">
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
            </div>
        </div>
    </section>
    <section class="kx-theme--white kx-pt--xxlarge kx-pb--xlarge">
        <div class="kx-container kx-container--mob-m kx-mx--auto kx-theme--foam">
            Container: <strong>mob-m</strong>
            <div class="kx-row kx-row--gutters">
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
            </div>
        </div>
    </section>
    <section class="kx-theme--white kx-pt--xxlarge kx-pb--xlarge">
        <div class="kx-container kx-container--tab-m kx-mx--auto kx-theme--foam">
            Container: <strong>tab-m</strong>
            <div class="kx-row kx-row--gutters">
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
            </div>
        </div>
    </section>
    <section class="kx-theme--white kx-pt--xxlarge kx-pb--xlarge">
        <div class="kx-container kx-container--tab-l kx-mx--auto kx-theme--foam">
            Container: <strong>tab-l</strong>
            <div class="kx-row kx-row--gutters">
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
            </div>
        </div>
    </section>
    <section class="kx-theme--white kx-pt--xxlarge kx-pb--xlarge">
        <div class="kx-container kx-container--ltp-s kx-mx--auto kx-theme--foam">
            Container: <strong>ltp-s</strong>
            <div class="kx-row kx-row--gutters">
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
            </div>
        </div>
    </section>
    <section class="kx-theme--white kx-pt--xxlarge kx-pb--xlarge">
        <div class="kx-container kx-container--ltp-m kx-mx--auto kx-theme--foam">
            Container: <strong>ltp-m</strong>
            <div class="kx-row kx-row--gutters">
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
            </div>
        </div>
    </section>
    <section class="kx-theme--white kx-pt--xxlarge kx-pb--xlarge">
        <div class="kx-container kx-container--dtp kx-mx--auto kx-theme--foam">
            Container: <strong>dtp</strong>
            <div class="kx-row kx-row--gutters">
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
            </div>
        </div>
    </section>
    <section class="kx-theme--white kx-pt--xxlarge kx-pb--xlarge">
        <div class="kx-container kx-mx--auto kx-theme--foam">
            Container: <strong>full-width</strong>
            <div class="kx-row kx-row--gutters">
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
                <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@ltp-s">
                    <div class="kx-theme--teal kx-p--small">Col</div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}
/* No context defined for this component. */

There are no notes for this item.