Media Object
The Media Object shows text and a figure next to each other. Some presets are defined for specific use cases throughout this design.
The Media Object can be used as a container on any element by adding the .vi-media-object class.
Inside are the two required elements. The figure (typically an image or an icon) should be placed inside an element with the .vi-media-boject__figure class.
Next to it, in any order, is typically some text that should be placed in an element with the .vi-media-object__body class.
Modifiers are used to provide presets as used troughout the design.
Bushwick hashtag sriracha. Try-hard pbr&b 90's williamsburg blue bottle. Offal echo meggings butcher locavore etsy. Normcore typewriter venmo before they sold out. Brunch kitsch tilde narwhal dreamcatcher. Celiac umami ramps post-ironic.
<!-- Media object -->
<div class="vi-media-object">
<div class="vi-media-object__figure">
<!-- Rectangular Image (mods: --square) -->
<div class="vi-rectangular-image vi-rectangular-image--square"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-120x90.jpg"></div>
</div>
<div class="vi-media-object__body">
<p>Bushwick hashtag sriracha. Try-hard pbr&b 90's williamsburg blue bottle. Offal echo meggings butcher locavore etsy. Normcore typewriter venmo before they sold out. Brunch kitsch tilde narwhal dreamcatcher. Celiac umami ramps post-ironic.</p>
</div>
</div>Reversed order #
The figure and the body added in reversed order.
Tacos neutra ramps phlogiston semiotics raw denim retro. Deep v hoodie vinegar post-ironic 8-bit yolo carry. Biodiesel vinegar blue bottle pabst photo booth neutra everyday disrupt. Fanny pack butcher truffaut offal salvia. Biodiesel church-key godard. Authentic offal pop-up. Poutine franzen hoodie raw denim.
<!-- Media object -->
<div class="vi-media-object">
<div class="vi-media-object__body">
<p>Tacos neutra ramps phlogiston semiotics raw denim retro. Deep v hoodie vinegar post-ironic 8-bit yolo carry. Biodiesel vinegar blue bottle pabst photo booth neutra everyday disrupt. Fanny pack butcher truffaut offal salvia. Biodiesel church-key godard. Authentic offal pop-up. Poutine franzen hoodie raw denim.</p>
</div>
<div class="vi-media-object__figure">
<!-- Rectangular Image (mods: --square) -->
<div class="vi-rectangular-image vi-rectangular-image--square"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-120x90.jpg"></div>
</div>
</div>Double #
Two figures and a body in between.
Tousled listicle phlogiston wayfarers poutine shoreditch loko. Waistcoat godard hella chartreuse chia quinoa trust fund. Try-hard cliche listicle shoreditch +1 scenester slow-carb. Park irony pinterest bicycle rights pug banjo. Flannel vice biodiesel literally carry letterpress church-key. Before they sold out chambray bespoke thundercats hella organic banjo. Selvage actually normcore. Lo-fi street ramps slow-carb chartreuse cleanse vhs.
<!-- Media object -->
<div class="vi-media-object">
<div class="vi-media-object__figure">
<!-- Rectangular Image (mods: --square) -->
<div class="vi-rectangular-image vi-rectangular-image--square"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-120x90.jpg"></div>
</div>
<div class="vi-media-object__body">
<p>Tousled listicle phlogiston wayfarers poutine shoreditch loko. Waistcoat godard hella chartreuse chia quinoa trust fund. Try-hard cliche listicle shoreditch +1 scenester slow-carb. Park irony pinterest bicycle rights pug banjo. Flannel vice biodiesel literally carry letterpress church-key. Before they sold out chambray bespoke thundercats hella organic banjo. Selvage actually normcore. Lo-fi street ramps slow-carb chartreuse cleanse vhs.</p>
</div>
<div class="vi-media-object__figure">
<!-- Rectangular Image (mods: --square) -->
<div class="vi-rectangular-image vi-rectangular-image--square"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-120x90.jpg"></div>
</div>
</div>Nested #
The media object can be nested.
Migas retro leggings whatever. Brunch gluten-free park iphone venmo marfa phlogiston pork belly. Thundercats echo retro bicycle rights normcore chambray pop-up seitan. Sustainable pabst try-hard. Muggle magic loko kitsch franzen 90's. Meggings polaroid banh mi kickstarter etsy bicycle rights chia.
Chia humblebrag flexitarian cronut yolo ennui. Vinegar cold-pressed roof cardigan loko carry stumptown. Pork belly ugh seitan. Church-key master green juice bitters forage cred next level. Vice williamsburg actually bicycle rights wayfarers fashion axe mustache marfa. Keffiyeh +1 occupy synth kombucha scenester master schlitz. Synth chartreuse viral distillery vinegar. Tumblr cleanse poutine paleo next level park tilde single-origin coffee.
<!-- Media object -->
<div class="vi-media-object">
<div class="vi-media-object__figure">
<!-- Rectangular Image (mods: --square) -->
<div class="vi-rectangular-image vi-rectangular-image--square"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-120x90.jpg"></div>
</div>
<div class="vi-media-object__body">
<p>Migas retro leggings whatever. Brunch gluten-free park iphone venmo marfa phlogiston pork belly. Thundercats echo retro bicycle rights normcore chambray pop-up seitan. Sustainable pabst try-hard. Muggle magic loko kitsch franzen 90's. Meggings polaroid banh mi kickstarter etsy bicycle rights chia.</p>
<!-- Media object -->
<div class="vi-media-object">
<div class="vi-media-object__figure">
<!-- Rectangular Image (mods: --square) -->
<div class="vi-rectangular-image vi-rectangular-image--square"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-120x90.jpg"></div>
</div>
<div class="vi-media-object__body">
<p>Chia humblebrag flexitarian cronut yolo ennui. Vinegar cold-pressed roof cardigan loko carry stumptown. Pork belly ugh seitan. Church-key master green juice bitters forage cred next level. Vice williamsburg actually bicycle rights wayfarers fashion axe mustache marfa. Keffiyeh +1 occupy synth kombucha scenester master schlitz. Synth chartreuse viral distillery vinegar. Tumblr cleanse poutine paleo next level park tilde single-origin coffee.</p>
</div>
</div>
</div>
</div>Modifiers
The following modifiers are available:
Gap width #
Use modefier --gap-{size} on .vi-media-object to define different gaps between body and figure elements.
The classes are named using the format --gap-{size} for xs and --gap-{breakpoint}-{size} for sm, md, lg, xl and xxl.
Following sizes are defined: 0, 10, 15, 20 and 30
Gluten-free meditation umami sriracha viral ethical. Goth selfies gluten-free trust fund. Polaroid carry swag thundercats. Muggle magic ugh twee irony kombucha. Kinfolk bespoke semiotics sriracha wes anderson. Phlogiston pinterest slow-carb health pabst farm-to-table.
<!-- Media object (mods: --gap-30) -->
<div class="vi-media-object vi-media-object--gap-30">
<div class="vi-media-object__figure">
<!-- Rectangular Image (mods: --square) -->
<div class="vi-rectangular-image vi-rectangular-image--square"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-120x90.jpg"></div>
</div>
<div class="vi-media-object__body">
<p>Gluten-free meditation umami sriracha viral ethical. Goth selfies gluten-free trust fund. Polaroid carry swag thundercats. Muggle magic ugh twee irony kombucha. Kinfolk bespoke semiotics sriracha wes anderson. Phlogiston pinterest slow-carb health pabst farm-to-table.</p>
</div>
</div>Figure width #
Use modefier --w-{size} on .vi-media-object__figure to define different widths for the figure.
The classes are named using the format --w-{size} for xs and --w-{breakpoint}-{size} for sm, md, lg, xl and xxl.
Following sizes are defined: 20, 30, 40, 60 and 80
Single-origin coffee blog wolf marfa celiac helvetica. Ugh flexitarian single-origin coffee authentic kombucha kickstarter. Authentic semiotics iphone typewriter hammock cliche. Lo-fi you probably haven't heard of them artisan tote bag trust fund cray echo. Migas church-key muggle magic gastropub. Salvia before they sold out typewriter drinking austin.
<!-- Media object -->
<div class="vi-media-object">
<!-- Media object figure with (mods: --w-20) -->
<div class="vi-media-object__figure vi-media-object__figure--w-20">
<!-- Rectangular Image (mods: --square) -->
<div class="vi-rectangular-image vi-rectangular-image--square"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-120x90.jpg"></div>
</div>
<div class="vi-media-object__body">
<p>Single-origin coffee blog wolf marfa celiac helvetica. Ugh flexitarian single-origin coffee authentic kombucha kickstarter. Authentic semiotics iphone typewriter hammock cliche. Lo-fi you probably haven't heard of them artisan tote bag trust fund cray echo. Migas church-key muggle magic gastropub. Salvia before they sold out typewriter drinking austin.</p>
</div>
</div>