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>