uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
385 lines (301 loc) • 22.1 kB
HTML
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Section - UIkit tests</title>
<script src="js/test.js"></script>
</head>
<body>
<div class="uk-container">
<h1>Section</h1>
<div class="uk-margin">
<button class="uk-button uk-button-default" type="button" uk-toggle="target: .uk-section; cls: uk-section-overlap">Overlap</button>
</div>
</div>
<div class="uk-section uk-section-default">
<div class="uk-container uk-position-relative">
<h1>Section Default</h1>
<div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-muted">
<div class="uk-container">
<h1>Section Muted</h1>
<div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-primary">
<div class="uk-container">
<h1>Section Primary</h1>
<div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-secondary">
<div class="uk-container">
<h1>Section Secondary</h1>
<div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-default uk-section-xsmall">
<div class="uk-container">
<p>X-Small Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div class="uk-section uk-section-muted uk-section-xsmall">
<div class="uk-container">
<p>X-Small Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div class="uk-section uk-section-primary uk-section-xsmall">
<div class="uk-container">
<p>X-Small Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div class="uk-section uk-section-secondary uk-section-xsmall">
<div class="uk-container">
<p>X-Small Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div class="uk-section uk-section-default uk-section-small">
<div class="uk-container">
<div class="uk-grid-large uk-flex-middle" uk-grid>
<div class="uk-width-expand">
<p class="uk-text-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
<div class="uk-width-auto">
<a class="uk-button uk-button-primary uk-button-large" href="#">Default Small</a>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-muted uk-section-small">
<div class="uk-container">
<div class="uk-grid-large uk-flex-middle" uk-grid>
<div class="uk-width-expand">
<p class="uk-text-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
<div class="uk-width-auto">
<a class="uk-button uk-button-primary uk-button-large" href="#">Muted Small</a>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-primary uk-section-small">
<div class="uk-container">
<div class="uk-grid-large uk-flex-middle" uk-grid>
<div class="uk-width-expand">
<p class="uk-text-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
<div class="uk-width-auto">
<a class="uk-button uk-button-primary uk-button-large" href="#">Primary Small</a>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-secondary uk-section-small">
<div class="uk-container">
<div class="uk-grid-large uk-flex-middle" uk-grid>
<div class="uk-width-expand">
<p class="uk-text-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
<div class="uk-width-auto">
<a class="uk-button uk-button-primary uk-button-large" href="#">Secondary Small</a>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-default uk-section-large">
<div class="uk-container">
<h1 class="uk-heading-medium uk-text-center">Default Large</h1>
<p class="uk-text-large uk-text-center">Excepteur sint occaecat cupidatat non proident, sunt in<br class="uk-visible@m"> culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="uk-margin-large uk-grid-match uk-child-width-1-3@m" uk-grid>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-muted uk-section-large">
<div class="uk-container">
<h1 class="uk-heading-medium uk-text-center">Muted Large</h1>
<p class="uk-text-large uk-text-center">Excepteur sint occaecat cupidatat non proident, sunt in<br class="uk-visible@m"> culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="uk-margin-large uk-grid-match uk-child-width-1-3@m" uk-grid>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-primary uk-section-large">
<div class="uk-container">
<h1 class="uk-heading-medium uk-text-center">Primary Large</h1>
<p class="uk-text-large uk-text-center">Excepteur sint occaecat cupidatat non proident, sunt in<br class="uk-visible@m"> culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="uk-margin-large uk-grid-match uk-child-width-1-3@m" uk-grid>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-secondary uk-section-large">
<div class="uk-container">
<h1 class="uk-heading-medium uk-text-center">Secondary Large</h1>
<p class="uk-text-large uk-text-center">Excepteur sint occaecat cupidatat non proident, sunt in<br class="uk-visible@m"> culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="uk-margin-large uk-grid-match uk-child-width-1-3@m" uk-grid>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-default uk-section-xlarge">
<div class="uk-container">
<h1 class="uk-heading-medium uk-text-center">Default X-Large</h1>
<p class="uk-text-large uk-text-center">Excepteur sint occaecat cupidatat non proident, sunt in<br class="uk-visible@m"> culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="uk-margin-large uk-grid-match uk-child-width-1-3@m" uk-grid>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-muted uk-section-xlarge">
<div class="uk-container">
<h1 class="uk-heading-medium uk-text-center">Muted X-Large</h1>
<p class="uk-text-large uk-text-center">Excepteur sint occaecat cupidatat non proident, sunt in<br class="uk-visible@m"> culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="uk-margin-large uk-grid-match uk-child-width-1-3@m" uk-grid>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-primary uk-section-xlarge">
<div class="uk-container">
<h1 class="uk-heading-medium uk-text-center">Primary X-Large</h1>
<p class="uk-text-large uk-text-center">Excepteur sint occaecat cupidatat non proident, sunt in<br class="uk-visible@m"> culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="uk-margin-large uk-grid-match uk-child-width-1-3@m" uk-grid>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-secondary uk-section-xlarge">
<div class="uk-container">
<h1 class="uk-heading-medium uk-text-center">Secondary X-Large</h1>
<p class="uk-text-large uk-text-center">Excepteur sint occaecat cupidatat non proident, sunt in<br class="uk-visible@m"> culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="uk-margin-large uk-grid-match uk-child-width-1-3@m" uk-grid>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-default uk-padding-remove-vertical">
<div class="uk-container">
<h1>Padding Remove</h1>
<div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
</body>
</html>