Images

Responsive images

Live
Added in version 0.1.0
Last updated in version 0.8.0
Link to section

Images should be responsive by default. No need to add extra classes or styling.

Sky at Halley VI research station | Tom Wales / BAS

<img src="https://style-kit.web.bas.ac.uk/0.7.4-beta.1/images/responsive-image.jpg" alt="Sky at Halley VI research station | Tom Wales / BAS">

Image shapes

Live
Added in version 0.1.0
Last updated in version 0.8.0
Link to section

Use Tailwind classes to round the edges of elements.
Use .bsk-image-thumbnail to apply extra styles to help the element display an image thumbnail.

<img class="inline-block rounded-xl" src="https://style-kit.web.bas.ac.uk/0.7.4-beta.1/images/placeholder/placeholder-150.png" alt="Rounded image" >
<img class="inline-block rounded-full" src="https://style-kit.web.bas.ac.uk/0.7.4-beta.1/images/placeholder/placeholder-150.png" alt="Circular image">
<img class="inline-block bsk-image-thumbnail" src="https://style-kit.web.bas.ac.uk/0.7.4-beta.1/images/placeholder/placeholder-150.png" alt="Thumbnail image">