Images

Responsive images

Use .c-img-responsive for responsive design. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

.c-container--fluid
  .c-row
    .c-col--md-2
      img.c-img-responsive src="image.png"
    .c-col--md-3
      img.c-img-responsive src="image.png"
    .c-col--md-4
      img.c-img-responsive src="image.png"

<div class="c-container--fluid">
  <div class="c-row">
    <div class="c-col--md-2">
      <img class="c-img-responsive" src="image.png" />
    </div>
    <div class="c-col--md-3">
      <img class="c-img-responsive" src="image.png" />
    </div>
    <div class="c-col--md-4">
      <img class="c-img-responsive" src="image.png" />
    </div>
  </div>
</div>

Bordered images

Use .c-img-bordered to add a border to an image.

img.c-img-bordered src="white-image.png" width="200" height="200"

<img class="c-img-bordered" src="white-image.png" width="200" height="200" />