<div class="uk-section">
    <div class="uk-child-width-1-2@s uk-child-width-1-4@l uk-grid-collapse uk-grid-match" uk-grid>
        <div>

            <div class="uk-tile uk-tile-default uk-tile-hover">
                <h3>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 class="uk-tile uk-tile-muted uk-tile-hover">
                <h3>Muted</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 class="uk-tile uk-tile-primary uk-tile-hover">
                <h3>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 class="uk-tile uk-tile-secondary uk-tile-hover">
                <h3>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-section">
    <div class="uk-child-width-1-2@s uk-child-width-1-4@l uk-grid-collapse uk-grid-match" uk-grid>
        <div>

            <div class="uk-tile uk-tile-default uk-tile-small">
                <h3>Small</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>

        </div>
        <div>

            <div class="uk-tile uk-tile-muted uk-tile-small">
                <h3>Small</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>

        </div>
        <div>

            <div class="uk-tile uk-tile-primary uk-tile-small">
                <h3>Small</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>

        </div>
        <div>

            <div class="uk-tile uk-tile-secondary uk-tile-small">
                <h3>Small</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>

        </div>
    </div>
</div>

<div class="uk-section">
    <div class="uk-child-width-1-2@s uk-child-width-1-4@l uk-grid-collapse uk-grid-match" uk-grid>
        <div>

            <div class="uk-tile uk-tile-default uk-tile-large">
                <h3>Large</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>

        </div>
        <div>

            <div class="uk-tile uk-tile-muted uk-tile-large">
                <h3>Large</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>

        </div>
        <div>

            <div class="uk-tile uk-tile-primary uk-tile-large">
                <h3>Large</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>

        </div>
        <div>

            <div class="uk-tile uk-tile-secondary uk-tile-large">
                <h3>Large</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>

        </div>
    </div>
</div>

<div class="uk-section">
    <div class="uk-child-width-1-2@s uk-child-width-1-4@l uk-grid-collapse uk-grid-match" uk-grid>
        <div>

            <div class="uk-tile uk-tile-default uk-tile-xlarge">
                <h3>X-Large</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>

        </div>
        <div>

            <div class="uk-tile uk-tile-muted uk-tile-xlarge">
                <h3>X-Large</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>

        </div>
        <div>

            <div class="uk-tile uk-tile-primary uk-tile-xlarge">
                <h3>X-Large</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>

        </div>
        <div>

            <div class="uk-tile uk-tile-secondary uk-tile-xlarge">
                <h3>X-Large</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>

        </div>
    </div>
</div>