| Server IP : 54.36.91.62 / Your IP : 216.73.217.117 Web Server : Apache System : Linux webm013.cluster127.gra.hosting.ovh.net 5.15.206-ovh-vps-grsec-zfs-classid #1 SMP Fri May 15 02:41:25 UTC 2026 x86_64 User : coopiak ( 151928) PHP Version : 8.3.23 Disable Function : _dyuweyrj4,_dyuweyrj4r,dl MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/coopiak/amisdesseniors-fr/voscatalogues/templates/yootheme/packages/styler/tests/ |
Upload File : |
<div class="uk-section uk-section-default">
<div class="uk-container uk-container-small">
<h2 class="uk-h5 uk-heading-divider uk-margin-large-bottom">Styles</h2>
<div class="uk-child-width-1-2@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-primary" 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-primary" 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-primary" 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-primary" href="#">Button</a>
</p>
</div>
</div>
</div>
<div>
<div class="uk-inline-clip uk-inverse-dark">
<canvas width="800" height="600" class="test-img"></canvas>
<div class="uk-card uk-card-overlay uk-card-hover uk-position-cover uk-position-medium">
<div class="uk-card-badge">Hot</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Overlay</h3>
<p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
<p uk-margin>
<a class="uk-button uk-button-default" href="#">Button</a>
<a class="uk-button uk-button-primary" href="#">Button</a>
</p>
</div>
</div>
</div>
</div>
<div>
<div class="uk-inline-clip uk-inverse-light">
<canvas width="800" height="600" class="test-img-dark"></canvas>
<div class="uk-card uk-card-overlay uk-card-hover uk-position-cover uk-position-medium">
<div class="uk-card-badge">Hot</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Overlay</h3>
<p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
<p uk-margin>
<a class="uk-button uk-button-default" href="#">Button</a>
<a class="uk-button uk-button-primary" href="#">Button</a>
</p>
</div>
</div>
</div>
</div>
</div>
<h2 class="uk-h5 uk-heading-divider uk-margin-large-top">Header and Footer</h2>
<div class="uk-child-width-1-2@m" uk-grid>
<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">
<canvas width="40" height="40" class="test-img-small uk-border-circle"></canvas>
</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">
<canvas width="800" height="400" class="test-img"></canvas>
</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-footer">
<a href="#" class="uk-button uk-button-text">Read more</a>
</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">
<canvas width="40" height="40" class="test-img-small uk-border-circle"></canvas>
</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-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">
<a href="#" class="uk-button uk-button-text">Read more</a>
</div>
</div>
</div>
</div>
<h2 class="uk-h5 uk-heading-divider uk-margin-large-top">Small</h2>
<div class="uk-child-width-1-2@m" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-small">
<div class="uk-card-header">
<h3 class="uk-card-title uk-margin-remove-bottom">Title</h3>
</div>
<div class="uk-card-media">
<canvas width="800" height="400" class="test-img"></canvas>
</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-footer">
<p class="uk-text-meta"><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-header">
<h3 class="uk-card-title uk-margin-remove-bottom">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"><time datetime="2016-04-01T19:00">April 01, 2016</time>.</p>
</div>
</div>
</div>
</div>
<h2 class="uk-h5 uk-heading-divider uk-margin-large-top">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 uk-margin-remove-bottom">Title</h3>
</div>
<div class="uk-card-media">
<canvas width="800" height="400" class="test-img"></canvas>
</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-footer">
<p class="uk-text-meta"><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-header">
<h3 class="uk-card-title uk-margin-remove-bottom">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"><time datetime="2016-04-01T19:00">April 01, 2016</time>.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-muted">
<div class="uk-container uk-container-small">
<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-preserve-color">
<div class="uk-container uk-container-small">
<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-preserve-color">
<div class="uk-container uk-container-small">
<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>