Media Styles

Images

Expressive has classes for responsive and circular images.

Responsive images

Add the class responsive-img to an image to make it resize with the page width. The image gets max-width: 100%, height: auto, and 12px corners.

<img class="responsive-img" src="cool_pic.jpg">

Circular images

To make an image circular, add class="circle" to it.

<div class="row">
  <div class="s12">
    <article>
      <div class="row align-center">
        <div class="s3">
          <img src="portrait.jpg" alt="" class="circle responsive-img">
        </div>
        <div class="s9">
          <span>
            This is a square image. Add the "circle" class to it to make it appear circular.
          </span>
        </div>
      </div>
    </article>
  </div>
</div>

Videos

Wrap embedded videos in a container that resizes them with the page.

Responsive embeds

To make an embed responsive, wrap it in a div with the class video-container. The container clips the iframe to the same 12px corners.

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/Q8TXgCzxEnw?rel=0" allowfullscreen></iframe>
</div>

Responsive videos

To make an HTML5 video responsive, add the class responsive-video to the video tag. It gets the same 12px corners as responsive-img.

<video class="responsive-video" controls>
  <source src="movie.mp4" type="video/mp4">
</video>