Images

Images in BaseWeb are handles responsively be default. You’re also provided a few class modifiers for commonly used image styles as well as image alignment classes.

<img src="...">
Placeholder image

Also available are alignment modifiers that help position images within the context of a document. There are also a few stylistic modifiers for commonly used image effects.

.align-left

Floats an image to the left and adds top, right and bottom margins so that text wraps around the image properly.

<img class="align-left" src="...">
Placeholder image

.align-center

Centers an image by making it block and giving it left and right margins of auto.

<img class="align-center" src="...">
Placeholder image

.align-right

Floats an image to the right and adds top, left and bottom margins so that text wraps around the image properly.

<img class="align-right" src="...">
Placeholder image

.rounded

Adds rounded border radius based on the default border-radius setting $border-radius.

<img class="rounded" src="...">
Placeholder image

.circle

Makes a circle effect on an image by adding 50% border radius.

<img class="circle" src="...">
Placeholder image

.polaroid

Adds a polaroid effect to an image.

<img class="polaroid" src="...">
Placeholder image