Image Styles

Tools and styles for enhancing and manipulating images.

Image Classes

Class Name Description Example
.img-round Shapes the image into a perfect circle.
.img-round-outline Gives the image a full circular shape with a solid white outline.
.img-rounded Applies a small, uniform border-radius to create rounded corners.
.img-center Centers the image.
.img-left Floats the image to the left of the parent element.
.img-right Floats the image to the right of the parent element.
.img-responsive Makes an image scale nicely to the parent element.

    <!-- Round Image -->
    <img src="path-to-image.jpg" class="img-round" alt="">
    <!-- Round Image with Outline -->
    <img src="path-to-image.jpg" class="img-round-outline" alt="">
    <!-- Rounded Image -->
    <img src="path-to-image.jpg" class="img-rounded" alt="">
    <!-- Centered Image -->
    <img src="path-to-image.jpg" class="img-center" alt="">
    <!-- Left-aligned Image -->
    <img src="path-to-image.jpg" class="img-left" alt="">
    <!-- Right-aligned Image -->
    <img src="path-to-image.jpg" class="img-right" alt="">
    <!-- Responsive Image -->
    <img src="path-to-image.jpg" class="img-responsive" alt="">

Icon Containers

Containers designed specifically to hold and display icons.


The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.