Images - Quick Start Guide

Master image utility classes in 2 minutes

Back to Examples

What are Image Utilities?

RSL provides a comprehensive set of utility classes to control image sizing, shape, styling, and responsive behavior—all without writing custom CSS.

2-Minute Setup

1 Include Files

Required Files • HTML

2 Add Classes to Images

Example • HTML

Photo
✓ Done! Your image is now responsive, rounded, and has a shadow.

Complete Class Reference

Size Classes

ClassEffect
.responsive-imgScales to 100% of container width
.max-width-100Max width 100px
.max-width-200Max width 200px
.max-width-300Max width 300px
.max-width-400Max width 400px
.max-width-500Max width 500px
.min-width-100Min width 100px
.min-width-200Min width 200px
.min-width-300Min width 300px
.thumbnailMax width 150px (thumbnail size)
.full-widthForces 100% width

Shape Classes

ClassEffect
.rounded-smSmall rounded corners (4px)
.roundedMedium rounded corners (8px)
.rounded-lgLarge rounded corners (16px)
.circleCircular image (50% border-radius)

Style Classes

ClassEffect
.borderedAdds border with padding
.shadowAdds subtle drop shadow
.centerCenters image horizontally
.grayscaleGrayscale filter (color on hover)

Aspect Ratio Classes

ClassEffect
.aspect-squareForces 1:1 aspect ratio
.aspect-videoForces 16:9 aspect ratio

Common Combinations

Profile Photo: class="circle shadow max-width-200"
Thumbnail Gallery: class="thumbnail rounded"
Hero Image: class="responsive-img"
Product Image: class="responsive-img rounded bordered"

Pro Tips

✨ Tip 1: Combine multiple classes: responsive-img rounded shadow
✨ Tip 2: Use .responsive-img for most images to ensure mobile-friendly scaling
✨ Tip 3: .circle works best with square images (1:1 aspect ratio)
✨ Tip 4: Use .center for standalone images in text content
✨ Tip 5: .grayscale adds visual interest to image grids

ADA Compliance

Remember for accessibility:

  • ✅ Always include meaningful alt text
  • ✅ Use empty alt="" for decorative images
  • ✅ Ensure sufficient color contrast if text overlays images
  • ✅ Images should enhance, not replace, text content
Back to Examples