uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
623 lines (516 loc) • 30.4 kB
HTML
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Card - UIkit tests</title>
<script src="js/test.js"></script>
</head>
<body>
<div class="uk-section uk-section-default uk-section-small uk-padding-remove-top">
<div class="uk-container">
<h1>Card</h1>
<div class="uk-child-width-1-4@m uk-grid-match" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-hover">
<div class="uk-card-badge">Hot</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Default</h3>
<p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p uk-margin>
<a class="uk-button uk-button-default" href="#">Button</a>
<a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
</p>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-primary uk-card-hover">
<div class="uk-card-badge">Hot</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Primary</h3>
<p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p uk-margin>
<a class="uk-button uk-button-default" href="#">Button</a>
<a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
</p>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-secondary uk-card-hover">
<div class="uk-card-badge">Hot</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Secondary</h3>
<p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p uk-margin>
<a class="uk-button uk-button-default" href="#">Button</a>
<a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
</p>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-hover">
<div class="uk-card-badge">Hot</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Hover</h3>
<p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p uk-margin>
<a class="uk-button uk-button-default" href="#">Button</a>
<a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-muted uk-section-small">
<div class="uk-container">
<div class="uk-child-width-1-3@m uk-grid-match" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-hover uk-card-body">
<h3 class="uk-card-title">Default</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-primary uk-card-hover uk-card-body">
<h3 class="uk-card-title">Primary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
<h3 class="uk-card-title">Secondary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-primary uk-section-small uk-preserve-color">
<div class="uk-container">
<div class="uk-child-width-1-3@m uk-grid-match" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-hover uk-card-body">
<h3 class="uk-card-title">Default</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-primary uk-card-hover uk-card-body">
<h3 class="uk-card-title">Primary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
<h3 class="uk-card-title">Secondary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-secondary uk-section-small uk-preserve-color">
<div class="uk-container">
<div class="uk-child-width-1-3@m uk-grid-match" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-hover uk-card-body">
<h3 class="uk-card-title">Default</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-primary uk-card-hover uk-card-body">
<h3 class="uk-card-title">Primary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
<h3 class="uk-card-title">Secondary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
</div>
</div>
</div>
<div class="uk-section-default ">
<div class="uk-section uk-section-small uk-background-cover" style="background-image: url('images/photo.jpg');">
<div class="uk-container">
<div class="uk-child-width-1-3@m uk-grid-match" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-hover uk-card-body">
<h3 class="uk-card-title">Default</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-primary uk-card-hover uk-card-body">
<h3 class="uk-card-title">Primary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
<h3 class="uk-card-title">Secondary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uk-container uk-margin-large-top">
<h2>Media</h2>
<div class="uk-child-width-1-4@m" uk-grid>
<div>
<div class="uk-card uk-card-default">
<div class="uk-card-media-top">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Media Top</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default">
<div class="uk-card-body">
<h3 class="uk-card-title">Media Bottom</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
<div class="uk-card-media-bottom">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
</div>
</div>
</div>
<div class="uk-width-1-2@m">
<div class="uk-card uk-card-default uk-grid-collapse uk-child-width-1-2@s uk-margin" uk-grid>
<div class="uk-card-media-left uk-cover-container">
<img src="images/photo.jpg" alt="" uk-cover>
<canvas width="1800" height="1200"></canvas>
</div>
<div>
<div class="uk-card-body">
<h3 class="uk-card-title">Media Left</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
</div>
</div>
<div class="uk-card uk-card-default uk-grid-collapse uk-child-width-1-2@s uk-margin" uk-grid>
<div class="uk-flex-last@s uk-card-media-right uk-cover-container">
<img src="images/photo.jpg" alt="" uk-cover>
<canvas width="1800" height="1200"></canvas>
</div>
<div>
<div class="uk-card-body">
<h3 class="uk-card-title">Media Right</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
</div>
</div>
</div>
</div>
<h2>Header and Footer</h2>
<div class="uk-child-width-1-4@m" uk-grid>
<div>
<div class="uk-card uk-card-default">
<div class="uk-card-header">
<h3 class="uk-card-title">Title</h3>
</div>
<div class="uk-card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="uk-card-footer">
<p class="uk-text-meta">Written by <a href="#">Super User</a> on <time datetime="2016-04-01T19:00">April 01, 2016</time>.</p>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default">
<div class="uk-card-media-top">
<img src="images/light.jpg" width="1800" height="1200" alt="">
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
<div class="uk-card-footer">
<p>
<a class="uk-button uk-button-primary" href="#">Button</a>
<a class="uk-button uk-button-text uk-margin-small-left" href="#">Button</a>
</p>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default">
<div class="uk-card-header">
<h3 class="uk-card-title">Title</h3>
</div>
<div class="uk-card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
<div class="uk-card-media-bottom">
<img src="images/dark.jpg" width="1800" height="1200" alt="">
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default">
<div class="uk-card-header">
<div class="uk-grid-small uk-flex-middle" uk-grid>
<div class="uk-width-auto">
<img class="uk-border-circle" src="images/avatar.jpg" width="50" height="50" alt="">
</div>
<div class="uk-width-expand">
<h3 class="uk-card-title uk-margin-remove-bottom">Title</h3>
<p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">April 01, 2016</time></p>
</div>
</div>
</div>
<div class="uk-card-media">
<img src="images/light.jpg" width="1800" height="1200" alt="">
</div>
<div class="uk-card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
</div>
</div>
</div>
<h2>Nav</h2>
<div class="uk-child-width-1-4@m" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-body">
<ul class="uk-nav uk-nav-default">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</div>
<div>
<div class="uk-card uk-card-primary uk-card-body">
<h3 class="uk-card-title">Title</h3>
<ul class="uk-nav uk-nav-default">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</div>
<div>
<div class="uk-card uk-card-default">
<div class="uk-card-header">
<h3 class="uk-card-title">Title</h3>
</div>
<div class="uk-card-body">
<ul class="uk-nav uk-nav-default">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div class="uk-card-footer">
<p class="uk-text-meta">Written by <a href="#">Super User</a> on <time datetime="2016-04-01T19:00">April 01, 2016</time>.</p>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-secondary">
<div class="uk-card-media-top">
<img src="images/dark.jpg" width="1800" height="1200" alt="">
</div>
<div class="uk-card-body">
<ul class="uk-nav uk-nav-default">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div class="uk-card-media-bottom">
<img src="images/dark.jpg" width="1800" height="1200" alt="">
</div>
</div>
</div>
</div>
<h2>Small</h2>
<div class="uk-child-width-1-4@m" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-small">
<div class="uk-card-header">
<h3 class="uk-card-title">Title</h3>
</div>
<div class="uk-card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="uk-card-footer">
<p class="uk-text-meta">Written by <a href="#">Super User</a> on <time datetime="2016-04-01T19:00">April 01, 2016</time>.</p>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-small">
<div class="uk-card-media-top">
<img src="images/light.jpg" width="1800" height="1200" alt="">
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body uk-card-small">
<ul class="uk-nav uk-nav-default">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body uk-card-small">
<h3 class="uk-card-title">Title</h3>
<ul class="uk-nav uk-nav-default">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</div>
</div>
<h2>Large</h2>
<div class="uk-child-width-1-2@m" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-large">
<div class="uk-card-header">
<h3 class="uk-card-title">Title</h3>
</div>
<div class="uk-card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="uk-card-footer">
<p class="uk-text-meta">Written by <a href="#">Super User</a> on <time datetime="2016-04-01T19:00">April 01, 2016</time>.</p>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-large">
<div class="uk-card-media-top">
<img src="images/light.jpg" width="1800" height="1200" alt="">
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body uk-card-large">
<ul class="uk-nav uk-nav-default">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body uk-card-large">
<h3 class="uk-card-title">Title</h3>
<ul class="uk-nav uk-nav-default">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>