Все, что вам не хватало, чтобы включить файл js
<script src="https://getuikit.com/assets/uikit/dist/js/uikit.js"></script>
, а также убедиться, что ваш HTML-тег внутри <head>
содержит
<meta name="viewport" content="width=device-width, initial-scale=1.0">
, а вот кодовая ручка с тестомhttps://codepen.io/AElkhodary/pen/rvYGjo?editors=1010
, а также вы можете проверить код вниз
вот так это выглядит в адаптивном поведении
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/css/uikit.css" rel="stylesheet"/>
<script src="https://getuikit.com/assets/uikit/dist/js/uikit.js"></script>
<div class="uk-section uk-section-muted">
<div class="uk-container uk-position-relative">
<h1 class="uk-h1 uk-heading-line uk-text-center uk-text-lowercase"><span>hey</span></h1>
<div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-large uk-card-hover uk-card-body uk-responsive-width">
<h3 class="uk-card-title uk-text-lowercase">lorem</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore
et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-large uk-card-hover uk-card-body uk-responsive-width">
<h3 class="uk-card-title uk-text-lowercase">lorem</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore
et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-large uk-card-hover uk-card-body uk-responsive-width">
<h3 class="uk-card-title uk-text-lowercase">lorem</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore
et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>