Gallery

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

Gallery

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

Gallery with spacing and overflow

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

Gallery sizes

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

Join 23000+ others and subscribe to our newsletter!