<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. */
- Handle: @layout
- Preview:
- Filesystem Path: src\components\02-page-templates\03-layout\layout.njk
- References (1): @page-clean
There are no notes for this item.