Images
Images
image::https://d3gnpvjw8j16uq.cloudfront.net/assets/images/svg/diagrams/lightbend-platform-overview.svg[Lightbend Platform Overview]
Block Image Groups
Basic example
Images are vertically centered by default. Images will proportionately take up horizontal space based on their natural widths. On small screens the images will resort back to stacking in a column down the page.
[.image-group] -- image::https://via.placeholder.com/600x150[] image::https://via.placeholder.com/300x500[] image::https://via.placeholder.com/500x300[] --
Vertically align to top
[.image-group.top] -- image::https://via.placeholder.com/300x300[] image::https://via.placeholder.com/300x600[] image::https://via.placeholder.com/300x400[] image::https://via.placeholder.com/300x600[] image::https://via.placeholder.com/300x300[] image::https://via.placeholder.com/300x200[] --
Vertically align to bottom
[.image-group.bottom] -- image::https://via.placeholder.com/600x150[] image::https://via.placeholder.com/300x500[] image::https://via.placeholder.com/500x300[] --
Custom Widths
[.image-group] -- [.width-25] image::https://via.placeholder.com/600x300[] [.width-50] image::https://via.placeholder.com/600x300[] [.width-25] image::https://via.placeholder.com/600x300[] --
You can use the following widths
[.width-5] [.width-10] [.width-15] [.width-20] [.width-25] [.width-30] [.width-35] [.width-40] [.width-45] [.width-50] [.width-55] [.width-60] [.width-65] [.width-70] [.width-75] [.width-80] [.width-85] [.width-90] [.width-95] [.width-100]