Media

Types

Default media object

<article class="env-media">
   <div class="env-media__figure">
      <a href="#">
         <img
            class="env-image env-image--small"
            src="https://envisionui.io/placeholders/text/400x400.png"
            alt="Example image"
         />
      </a>
   </div>
   <div class="env-media__body">
      <h3 class="env-ui-text-subheading">
         <a href="#" class="env-link-secondary">Emma</a>
      </h3>
      <p class="env-ui-text-caption">
         Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id
         dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit
         tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus
         non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae
         scelerisque.
      </p>
   </div>
</article>

Default media object with actions menu

<article class="env-media">
   <div class="env-media__figure">
      <a href="#">
         <img
            class="env-image env-image--small"
            src="https://envisionui.io/placeholders/text/400x400.png"
            alt="Example image"
         />
      </a>
   </div>
   <div class="env-media__body">
      <h3 class="env-ui-text-subheading">
         <a href="#" class="env-link-secondary">Emma</a>
      </h3>
      <p class="env-ui-text-caption">
         Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id
         dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit
         tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus
         non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae
         scelerisque.
      </p>
   </div>
   <div class="env-media__actions">
      <button
         type="button"
         class="env-button env-button--icon"
         aria-haspopup="true"
         title="More options"
      >
         <svg class="env-icon">
            <use
               xlink:href="/sitevision/envision-icons.svg#icon-arrow-down"
            ></use>
         </svg>
         <span class="env-assistive-text">More options</span>
      </button>
   </div>
</article>

Inline media object

<article class="env-media">
   <div class="env-media__figure">
      <a href="#">
         <img
            class="env-image env-image--small"
            src="https://envisionui.io/placeholders/text/400x400.png"
            alt="Example image"
         />
      </a>
   </div>
   <div class="env-media__body env-media__body--inline">
      <h3 class="env-ui-text-subheading">
         <a href="#" class="env-link-secondary">Emma</a>
      </h3>
      <p class="env-ui-text-caption">
         Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id
         dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit
         tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus
         non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae
         scelerisque.
      </p>
   </div>
</article>

Column media object

<article class="env-media env-media--column">
   <div class="env-media__figure">
      <a href="#">
         <img
            class="env-image"
            src="https://envisionui.io/placeholders/text/200x200.png"
            alt="Example image"
         />
      </a>
   </div>
   <div class="env-media__body">
      <h3 class="env-ui-text-subheading">
         <a href="#" class="env-link-secondary">Emma</a>
      </h3>
      <p class="env-ui-text-caption">
         Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id
         dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit
         tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus
         non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae
         scelerisque.
      </p>
   </div>
</article>

Alignment

Center

<article class="env-media env-media--center">
   <div class="env-media__figure">
      <a href="#">
         <img
            class="env-image env-image--small"
            src="https://envisionui.io/placeholders/text/400x400.png"
            alt="Example image"
         />
      </a>
   </div>
   <div class="env-media__body">
      <h3 class="env-ui-text-subheading">
         <a href="#" class="env-link-secondary">Emma</a>
      </h3>
      <p class="env-ui-text-caption">
         Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id
         dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit
         tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus
         non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae
         scelerisque.
      </p>
   </div>
</article>
<article class="env-media env-media--column env-media--center">
   <div class="env-media__figure">
      <a href="#">
         <img
            class="env-image"
            src="https://envisionui.io/placeholders/text/200x200.png"
            alt="Example image"
         />
      </a>
   </div>
   <div class="env-media__body">
      <h3 class="env-ui-text-subheading">
         <a href="#" class="env-link-secondary">Emma</a>
      </h3>
      <p class="env-ui-text-caption">
         Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id
         dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit
         tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus
         non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae
         scelerisque.
      </p>
   </div>
</article>

Alignment modifiers can also be applied to elements within the media container (__figure & __body)

<article class="env-media env-media--column env-media">
   <div class="env-media__figure env-media__figure--center">
      <a href="#">
         <img
            class="env-image"
            src="https://envisionui.io/placeholders/text/200x200.png"
            alt="Example image"
         />
      </a>
   </div>
   <div class="env-media__body">
      <h3 class="env-ui-text-subheading">
         <a href="#" class="env-link-secondary">Emma</a>
      </h3>
      <p class="env-ui-text-caption">
         Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id
         dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit
         tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus
         non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae
         scelerisque.
      </p>
   </div>
</article>

Bottom

<article class="env-media env-media--bottom">
   <div class="env-media__figure">
      <a href="#">
         <img
            class="env-image env-image--small"
            src="https://envisionui.io/placeholders/text/400x400.png"
            alt="Example image"
         />
      </a>
   </div>
   <div class="env-media__body">
      <h3 class="env-ui-text-subheading">
         <a href="#" class="env-link-secondary">Emma</a>
      </h3>
      <p class="env-ui-text-caption">
         Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id
         dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit
         tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus
         non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae
         scelerisque.
      </p>
   </div>
</article>

Order

Reverse

<article class="env-media env-media--reverse">
   <div class="env-media__figure">
      <a href="#">
         <img
            class="env-image env-image--small"
            src="https://envisionui.io/placeholders/text/400x400.png"
            alt="Example image"
         />
      </a>
   </div>
   <div class="env-media__body">
      <h3 class="env-ui-text-subheading">
         <a href="#" class="env-link-secondary">Emma</a>
      </h3>
      <p class="env-ui-text-caption">
         Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id
         dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit
         tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus
         non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae
         scelerisque.
      </p>
   </div>
</article>

Nesting

<article class="env-media">
   <div class="env-media__figure">
      <a href="#">
         <img
            class="env-image env-image--small"
            src="https://envisionui.io/placeholders/text/400x400.png"
            alt="Example image"
         />
      </a>
   </div>
   <div class="env-media__body">
      <h3 class="env-ui-text-subheading">
         <a href="#" class="env-link-secondary">Emma</a>
      </h3>
      <p class="env-ui-text-caption">
         Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id
         dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit
         tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus
         non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae
         scelerisque.
      </p>
      <article class="env-media">
         <div class="env-media__figure">
            <a href="#">
               <img
                  class="env-image env-image--small"
                  src="https://envisionui.io/placeholders/text/400x400.png"
                  alt="Example image"
               />
            </a>
         </div>
         <div class="env-media__body">
            <h3 class="env-ui-text-subheading">
               <a href="#" class="env-link-secondary">Emma</a>
            </h3>
            <p class="env-ui-text-caption">
               Cras varius, felis a accumsan accumsan, tellus elit maximus
               purus, id dignissim sem odio at eros. Morbi vel commodo diam.
               Integer hendrerit tellus nec ligula egestas consequat. Curabitur
               sapien mauris, rhoncus non blandit eu, rhoncus ut sem.
               Pellentesque elementum non augue vitae scelerisque.
            </p>
         </div>
      </article>
   </div>
</article>