Epic CSS / Documentation

Images

Use border-r-16 to choose rounded image corners, and add img-center or center to center a smaller image. Responsive sizing is automatic.

Responsive images with a radius utility

Add border-r-16 directly to the image for a 16-pixel radius. Epic CSS also gives every img max-width: 100% and height: auto. Large images shrink to fit their container while keeping their aspect ratio; small images do not stretch to full width automatically.

HTML Copy HTML

<img class="border-r-16" src="/assets/placeholder.png"
  alt="Placeholder landscape with pale hills and a sun"
  width="1200" height="800">

The local image is 1200 by 800 pixels. Its HTML dimensions describe that aspect ratio; the responsive CSS lets it shrink with the available space.

Choose a border radius

border-r-16 chooses 16px, while border-r-4 chooses 4px for smaller corners. Both override Epic CSS's global image default of 1rem. The examples use an explicit radius class so you can copy your chosen style.

HTML Copy HTML

<img class="border-r-16" src="/assets/placeholder.png"
  alt="Placeholder landscape with pale hills and a sun"
  width="300" height="200">

HTML Copy HTML

<img class="border-r-4" src="/assets/placeholder.png"
  alt="Placeholder landscape with pale hills and a sun"
  width="300" height="200">

Center a smaller image

Use img-center or center on the image itself. Both set display: block and automatic left and right margins. Centering is visible only when the image is narrower than its container. These examples use a width of 300 pixels; max-width: 100% still lets them shrink on narrower screens.

HTML Copy HTML

<img class="border-r-16 img-center" src="/assets/placeholder.png"
  alt="Placeholder landscape with pale hills and a sun"
  width="300" height="200">

HTML Copy HTML

<img class="border-r-16 center" src="/assets/placeholder.png"
  alt="Placeholder landscape with pale hills and a sun"
  width="300" height="200">

On images, img-center also resets vertical margins to zero outside articles; center changes only horizontal margins.

Images inside articles

Any image inside an article, including a nested or centered image, receives margin-bottom: 2rem automatically. No spacing class is needed.

Article text follows the image's automatic bottom margin.

HTML Copy HTML

<article>
  <img class="border-r-16 img-center" src="/assets/placeholder.png"
    alt="Placeholder landscape with pale hills and a sun"
    width="300" height="200">
  <p>Article text follows the image's automatic bottom margin.</p>
</article>

This documentation page itself uses an article wrapper, so all image previews above also receive the article spacing. Outside an article, the global image styles do not add that bottom margin. Other surrounding margins can affect the visible gap.