Table of Contents

Image Classes Demos

Here you will find demos for the available image classes to easily style your images when contributing to the docs.

The following classes are supported and ready to use:

  • full-width - makes the image span the full width with shadow and rounded corners
  • feature - limits height for feature images (max 100px)
  • float-right - floats the image to the right with left margin
  • right-thumbnail - floats a smaller thumbnail to the right
  • float-left - floats the image to the left with right margin
  • glow - adds a subtle shadow and rounded corners

Note, that you can combine multiple classes.

Full Width

The full-width class will responsively scale the image to the available container width and adds a subtle shadow with rounded corners.

<img src="./assets/image.png" class="full-width">

img.full-width {
  width: 100%;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  margin: 10px 0;
}

Result full-width

Feature

The feature class limits the height of images to a maximum of 100px while maintaining the aspect ratio. This is useful for logo or feature highlights.

<img src="./assets/image.png" class="feature">

img.feature {
  max-width: 100%;
  max-height: 100px;
}

Result feature

Float Right

The float-right class floats the image to the right side with proper margins on the left and bottom.

<img src="./assets/image.png" class="float-right">

img.float-right {
  float: right;
  margin-left: 20px;
  margin-bottom: 5px;
}

Result float-right

This is example text showing how the float-right class works. The image will appear on the right side of this text. Notice how the text wraps around the image. This is especially useful for creating a visual flow in your documentation where you want text to accompany an image without taking up too much vertical space.

Right Thumbnail

The right-thumbnail class floats a smaller thumbnail (25% width) to the right side with proper margins.

<img src="./assets/image.png" class="right-thumbnail">

img.right-thumbnail {
  float: right;
  margin-left: 20px;
  margin-bottom: 5px;
  width: 25%;
}

Result right-thumbnail

This demonstrates the right-thumbnail class. The image appears as a small thumbnail on the right side, taking up only 25% of the width. This is perfect for reference images that need to be visible but shouldn't dominate the layout.

Float Left

The float-left class floats the image to the left side with proper margins on the right and bottom.

<img src="./assets/image.png" class="float-left">

img.float-left {
  float: left;
  margin-right: 20px;
  margin-bottom: 5px;
}

Result float-left

This example shows the float-left class in action. The image appears on the left side with text flowing around it. This creates a nice visual balance and is useful when you want to lead with an image followed by explanatory text.

Glow

The glow class adds a subtle shadow and rounded corners to an image without changing its size or position.

<img src="./assets/image.png" class="glow">

img.glow {
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  margin: 10px 0;
}

Result glow

Edit this page