Images & Videos

For information on usage and functionality, see the Images and Videos posts in Slab.

Image Styles

imgFrameLeft

There are several options available for styling images. You can "float" an image to the right or left, with text wrapping around them, either with or without a border. The image to the left is using the style "imgFrameLeft." The image is aligned to the left while the text wraps around to its right. A light gray border and padding are also applied automatically with this style.

imgFrameRight

By contrast, the image to the right is using the style "imgFrameRight." The image is floated to the right while text wraps around its left side. Note that to get this paragraph to not wrap around the image above, we applied a style called "clear" to the paragraph, which in effect turns off any preceding alignment.

imgFrame

The image above uses a style that has no float applied to it. This is what you want to use if the image you are using is not associated with a paragraph of text, but you still want the frame around it. Depending on where you apply this style to an image, it will depend whether it aligns left, right, or center.

Circular Image

This style will crop the image into a circle with a yellow border. Image must be at least 300px by 300px. It can be a square or a rectangle but note that this style will crop from the center of the image. Can be floated left and right.

Video Styles

media-left

Need to include a youtube video on your site? Similar to the image styles, the media styles allow for embedded or iframed elements to be floated left or right with the appropriate amount of padding for text. The amount of padding on the media classes is double that of the image classes as they do not have a border w/ margin applied.

media-right

This is the media-right class. It has the same amount of padding as media-left but is floated to the right.