How to use
Show a heading, a text, a button and three images together. Every field is optional. The primary image is always the largest, the secondary the second largest and the tertiary the smallest. Each image can carry its own caption and alternative text. On narrow screens the primary image is on top, with the other two side by side below it. On wider areas the primary image sits beside the other two, and on wide areas the text sits beside the images. The images change shape as the area gets wider.
Variants
Heading, text, button and three captioned images
The block with every field filled in.
Built for the way you work
From the first sketch to the finished page, editors place their own images and words. Every block adapts to the screen it is read on.
No captions
Heading, text, button and three images, without captions.
Built for the way you work
From the first sketch to the finished page, editors place their own images and words. Every block adapts to the screen it is read on.
No button
Heading, text and three captioned images, without a button.
Built for the way you work
From the first sketch to the finished page, editors place their own images and words. Every block adapts to the screen it is read on.
Images only
Three captioned images, without a heading, text or button. With no text beside them, the images fill the full width.
Primary image only
Heading, text and a captioned primary image, without the secondary and tertiary images.
Built for the way you work
From the first sketch to the finished page, editors place their own images and words. Every block adapts to the screen it is read on.
No images
Heading, text and button, without images.
Built for the way you work
From the first sketch to the finished page, editors place their own images and words. Every block adapts to the screen it is read on.
Images without alternative text
Three images with no alternative text. Screen readers get each image's own description, or skip an image that has none.
Built for the way you work
From the first sketch to the finished page, editors place their own images and words. Every block adapts to the screen it is read on.
Layout preview
4 copies of one example in a layout block. Change the settings to see how the block fits each layout.
Built for the way you work
From the first sketch to the finished page, editors place their own images and words. Every block adapts to the screen it is read on.
Built for the way you work
From the first sketch to the finished page, editors place their own images and words. Every block adapts to the screen it is read on.
Built for the way you work
From the first sketch to the finished page, editors place their own images and words. Every block adapts to the screen it is read on.
Built for the way you work
From the first sketch to the finished page, editors place their own images and words. Every block adapts to the screen it is read on.