Circle Images

Now with superpowers

Circles on images

By default there is no border but you can use the bd modifiers to define the width of the border.

<!-- Image Circle default -->
<img src="../static/img/chuck.jpg" class="image-circle" width="150" />

<!-- Image Circle width border small -->
<img src="../static/img/chuck.jpg" class="image-circle bda-s" width="150" />

<!-- Image Circle width border medium -->
<img src="../static/img/chuck.jpg" class="image-circle bda-m" width="150" />

<!-- Image Circle width border large -->
<img src="../static/img/chuck.jpg" class="image-circle bda-l" width="150" />

<!-- Image Circle width border extra large -->
<img src="../static/img/chuck.jpg" class="image-circle bda-xl" width="150" />

Circles on links with images inside

By default there is no border but you can use the bd modifiers to define the width of the border.

<!-- Image Circle default -->
<a href="#" class="image-circle">
	<img src="../static/img/chuck.jpg" width="150" />
</a>

<!-- Image Circle width border small -->
<a href="#" class="image-circle bda-s">
	<img src="../static/img/chuck.jpg" width="150" />
</a>

<!-- Image Circle width border medium -->
<a href="#" class="image-circle bda-m">
	<img src="../static/img/chuck.jpg" width="150" />
</a>

<!-- Image Circle width border large -->
<a href="#" class="image-circle bda-l">
	<img src="../static/img/chuck.jpg" width="150" />
</a>

<!-- Image Circle width border extra large -->
<a href="#" class="image-circle bda-xl">
	<img src="../static/img/chuck.jpg" width="150" />
</a>