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.
Master fixie pickled tousled whatever brunch bespoke. Migas thundercats meh truffaut. Crucifix taxidermy yuccie photo booth beard williamsburg. Tacos pug iphone yuccie shoreditch humblebrag listicle pinterest. Try-hard pitchfork truffaut sartorial fixie offal lumbersexual. Neutra echo loko synth vhs. Pop-up wolf waistcoat gastropub sartorial aesthetic keffiyeh blue bottle. Cleanse messenger bag migas master.
<!-- 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>Master fixie pickled tousled whatever brunch bespoke. Migas thundercats meh truffaut. Crucifix taxidermy yuccie photo booth beard williamsburg. Tacos pug iphone yuccie shoreditch humblebrag listicle pinterest. Try-hard pitchfork truffaut sartorial fixie offal lumbersexual. Neutra echo loko synth vhs. Pop-up wolf waistcoat gastropub sartorial aesthetic keffiyeh blue bottle. Cleanse messenger bag migas master.</p>
</div>
</div>Reversed order #
The figure and the body added in reversed order.
Semiotics bitters vinegar crucifix swag street. Listicle thundercats sustainable chia. Direct trade cronut lumbersexual keytar disrupt kitsch selfies. Hashtag pabst asymmetrical marfa raw denim fanny pack leggings mumblecore. Direct trade photo booth distillery. Fanny pack ennui keffiyeh leggings blue bottle cold-pressed retro swag.
<!-- Media object -->
<div class="vi-media-object">
<div class="vi-media-object__body">
<p>Semiotics bitters vinegar crucifix swag street. Listicle thundercats sustainable chia. Direct trade cronut lumbersexual keytar disrupt kitsch selfies. Hashtag pabst asymmetrical marfa raw denim fanny pack leggings mumblecore. Direct trade photo booth distillery. Fanny pack ennui keffiyeh leggings blue bottle cold-pressed retro swag.</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.
Squid drinking literally trust fund pitchfork small batch vhs. Knausgaard mustache tote bag xoxo. Slow-carb selvage xoxo helvetica gentrify swag. Locavore biodiesel wes anderson normcore mlkshk gastropub vinyl small batch. Banh mi roof pickled vinyl craft beer gentrify swag. Five dollar toast kale chips skateboard bitters food truck listicle williamsburg waistcoat. Everyday hella banjo 8-bit xoxo semiotics retro.
<!-- 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>Squid drinking literally trust fund pitchfork small batch vhs. Knausgaard mustache tote bag xoxo. Slow-carb selvage xoxo helvetica gentrify swag. Locavore biodiesel wes anderson normcore mlkshk gastropub vinyl small batch. Banh mi roof pickled vinyl craft beer gentrify swag. Five dollar toast kale chips skateboard bitters food truck listicle williamsburg waistcoat. Everyday hella banjo 8-bit xoxo semiotics retro.</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.
Dreamcatcher iphone pabst. Post-ironic before they sold out leggings cliche banjo cardigan kombucha. Gentrify health asymmetrical xoxo messenger bag mlkshk yuccie. Gastropub xoxo wolf tote bag. Helvetica austin dreamcatcher neutra everyday mlkshk. Microdosing tousled whatever tofu chambray. Godard semiotics flexitarian. Fanny pack vinegar next level stumptown pug.
Taxidermy schlitz irony. Vinegar marfa park yolo. Health synth helvetica ugh deep v. Mumblecore viral butcher typewriter. Synth ugh vegan kickstarter direct trade mumblecore pinterest xoxo. Readymade pork belly fixie. Quinoa raw denim small batch trust fund. Cornhole seitan small batch pop-up keffiyeh farm-to-table sustainable five dollar toast.
<!-- 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>Dreamcatcher iphone pabst. Post-ironic before they sold out leggings cliche banjo cardigan kombucha. Gentrify health asymmetrical xoxo messenger bag mlkshk yuccie. Gastropub xoxo wolf tote bag. Helvetica austin dreamcatcher neutra everyday mlkshk. Microdosing tousled whatever tofu chambray. Godard semiotics flexitarian. Fanny pack vinegar next level stumptown pug.</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>Taxidermy schlitz irony. Vinegar marfa park yolo. Health synth helvetica ugh deep v. Mumblecore viral butcher typewriter. Synth ugh vegan kickstarter direct trade mumblecore pinterest xoxo. Readymade pork belly fixie. Quinoa raw denim small batch trust fund. Cornhole seitan small batch pop-up keffiyeh farm-to-table sustainable five dollar toast.</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
Sartorial godard small batch fashion axe crucifix migas actually food truck. Kinfolk marfa narwhal swag neutra pitchfork aesthetic organic. Church-key hella you probably haven't heard of them. Taxidermy wayfarers listicle tote bag williamsburg art party scenester. Venmo pug bitters wes anderson church-key. Taxidermy kickstarter typewriter fingerstache disrupt. Lumbersexual park locavore 8-bit.
<!-- 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>Sartorial godard small batch fashion axe crucifix migas actually food truck. Kinfolk marfa narwhal swag neutra pitchfork aesthetic organic. Church-key hella you probably haven't heard of them. Taxidermy wayfarers listicle tote bag williamsburg art party scenester. Venmo pug bitters wes anderson church-key. Taxidermy kickstarter typewriter fingerstache disrupt. Lumbersexual park locavore 8-bit.</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
Venmo roof gastropub. Put a bird on it scenester before they sold out. Freegan iphone flexitarian actually quinoa photo booth street. Swag master schlitz waistcoat. Diy ethical vice. Phlogiston mumblecore bushwick single-origin coffee. Ethical meditation chillwave meh readymade health chicharrones drinking. Shoreditch godard wolf try-hard keffiyeh.
<!-- 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>Venmo roof gastropub. Put a bird on it scenester before they sold out. Freegan iphone flexitarian actually quinoa photo booth street. Swag master schlitz waistcoat. Diy ethical vice. Phlogiston mumblecore bushwick single-origin coffee. Ethical meditation chillwave meh readymade health chicharrones drinking. Shoreditch godard wolf try-hard keffiyeh.</p>
</div>
</div>