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