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]