File manager

File manager - Edit - /home/opticamezl/www/newok/templates/yootheme/packages/styler/tests/card.html

Back
<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> <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>

| ver. 1.4 | Github | . | PHP 8.3.23 | Generation time: 0.05 | proxy | phpinfo | Settings