Galleries

Regular gallery: gallery

gallery uses three columns by default; add cols-2 to cols-6 to choose the number. Each image must be alone in a paragraph, with a blank line between images.

<!-- _class: content gallery cols-3 bg with-title with-legend -->

# Three viewpoints

![](vue-a.png)

![](vue-b.png)

![](vue-c.png)

Illustrative images.

With cards, the image frames are styled:

<!-- _class: content gallery cols-4 bg cards with-title color-4 -->

# Four moods

![](image-1.png)

![](image-2.png)

![](image-3.png)

![](image-4.png)

What you need to know:

• Frames are 200 pixels tall in this version; small changes the text, not this height.
• The gallery does not paginate automatically and does not adapt to a growing number of images: beyond what fits, create another slide.
• with-legend provides one caption for the whole slide, not one per image.

Bento grid: gallery-bento

gallery-bento expects exactly six images, in six consecutive paragraphs. It has four columns of different widths and two rows.

Image	Position
1	First column, spanning both rows
2	First row, columns 2 and 3
3	First row, column 4
4	Second row, column 2
5	Second row, column 3
6	Second row, column 4

<!-- _class: content gallery-bento bg with-title -->

# Bento grid

![](image-1.png)

![](image-2.png)

![](image-3.png)

![](image-4.png)

![](image-5.png)

![](image-6.png)

No paragraph in between

The position of each image depends on its rank among the paragraphs. Do not add introductory text between the title and the images. A final caption is still possible with with-legend. cols-N does not apply to the bento grid.