Gallery

The gallery contains a list of items with the limit and pagination elements on the bottom.

<div class="k-gallery">
    <div class="k-gallery__items">
        <div class="k-gallery__item k-gallery__item--folder">
            <div class="k-card">
                <div class="k-card__body">
                    <div class="k-card__section ">
                        Section
                    </div>
                </div>
            </div>
        </div>
        <div class="k-gallery__item k-gallery__item--folder">
            <div class="k-card">
                <div class="k-card__body">
                    <div class="k-card__section ">
                        Section
                    </div>
                </div>
            </div>
        </div>
        <div class="k-gallery__item k-gallery__item--folder">
            <div class="k-card">
                <div class="k-card__body">
                    <div class="k-card__section ">
                        Section
                    </div>
                </div>
            </div>
        </div>
        <div class="k-gallery__item k-gallery__item--file">
            <div class="k-card">
                <div class="k-card__body">
                    <div class="k-card__header">
                        Title
                    </div>
                </div>
            </div>
        </div>
        <div class="k-gallery__item k-gallery__item--file">
            <div class="k-card">
                <div class="k-card__body">
                    <div class="k-card__header">
                        Title
                    </div>
                </div>
            </div>
        </div>
        <div class="k-gallery__item k-gallery__item--file">
            <div class="k-card">
                <div class="k-card__body">
                    <div class="k-card__header">
                        Title
                    </div>
                </div>
            </div>
        </div>
        <div class="k-gallery__item k-gallery__item--file">
            <div class="k-card">
                <div class="k-card__body">
                    <div class="k-card__header">
                        Title
                    </div>
                </div>
            </div>
        </div>
        <div class="k-gallery__item k-gallery__item--file">
            <div class="k-card">
                <div class="k-card__body">
                    <div class="k-card__header">
                        Title
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="k-gallery-container">
    <div class="k-gallery">
        <div class="k-gallery__items">
            <div class="k-gallery__item k-gallery__item--folder">
                <div class="k-card">
                    <div class="k-card__body">
                        <div class="k-card__section ">
                            Section
                        </div>
                    </div>
                </div>
            </div>
            <div class="k-gallery__item k-gallery__item--folder">
                <div class="k-card">
                    <div class="k-card__body">
                        <div class="k-card__section ">
                            Section
                        </div>
                    </div>
                </div>
            </div>
            <div class="k-gallery__item k-gallery__item--folder">
                <div class="k-card">
                    <div class="k-card__body">
                        <div class="k-card__section ">
                            Section
                        </div>
                    </div>
                </div>
            </div>
            <div class="k-gallery__item k-gallery__item--file">
                <div class="k-card">
                    <div class="k-card__body">
                        <div class="k-card__header">
                            Title
                        </div>
                    </div>
                </div>
            </div>
            <div class="k-gallery__item k-gallery__item--file">
                <div class="k-card">
                    <div class="k-card__body">
                        <div class="k-card__header">
                            Title
                        </div>
                    </div>
                </div>
            </div>
            <div class="k-gallery__item k-gallery__item--file">
                <div class="k-card">
                    <div class="k-card__body">
                        <div class="k-card__header">
                            Title
                        </div>
                    </div>
                </div>
            </div>
            <div class="k-gallery__item k-gallery__item--file">
                <div class="k-card">
                    <div class="k-card__body">
                        <div class="k-card__header">
                            Title
                        </div>
                    </div>
                </div>
            </div>
            <div class="k-gallery__item k-gallery__item--file">
                <div class="k-card">
                    <div class="k-card__body">
                        <div class="k-card__header">
                            Title
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="k-gallery k-gallery--xxs">
    <div class="k-gallery__items">
        <div class="k-gallery__item k-gallery__item--file">
            <div class="k-card">
                <div class="k-card__body">
                    <div class="k-card__header">
                        Title
                    </div>
                </div>
            </div>
        </div>
        <div class="k-gallery__item k-gallery__item--file">
            <div class="k-card">
                <div class="k-card__body">
                    <div class="k-card__header">
                        Title
                    </div>
                </div>
            </div>
        </div>
        <div class="k-gallery__item k-gallery__item--file">
            <div class="k-card">
                <div class="k-card__body">
                    <div class="k-card__header">
                        Title
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="k-gallery k-gallery--xs">
    <div class="k-gallery__items">
        <div class="k-gallery__item k-gallery__item--file">
            <div class="k-card">
                <div class="k-card__body">
                    <div class="k-card__header">
                        Title
                    </div>
                </div>
            </div>
        </div>
        <div class="k-gallery__item k-gallery__item--file">
            <div class="k-card">
                <div class="k-card__body">
                    <div class="k-card__header">
                        Title
                    </div>
                </div>
            </div>
        </div>
        <div class="k-gallery__item k-gallery__item--file">
            <div class="k-card">
                <div class="k-card__body">
                    <div class="k-card__header">
                        Title
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="k-gallery k-gallery--s">
    <div class="k-gallery__items">
        <div class="k-gallery__item k-gallery__item--file">
            <div class="k-card">
                <div class="k-card__body">
                    <div class="k-card__header">
                        Title
                    </div>
                </div>
            </div>
        </div>
        <div class="k-gallery__item k-gallery__item--file">
            <div class="k-card">
                <div class="k-card__body">
                    <div class="k-card__header">
                        Title
                    </div>
                </div>
            </div>
        </div>
        <div class="k-gallery__item k-gallery__item--file">
            <div class="k-card">
                <div class="k-card__body">
                    <div class="k-card__header">
                        Title
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="k-gallery k-gallery--l">
    <div class="k-gallery__items">
        <div class="k-gallery__item k-gallery__item--file">
            <div class="k-card">
                <div class="k-card__body">
                    <div class="k-card__header">
                        Title
                    </div>
                </div>
            </div>
        </div>
        <div class="k-gallery__item k-gallery__item--file">
            <div class="k-card">
                <div class="k-card__body">
                    <div class="k-card__header">
                        Title
                    </div>
                </div>
            </div>
        </div>
        <div class="k-gallery__item k-gallery__item--file">
            <div class="k-card">
                <div class="k-card__body">
                    <div class="k-card__header">
                        Title
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="k-gallery k-gallery--xl">
    <div class="k-gallery__items">
        <div class="k-gallery__item k-gallery__item--file">
            <div class="k-card">
                <div class="k-card__body">
                    <div class="k-card__header">
                        Title
                    </div>
                </div>
            </div>
        </div>
        <div class="k-gallery__item k-gallery__item--file">
            <div class="k-card">
                <div class="k-card__body">
                    <div class="k-card__header">
                        Title
                    </div>
                </div>
            </div>
        </div>
        <div class="k-gallery__item k-gallery__item--file">
            <div class="k-card">
                <div class="k-card__body">
                    <div class="k-card__header">
                        Title
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="k-gallery k-gallery--xxl">
    <div class="k-gallery__items">
        <div class="k-gallery__item k-gallery__item--file">
            <div class="k-card">
                <div class="k-card__body">
                    <div class="k-card__header">
                        Title
                    </div>
                </div>
            </div>
        </div>
        <div class="k-gallery__item k-gallery__item--file">
            <div class="k-card">
                <div class="k-card__body">
                    <div class="k-card__header">
                        Title
                    </div>
                </div>
            </div>
        </div>
        <div class="k-gallery__item k-gallery__item--file">
            <div class="k-card">
                <div class="k-card__body">
                    <div class="k-card__header">
                        Title
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Need Help?

Let our developers personally assist you. You can ask development related questions in our Support Center. Only for Business or Agency subscribers.