Contextual Image
Contextual images are images that are 'in context' to the copy surrounding it. Use Contextual images inside the Content Layouts main column.
Just inserting images will break layout and sometimes show single words or even broken words next to the image. So text can flow around the Contextual image in some predefined circumstances.
For visual reference:
--hgap-30Diy kickstarter portland health normcore. Small batch church-key listicle. Twee pabst blue bottle tilde yr before they sold out sartorial next level. Tumblr vice godard tofu chicharrones.
Try-hard quinoa organic helvetica ethical. Heirloom taxidermy bicycle rights muggle magic lomo master. Pitchfork beard slow-carb single-origin coffee.
Bitters 90's direct trade yuccie. Brooklyn hoodie lo-fi. Pork belly chia artisan chicharrones banjo irony. Banh mi sartorial church-key green juice.
Beard butcher direct trade godard paleo. Squid chambray ramps tumblr brunch irony normcore. +1 chambray jean shorts. Franzen deep v cronut keffiyeh kale chips cleanse organic street.
Godard shoreditch diy. Jean shorts vhs lumbersexual. Pop-up distillery actually banjo salvia mumblecore meh shabby chic.
Selvage diy blue bottle. Meditation cardigan meggings locavore. Cold-pressed wolf tote bag bicycle rights irony thundercats tattooed single-origin coffee. Williamsburg plaid green juice offal ramps.
<!-- Wrapped by container -->
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<!-- Content Layout -->
<div class="vi-content-layout">
<div class="vi-content-layout__main">
<!-- the example uses grid-30, use hgap-30 for real content -->
<div class="vi-grid">
<div class="vi-grid__row vi-grid__row--grid-30">
<div class="col-12 col-md-4">...
</div>
<div class="col-12 col-md-8">...
</div>
<div class="col-12 col-md-8">...
</div>
<div class="col-12 col-md-4">...
</div>
</div>
</div>
<div class="small text-muted mb-20 mt-10">use grid with modifier <code>--hgap-30</code>
</div>
<div class="vi-grid">
<div class="vi-grid__row vi-grid__row--hgap-30">
<div class="col-12 col-md-4">
<!-- Contextual Image -->
<figure class="vi-contextual-image">
<div class="vi-contextual-image__visual">
...
</div>
</figure>
</div>
<div class="col-12 col-md-8">
<p>Diy kickstarter portland health normcore. Small batch church-key listicle. Twee pabst blue bottle tilde yr before they sold out sartorial next level. Tumblr vice godard tofu chicharrones.</p>
</div>
<div class="col-12 col-md-8">
<p>Try-hard quinoa organic helvetica ethical. Heirloom taxidermy bicycle rights muggle magic lomo master. Pitchfork beard slow-carb single-origin coffee.</p>
<p>Bitters 90's direct trade yuccie. Brooklyn hoodie lo-fi. Pork belly chia artisan chicharrones banjo irony. Banh mi sartorial church-key green juice.</p>
<p>Beard butcher direct trade godard paleo. Squid chambray ramps tumblr brunch irony normcore. +1 chambray jean shorts. Franzen deep v cronut keffiyeh kale chips cleanse organic street.</p>
</div>
<div class="col-12 col-md-4">
<!-- Contextual Image -->
<figure class="vi-contextual-image">
<div class="vi-contextual-image__visual">
...
</div>
</figure>
</div>
<div class="col-12 col-md-4">
<!-- Contextual Image -->
<figure class="vi-contextual-image">
<div class="vi-contextual-image__visual">
...
</div>
</figure>
</div>
<div class="col-12 col-md-8">
<p>Godard shoreditch diy. Jean shorts vhs lumbersexual. Pop-up distillery actually banjo salvia mumblecore meh shabby chic.</p>
</div>
<div class="col-12 col-md-8">
<p>Selvage diy blue bottle. Meditation cardigan meggings locavore. Cold-pressed wolf tote bag bicycle rights irony thundercats tattooed single-origin coffee. Williamsburg plaid green juice offal ramps.</p>
</div>
<div class="col-12 col-md-4">
<!-- Contextual Image -->
<figure class="vi-contextual-image">
<div class="vi-contextual-image__visual">
...
</div>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>Text flow #
Text will only flow next to the image, when image at 1/3 of main column an larger device displays.
Use modifiers --left or --right in combination with --small or --large to define size and direction.
Squid pug banh mi meditation swag. Kale chips fixie gluten-free celiac wolf pug shabby chic. Authentic tote bag microdosing keytar brooklyn. Tattooed raw denim forage master yolo. Tattooed pbr&b try-hard seitan drinking schlitz.
Echo five dollar toast authentic single-origin coffee fixie. Viral cronut tote bag mlkshk seitan deep v pitchfork. Selfies organic cronut. Locavore chartreuse wayfarers. Truffaut sustainable vegan chartreuse. Keytar single-origin coffee twee. Crucifix blue bottle offal you probably haven't heard of them put a bird on it fixie hella gluten-free. Umami craft beer freegan.
Schlitz tote bag crucifix umami small batch. Kale chips street disrupt. Messenger bag phlogiston five dollar toast crucifix yr carry. Pork belly migas fingerstache scenester tote bag readymade. Wolf park single-origin coffee squid venmo poutine selvage. Cray goth 90's. Pbr&b goth slow-carb fingerstache green juice vinyl whatever small batch. Kickstarter pickled keffiyeh.
Twee drinking flannel. Pbr&b banjo cold-pressed williamsburg. Wayfarers ennui helvetica pop-up occupy mlkshk trust fund. Normcore church-key shoreditch mlkshk wayfarers tofu kogi. Occupy put a bird on it disrupt lomo ugh poutine flexitarian. Intelligentsia locavore 8-bit blog stumptown. Raw denim yolo celiac +1 cornhole sustainable. Fingerstache whatever blue bottle.
Twee hella direct trade neutra schlitz. Mixtape before they sold out vinyl keytar. 3 wolf moon pickled irony +1 meh pbr&b fixie flexitarian. Crucifix banjo sustainable tote bag. Cold-pressed everyday normcore chambray polaroid cleanse tumblr humblebrag. Normcore freegan authentic bicycle rights leggings. Yr crucifix hella cold-pressed. Lo-fi tofu franzen migas sustainable. Pabst actually gluten-free ethical pickled +1.
<!-- Wrapped by container -->
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<!-- Content Layout -->
<div class="vi-content-layout">
<div class="vi-content-layout__main">
<p>Squid pug banh mi meditation swag. Kale chips fixie gluten-free celiac wolf pug shabby chic. Authentic tote bag microdosing keytar brooklyn. Tattooed raw denim forage master yolo. Tattooed pbr&b try-hard seitan drinking schlitz.</p>
<!-- Contextual Image (mods: --small, --left) -->
<figure class="vi-contextual-image vi-contextual-image--small vi-contextual-image--left">
<div class="vi-contextual-image__visual">
...
</div>
</figure>
<p>Echo five dollar toast authentic single-origin coffee fixie. Viral cronut tote bag mlkshk seitan deep v pitchfork. Selfies organic cronut. Locavore chartreuse wayfarers. Truffaut sustainable vegan chartreuse. Keytar single-origin coffee twee. Crucifix blue bottle offal you probably haven't heard of them put a bird on it fixie hella gluten-free. Umami craft beer freegan.</p>
<!-- Contextual Image (mods: --small, --right) -->
<figure class="vi-contextual-image vi-contextual-image--small vi-contextual-image--right">
<div class="vi-contextual-image__visual">
...
</div>
</figure>
<p>Schlitz tote bag crucifix umami small batch. Kale chips street disrupt. Messenger bag phlogiston five dollar toast crucifix yr carry. Pork belly migas fingerstache scenester tote bag readymade. Wolf park single-origin coffee squid venmo poutine selvage. Cray goth 90's. Pbr&b goth slow-carb fingerstache green juice vinyl whatever small batch. Kickstarter pickled keffiyeh.</p>
<!-- Contextual Image (mods: --large, --left) -->
<figure class="vi-contextual-image vi-contextual-image--large vi-contextual-image--left">
<div class="vi-contextual-image__visual">
...
</div>
</figure>
<p>Twee drinking flannel. Pbr&b banjo cold-pressed williamsburg. Wayfarers ennui helvetica pop-up occupy mlkshk trust fund. Normcore church-key shoreditch mlkshk wayfarers tofu kogi. Occupy put a bird on it disrupt lomo ugh poutine flexitarian. Intelligentsia locavore 8-bit blog stumptown. Raw denim yolo celiac +1 cornhole sustainable. Fingerstache whatever blue bottle.</p>
<!-- Contextual Image (mods: --large, --right) -->
<figure class="vi-contextual-image vi-contextual-image--large vi-contextual-image--right">
<div class="vi-contextual-image__visual">
...
</div>
</figure>
<p>Twee hella direct trade neutra schlitz. Mixtape before they sold out vinyl keytar. 3 wolf moon pickled irony +1 meh pbr&b fixie flexitarian. Crucifix banjo sustainable tote bag. Cold-pressed everyday normcore chambray polaroid cleanse tumblr humblebrag. Normcore freegan authentic bicycle rights leggings. Yr crucifix hella cold-pressed. Lo-fi tofu franzen migas sustainable. Pabst actually gluten-free ethical pickled +1.</p>
</div>
<div class="vi-content-layout__sidebar">
<div class="vi-content-layout__sidebar-sticky">
...
</div>
</div>
</div>
</div>
Rectangular images. Literally food truck stumptown celiac try-hard pug cold-pressed. Wayfarers franzen keffiyeh craft beer. Brooklyn wes anderson offal. Scenester seitan shabby chic. Godard 90's direct trade. Cold-pressed phlogiston brunch venmo. Food truck pug echo chambray readymade franzen.
Circular images. Bicycle rights wolf next level hoodie brooklyn wayfarers. Photo booth normcore put a bird on it godard forage. Neutra lomo brooklyn. Tacos schlitz kombucha ethical quinoa yuccie pop-up. Brunch distillery typewriter authentic.
Specific Moment Images. Cornhole disrupt yr butcher meditation park goth keffiyeh. Brunch biodiesel cornhole plaid you probably haven't heard of them banjo. Sustainable vhs kale chips.
Image tags. Selfies disrupt retro distillery tacos. Polaroid biodiesel fixie forage before they sold out disrupt shoreditch. Butcher umami xoxo synth. Seitan cliche wolf vice letterpress gentrify migas.
Picture tags. Freegan migas vhs +1 paleo. Neutra quinoa hoodie lumbersexual gentrify forage disrupt goth. Butcher chillwave single-origin coffee asymmetrical pug trust fund bicycle rights tousled. Shabby chic keytar disrupt pug artisan street.
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<!-- Content Layout -->
<div class="vi-content-layout">
<div class="vi-content-layout__main">
<!-- Contextual Image (mods: --small, --left) -->
<figure class="vi-contextual-image vi-contextual-image--small vi-contextual-image--left">
<div class="vi-contextual-image__visual">
<!-- Rectangular Image (mods: --custom) -->
<div class="vi-rectangular-image vi-rectangular-image--custom" style="padding-top: 133.33333%"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-300x400.jpg" srcset="/assets/images/static/test-300x400.jpg, /assets/images/static/test-600x800.jpg 2x"></div>
</div>
</figure>
<p>
Literally food truck stumptown celiac try-hard pug cold-pressed. Wayfarers franzen keffiyeh craft beer. Brooklyn wes anderson offal. Scenester seitan shabby chic. Godard 90's direct trade. Cold-pressed phlogiston brunch venmo. Food truck pug echo chambray readymade franzen.
</p>
<!-- Contextual Image (mods: --small, --right) -->
<figure class="vi-contextual-image vi-contextual-image--small vi-contextual-image--right">
<div class="vi-contextual-image__visual">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-300x300.jpg" srcset="/assets/images/static/test-300x300.jpg, /assets/images/static/test-600x600.jpg 2x"></div>
</div>
</figure>
<p>
Bicycle rights wolf next level hoodie brooklyn wayfarers. Photo booth normcore put a bird on it godard forage. Neutra lomo brooklyn. Tacos schlitz kombucha ethical quinoa yuccie pop-up. Brunch distillery typewriter authentic.
</p>
<!-- Contextual Image (mods: --small, --left) -->
<figure class="vi-contextual-image vi-contextual-image--small vi-contextual-image--left">
<div class="vi-contextual-image__visual">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--contextual vi-moment-image--contextual-1">
<div class="vi-moment-image__visual vi-moment-image__visual--contextual vi-moment-image__visual--contextual-1">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-300x300.jpg" srcset="/assets/images/static/test-300x300.jpg, /assets/images/static/test-600x600.jpg 2x"></div>
</div>
</div>
</div>
</figure>
<p>
Cornhole disrupt yr butcher meditation park goth keffiyeh. Brunch biodiesel cornhole plaid you probably haven't heard of them banjo. Sustainable vhs kale chips.
</p>
<!-- Contextual Image (mods: --small, --right) -->
<figure class="vi-contextual-image vi-contextual-image--small vi-contextual-image--right">
<div class="vi-contextual-image__visual">
<img src="/assets/images/static/test-300x400.jpg" width="300" height="400" alt="">
</div>
</figure>
<p>
Selfies disrupt retro distillery tacos. Polaroid biodiesel fixie forage before they sold out disrupt shoreditch. Butcher umami xoxo synth. Seitan cliche wolf vice letterpress gentrify migas.
</p>
<!-- Contextual Image (mods: --small, --left) -->
<figure class="vi-contextual-image vi-contextual-image--small vi-contextual-image--left">
<div class="vi-contextual-image__visual">
<picture>
<!-- <source...> -->
<img src="/assets/images/static/test-300x225.jpg" width="300" height="225" alt="">
</picture>
</div>
</figure>
<p>
Freegan migas vhs +1 paleo. Neutra quinoa hoodie lumbersexual gentrify forage disrupt goth. Butcher chillwave single-origin coffee asymmetrical pug trust fund bicycle rights tousled. Shabby chic keytar disrupt pug artisan street.
</p>
</div>
<div class="vi-content-layout__sidebar">
<div class="vi-content-layout__sidebar-sticky">
...
</div>
</div>
</div>
</div>
Rectangular images. Kinfolk waistcoat plaid hella retro hoodie kickstarter stumptown. Swag blue bottle offal venmo meditation knausgaard park pitchfork. Umami pbr&b meggings organic kinfolk tilde offal cold-pressed. Typewriter retro seitan forage locavore master single-origin coffee. 90's offal chartreuse meh slow-carb fingerstache before they sold out. Cardigan helvetica meh gluten-free cred health authentic. Next level try-hard mlkshk skateboard cleanse street pour-over carry. You probably haven't heard of them freegan try-hard.
Image tags. Keffiyeh pour-over scenester portland. Kogi artisan before they sold out twee drinking kitsch. Master selfies stumptown. Loko echo street.
Picture tags. Retro artisan chicharrones ennui. Yr mixtape tote bag banjo sartorial art party fashion axe. Cray distillery mumblecore meh normcore flannel. Humblebrag fashion axe echo hashtag banjo.
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<!-- Content Layout -->
<div class="vi-content-layout">
<div class="vi-content-layout__main">
<!-- Contextual Image (mods: --large, --left) -->
<figure class="vi-contextual-image vi-contextual-image--large vi-contextual-image--left">
<div class="vi-contextual-image__visual">
<!-- Rectangular Image (mods: --custom) -->
<div class="vi-rectangular-image vi-rectangular-image--custom" style="padding-top: 75.00000%"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-450x338.jpg" srcset="/assets/images/static/test-450x338.jpg, /assets/images/static/test-900x676.jpg 2x"></div>
</div>
</figure>
<p>
Kinfolk waistcoat plaid hella retro hoodie kickstarter stumptown. Swag blue bottle offal venmo meditation knausgaard park pitchfork. Umami pbr&b meggings organic kinfolk tilde offal cold-pressed. Typewriter retro seitan forage locavore master single-origin coffee. 90's offal chartreuse meh slow-carb fingerstache before they sold out. Cardigan helvetica meh gluten-free cred health authentic. Next level try-hard mlkshk skateboard cleanse street pour-over carry. You probably haven't heard of them freegan try-hard.
</p>
<!-- Contextual Image (mods: --large, --right) -->
<figure class="vi-contextual-image vi-contextual-image--large vi-contextual-image--right">
<div class="vi-contextual-image__visual">
<img src="/assets/images/static/test-450x600.jpg" width="450" height="600" alt="">
</div>
</figure>
<p>
Keffiyeh pour-over scenester portland. Kogi artisan before they sold out twee drinking kitsch. Master selfies stumptown. Loko echo street.
</p>
<!-- Contextual Image (mods: --large, --left) -->
<figure class="vi-contextual-image vi-contextual-image--large vi-contextual-image--left">
<div class="vi-contextual-image__visual">
<picture>
<!-- <source...> -->
<img src="/assets/images/static/test-450x375.jpg" width="450" height="375" alt="">
</picture>
</div>
</figure>
<p>
Retro artisan chicharrones ennui. Yr mixtape tote bag banjo sartorial art party fashion axe. Cray distillery mumblecore meh normcore flannel. Humblebrag fashion axe echo hashtag banjo.
</p>
</div>
<div class="vi-content-layout__sidebar">
<div class="vi-content-layout__sidebar-sticky">
...
</div>
</div>
</div>
</div>Captions #
To add a caption or explanations to the contents of the Contextual Image use a div or semantically more correct figcaption (in combination with figure) with class .vi-contextual-image__caption.
Place it below (or above) the element with class .vi-contextual-image__visual
Farm-to-table keffiyeh ugh iphone skateboard aesthetic +1. Vhs artisan +1. Portland kogi pabst. Lomo yr goth paleo. Williamsburg cardigan loko.
Retro brooklyn kogi neutra. Church-key vhs asymmetrical migas wayfarers food truck bespoke. Yuccie normcore beard.
Selvage keytar chia disrupt. Beard actually brunch. Hoodie forage vhs meditation cardigan goth. Pickled dreamcatcher fingerstache. Taxidermy scenester fixie. Echo kombucha vegan cleanse carry plaid asymmetrical crucifix. Vhs 90's messenger bag fingerstache tilde pinterest tote bag. Lo-fi banh mi before they sold out celiac kitsch pickled. Migas flexitarian kombucha.
Flannel cold-pressed kale chips tumblr +1. Distillery goth ennui mlkshk hoodie. Fixie deep v banh mi bespoke beard gentrify five dollar toast. Fixie raw denim pinterest truffaut cliche post-ironic.
Shabby chic bespoke forage squid. Forage goth portland hammock. Salvia farm-to-table austin carry flexitarian stumptown vegan. Butcher muggle magic you probably haven't heard of them. Vinyl +1 helvetica synth. Vhs literally meditation thundercats kale chips pabst selvage hammock. Street viral roof small batch.
Ramps paleo gentrify hella etsy. Irony put a bird on it goth vice banjo. Wolf bushwick cronut post-ironic meh irony tote bag kombucha. Humblebrag franzen taxidermy. Cornhole deep v cold-pressed godard kinfolk xoxo yolo next level.
Keytar carry vinyl polaroid microdosing paleo pour-over jean shorts. Wolf occupy direct trade deep v kale chips pour-over. Artisan banjo fanny pack mumblecore fashion axe shabby chic. Heirloom xoxo fixie. Viral tacos tattooed everyday tofu chillwave. Swag cronut authentic mustache. Whatever wolf loko banh mi letterpress diy distillery.
Schlitz pug keytar pork belly post-ironic vice squid kogi. Meditation food truck messenger bag deep v pitchfork phlogiston flannel. Microdosing 3 wolf moon next level. Deep v drinking kickstarter chambray celiac whatever hella gentrify. Yolo vinyl taxidermy forage drinking.
Bushwick food truck mixtape gentrify yuccie. Direct trade gluten-free squid +1 plaid gentrify roof. Disrupt artisan chartreuse kogi austin green juice. Typewriter retro scenester phlogiston hashtag locavore gastropub. Fashion axe twee heirloom tote bag +1 chambray. Vegan green juice tacos diy. Schlitz godard jean shorts fanny pack chicharrones taxidermy. Flannel listicle intelligentsia blog mumblecore tilde carry.
<!-- Wrapped by container -->
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<!-- Content Layout -->
<div class="vi-content-layout">
<div class="vi-content-layout__main">
<p>Farm-to-table keffiyeh ugh iphone skateboard aesthetic +1. Vhs artisan +1. Portland kogi pabst. Lomo yr goth paleo. Williamsburg cardigan loko.</p>
<!-- Contextual Image (mods: --small, --left) -->
<figure class="vi-contextual-image vi-contextual-image--small vi-contextual-image--left">
<div class="vi-contextual-image__visual">
...
</div>
<figcaption class="vi-contextual-image__caption">
<p>Retro brooklyn kogi neutra. Church-key vhs asymmetrical migas wayfarers food truck bespoke. Yuccie normcore beard.</p>
</figcaption>
</figure>
<p>Selvage keytar chia disrupt. Beard actually brunch. Hoodie forage vhs meditation cardigan goth. Pickled dreamcatcher fingerstache. Taxidermy scenester fixie. Echo kombucha vegan cleanse carry plaid asymmetrical crucifix. Vhs 90's messenger bag fingerstache tilde pinterest tote bag. Lo-fi banh mi before they sold out celiac kitsch pickled. Migas flexitarian kombucha.</p>
<!-- Contextual Image (mods: --small, --right) -->
<figure class="vi-contextual-image vi-contextual-image--small vi-contextual-image--right">
<div class="vi-contextual-image__visual">
...
</div>
<figcaption class="vi-contextual-image__caption">
<p>Flannel cold-pressed kale chips tumblr +1. Distillery goth ennui mlkshk hoodie. Fixie deep v banh mi bespoke beard gentrify five dollar toast. Fixie raw denim pinterest truffaut cliche post-ironic.</p>
</figcaption>
</figure>
<p>Shabby chic bespoke forage squid. Forage goth portland hammock. Salvia farm-to-table austin carry flexitarian stumptown vegan. Butcher muggle magic you probably haven't heard of them. Vinyl +1 helvetica synth. Vhs literally meditation thundercats kale chips pabst selvage hammock. Street viral roof small batch.</p>
<!-- Contextual Image (mods: --large, --left) -->
<figure class="vi-contextual-image vi-contextual-image--large vi-contextual-image--left">
<div class="vi-contextual-image__visual">
...
</div>
<figcaption class="vi-contextual-image__caption">
<p>Ramps paleo gentrify hella etsy. Irony put a bird on it goth vice banjo. Wolf bushwick cronut post-ironic meh irony tote bag kombucha. Humblebrag franzen taxidermy. Cornhole deep v cold-pressed godard kinfolk xoxo yolo next level.</p>
</figcaption>
</figure>
<p>Keytar carry vinyl polaroid microdosing paleo pour-over jean shorts. Wolf occupy direct trade deep v kale chips pour-over. Artisan banjo fanny pack mumblecore fashion axe shabby chic. Heirloom xoxo fixie. Viral tacos tattooed everyday tofu chillwave. Swag cronut authentic mustache. Whatever wolf loko banh mi letterpress diy distillery.</p>
<!-- Contextual Image (mods: --large, --right) -->
<figure class="vi-contextual-image vi-contextual-image--large vi-contextual-image--right">
<div class="vi-contextual-image__visual">
...
</div>
<figcaption class="vi-contextual-image__caption">
<p>Schlitz pug keytar pork belly post-ironic vice squid kogi. Meditation food truck messenger bag deep v pitchfork phlogiston flannel. Microdosing 3 wolf moon next level. Deep v drinking kickstarter chambray celiac whatever hella gentrify. Yolo vinyl taxidermy forage drinking.</p>
</figcaption>
</figure>
<p>Bushwick food truck mixtape gentrify yuccie. Direct trade gluten-free squid +1 plaid gentrify roof. Disrupt artisan chartreuse kogi austin green juice. Typewriter retro scenester phlogiston hashtag locavore gastropub. Fashion axe twee heirloom tote bag +1 chambray. Vegan green juice tacos diy. Schlitz godard jean shorts fanny pack chicharrones taxidermy. Flannel listicle intelligentsia blog mumblecore tilde carry.</p>
</div>
<div class="vi-content-layout__sidebar">
<div class="vi-content-layout__sidebar-sticky">
...
</div>
</div>
</div>
</div>Strips #
Contextual Images can be set to strip mode. When in strip mode, the captions are placed next to the image on larger displays.
Use the modifier --strip for strip mode.
Strip mode should only be used when using captions.
Yuccie freegan lomo ugh jean shorts cold-pressed kale chips chambray. Viral vice slow-carb distillery five dollar toast semiotics phlogiston cleanse. Intelligentsia cleanse authentic.
Heirloom banh mi twee +1 lo-fi. Meh distillery pork belly trust fund. Semiotics irony messenger bag ugh yuccie salvia locavore. Occupy gentrify disrupt cronut vhs forage put a bird on it.
Marfa health deep v craft beer plaid cronut yolo banh mi. Church-key squid disrupt next level put a bird on it. Ennui direct trade pickled. Butcher farm-to-table keffiyeh. Hashtag taxidermy leggings pabst portland. Selvage five dollar toast bitters. Phlogiston stumptown chambray.
Fashion axe small batch mixtape vice portland celiac. Neutra xoxo 8-bit fixie tacos pickled carry chia. Microdosing fixie twee iphone gastropub ugh mlkshk. Messenger bag vhs truffaut 90's godard synth intelligentsia. Locavore bespoke wolf kinfolk tattooed small batch next level bicycle rights. Readymade kinfolk poutine yr hella carry pug. Pop-up 3 wolf moon listicle meggings shabby chic.
Fashion axe jean shorts gluten-free. Organic etsy heirloom selfies art party +1. Vinegar bushwick bicycle rights shoreditch you probably haven't heard of them selfies street whatever. Hoodie heirloom direct trade paleo tofu synth salvia. Tilde gastropub chillwave lumbersexual wayfarers aesthetic. Yr park 3 wolf moon quinoa poutine ennui. Hashtag intelligentsia chia humblebrag. Kogi food truck austin scenester beard aesthetic meditation skateboard. Austin semiotics shoreditch synth church-key bitters phlogiston retro.
Gluten-free letterpress small batch muggle magic tilde park readymade. Gluten-free vice scenester poutine skateboard bespoke etsy next level. Cliche butcher chillwave kale chips. Five dollar toast irony aesthetic viral art party schlitz.
Umami fashion axe chillwave readymade 3 wolf moon. Health poutine celiac tacos kitsch. Hoodie lumbersexual cliche art party. Locavore portland vegan. Austin lumbersexual tofu fashion axe. Vhs ramps distillery marfa migas tofu chartreuse tumblr. Wolf banh mi trust fund normcore cornhole iphone direct trade everyday. Ennui squid hella muggle magic master mumblecore street. Pickled forage street church-key roof messenger bag.
Kickstarter kitsch blue bottle hoodie tilde twee wolf. Cred shabby chic gentrify fanny pack bitters organic. Diy cleanse letterpress locavore park etsy 3 wolf moon listicle. Freegan drinking chia put a bird on it bitters hammock.
Celiac williamsburg before they sold out craft beer asymmetrical ethical kogi franzen. Literally pabst 3 wolf moon. Pork belly tilde leggings deep v selvage keytar pop-up beard. Fixie muggle magic poutine shabby chic ethical single-origin coffee church-key. Direct trade neutra brunch austin. Mlkshk carry authentic bushwick. Kitsch vinegar drinking tattooed williamsburg butcher etsy. Readymade raw denim hammock park artisan typewriter phlogiston muggle magic. Etsy brunch blog umami phlogiston heirloom.
<!-- Wrapped by container -->
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<!-- Content Layout -->
<div class="vi-content-layout">
<div class="vi-content-layout__main">
<p>Yuccie freegan lomo ugh jean shorts cold-pressed kale chips chambray. Viral vice slow-carb distillery five dollar toast semiotics phlogiston cleanse. Intelligentsia cleanse authentic.</p>
<!-- Contextual Image (mods: --small, --left, --strip) -->
<figure class="vi-contextual-image vi-contextual-image--small vi-contextual-image--left vi-contextual-image--strip">
<div class="vi-contextual-image__visual">
...
</div>
<figcaption class="vi-contextual-image__caption">
<p>Heirloom banh mi twee +1 lo-fi. Meh distillery pork belly trust fund. Semiotics irony messenger bag ugh yuccie salvia locavore. Occupy gentrify disrupt cronut vhs forage put a bird on it.</p>
</figcaption>
</figure>
<p>Marfa health deep v craft beer plaid cronut yolo banh mi. Church-key squid disrupt next level put a bird on it. Ennui direct trade pickled. Butcher farm-to-table keffiyeh. Hashtag taxidermy leggings pabst portland. Selvage five dollar toast bitters. Phlogiston stumptown chambray.</p>
<!-- Contextual Image (mods: --small, --right, --strip) -->
<figure class="vi-contextual-image vi-contextual-image--small vi-contextual-image--right vi-contextual-image--strip">
<div class="vi-contextual-image__visual">
...
</div>
<figcaption class="vi-contextual-image__caption">
<p>Fashion axe small batch mixtape vice portland celiac. Neutra xoxo 8-bit fixie tacos pickled carry chia. Microdosing fixie twee iphone gastropub ugh mlkshk. Messenger bag vhs truffaut 90's godard synth intelligentsia. Locavore bespoke wolf kinfolk tattooed small batch next level bicycle rights. Readymade kinfolk poutine yr hella carry pug. Pop-up 3 wolf moon listicle meggings shabby chic.</p>
</figcaption>
</figure>
<p>Fashion axe jean shorts gluten-free. Organic etsy heirloom selfies art party +1. Vinegar bushwick bicycle rights shoreditch you probably haven't heard of them selfies street whatever. Hoodie heirloom direct trade paleo tofu synth salvia. Tilde gastropub chillwave lumbersexual wayfarers aesthetic. Yr park 3 wolf moon quinoa poutine ennui. Hashtag intelligentsia chia humblebrag. Kogi food truck austin scenester beard aesthetic meditation skateboard. Austin semiotics shoreditch synth church-key bitters phlogiston retro.</p>
<!-- Contextual Image (mods: --large, --left, --strip) -->
<figure class="vi-contextual-image vi-contextual-image--large vi-contextual-image--left vi-contextual-image--strip">
<div class="vi-contextual-image__visual">
...
</div>
<figcaption class="vi-contextual-image__caption">
<p>Gluten-free letterpress small batch muggle magic tilde park readymade. Gluten-free vice scenester poutine skateboard bespoke etsy next level. Cliche butcher chillwave kale chips. Five dollar toast irony aesthetic viral art party schlitz.</p>
</figcaption>
</figure>
<p>Umami fashion axe chillwave readymade 3 wolf moon. Health poutine celiac tacos kitsch. Hoodie lumbersexual cliche art party. Locavore portland vegan. Austin lumbersexual tofu fashion axe. Vhs ramps distillery marfa migas tofu chartreuse tumblr. Wolf banh mi trust fund normcore cornhole iphone direct trade everyday. Ennui squid hella muggle magic master mumblecore street. Pickled forage street church-key roof messenger bag.</p>
<!-- Contextual Image (mods: --large, --right, --strip) -->
<figure class="vi-contextual-image vi-contextual-image--large vi-contextual-image--right vi-contextual-image--strip">
<div class="vi-contextual-image__visual">
...
</div>
<figcaption class="vi-contextual-image__caption">
<p>Kickstarter kitsch blue bottle hoodie tilde twee wolf. Cred shabby chic gentrify fanny pack bitters organic. Diy cleanse letterpress locavore park etsy 3 wolf moon listicle. Freegan drinking chia put a bird on it bitters hammock.</p>
</figcaption>
</figure>
<p>Celiac williamsburg before they sold out craft beer asymmetrical ethical kogi franzen. Literally pabst 3 wolf moon. Pork belly tilde leggings deep v selvage keytar pop-up beard. Fixie muggle magic poutine shabby chic ethical single-origin coffee church-key. Direct trade neutra brunch austin. Mlkshk carry authentic bushwick. Kitsch vinegar drinking tattooed williamsburg butcher etsy. Readymade raw denim hammock park artisan typewriter phlogiston muggle magic. Etsy brunch blog umami phlogiston heirloom.</p>
</div>
<div class="vi-content-layout__sidebar">
<div class="vi-content-layout__sidebar-sticky">
...
</div>
</div>
</div>
</div>Caption Alignment #
Caption alignments only work in combination in strip mode
By default the captions are vertically aligned to the end (bottom).
Add one of the following modifiers on to the element with
class .vi-contextual-image__caption to override:
.vi-contextual-image__caption--start.vi-contextual-image__caption--center.vi-contextual-image__caption--end
Try-hard everyday goth keytar cornhole kale chips pork belly. Messenger bag mumblecore five dollar toast knausgaard goth. Twee semiotics literally squid slow-carb bitters viral.
This is the default.
Salvia art party banh mi stumptown. Cronut dreamcatcher bitters etsy meditation paleo mustache. Try-hard tofu photo booth marfa thundercats you probably haven't heard of them pork belly sustainable. Vinegar bespoke williamsburg lomo cred.
Paleo tousled asymmetrical intelligentsia blog muggle magic pinterest. Pabst locavore banh mi ethical humblebrag church-key wayfarers. Fingerstache fashion axe cred whatever mustache typewriter. Whatever hashtag pinterest. Forage umami authentic kombucha vhs. Craft beer marfa tacos plaid cliche hella street actually. Dreamcatcher migas street distillery fanny pack 8-bit. Cray polaroid stumptown pbr&b meditation cronut xoxo.
vi-contextual-image__caption--start.
Flexitarian phlogiston banjo. Chillwave 8-bit 3 wolf moon kinfolk lumbersexual normcore kogi. Portland pickled photo booth brooklyn migas blue bottle austin cornhole. Kogi raw denim echo pour-over mumblecore meditation vinyl. Freegan loko umami. Drinking 3 wolf moon everyday literally franzen artisan. Shoreditch kitsch yr vegan godard. Lomo 90's meh.
Tofu pug vice lo-fi tumblr ethical. Small batch jean shorts roof flexitarian salvia authentic distillery. Shabby chic godard bushwick locavore cardigan. Ennui crucifix diy taxidermy brunch shoreditch selvage pug. Meditation squid vinegar. Meggings helvetica squid truffaut post-ironic hashtag ennui xoxo. Yolo raw denim master chillwave slow-carb quinoa vice. Locavore iphone narwhal fingerstache organic. Everyday retro park synth distillery single-origin coffee.
vi-contextual-image__caption--center.
Yolo gastropub pinterest waistcoat five dollar toast xoxo. Heirloom next level synth wes anderson fixie. Carry tumblr yuccie. Forage twee pbr&b direct trade church-key.
Gentrify forage vinyl tacos food truck pinterest taxidermy artisan. Cronut typewriter semiotics slow-carb actually. Retro cliche pug lumbersexual meh. +1 leggings mumblecore. Vegan kombucha 90's master occupy waistcoat migas. Pickled food truck umami letterpress forage. Tacos truffaut fingerstache post-ironic shoreditch mustache drinking single-origin coffee. Neutra gluten-free butcher kinfolk. Flexitarian wayfarers neutra health.
vi-contextual-image__caption--end.
Hashtag vinegar normcore stumptown letterpress. Drinking typewriter bicycle rights gluten-free freegan. Tacos iphone kickstarter 8-bit. Pug wayfarers fashion axe cold-pressed leggings. Plaid whatever schlitz deep v pork belly tilde kickstarter.
Salvia skateboard cronut neutra asymmetrical food truck xoxo chillwave. Gentrify phlogiston sriracha park. Slow-carb 3 wolf moon migas pour-over. Church-key small batch scenester cred. Etsy 3 wolf moon cleanse irony poutine plaid. Street flexitarian pitchfork venmo. Intelligentsia occupy chicharrones cred. Letterpress wayfarers dreamcatcher. Vice iphone everyday.
<!-- Wrapped by container -->
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<!-- Content Layout -->
<div class="vi-content-layout">
<div class="vi-content-layout__main">
<p>Try-hard everyday goth keytar cornhole kale chips pork belly. Messenger bag mumblecore five dollar toast knausgaard goth. Twee semiotics literally squid slow-carb bitters viral.</p>
<!-- Contextual Image (mods: --small, --left, --strip) -->
<figure class="vi-contextual-image vi-contextual-image--small vi-contextual-image--left vi-contextual-image--strip">
<div class="vi-contextual-image__visual">
...
</div>
<figcaption class="vi-contextual-image__caption">
<p>
<strong>This is the default.</strong>
<br>
Salvia art party banh mi stumptown. Cronut dreamcatcher bitters etsy meditation paleo mustache. Try-hard tofu photo booth marfa thundercats you probably haven't heard of them pork belly sustainable. Vinegar bespoke williamsburg lomo cred.
</p>
</figcaption>
</figure>
<p>Paleo tousled asymmetrical intelligentsia blog muggle magic pinterest. Pabst locavore banh mi ethical humblebrag church-key wayfarers. Fingerstache fashion axe cred whatever mustache typewriter. Whatever hashtag pinterest. Forage umami authentic kombucha vhs. Craft beer marfa tacos plaid cliche hella street actually. Dreamcatcher migas street distillery fanny pack 8-bit. Cray polaroid stumptown pbr&b meditation cronut xoxo.</p>
<!-- Contextual Image (mods: --small, --right, --strip) -->
<figure class="vi-contextual-image vi-contextual-image--small vi-contextual-image--right vi-contextual-image--strip">
<div class="vi-contextual-image__visual">
...
</div>
<figcaption class="vi-contextual-image__caption vi-contextual-image__caption--start">
<p>
<strong>vi-contextual-image__caption--start.</strong>
<br>
Flexitarian phlogiston banjo. Chillwave 8-bit 3 wolf moon kinfolk lumbersexual normcore kogi. Portland pickled photo booth brooklyn migas blue bottle austin cornhole. Kogi raw denim echo pour-over mumblecore meditation vinyl. Freegan loko umami. Drinking 3 wolf moon everyday literally franzen artisan. Shoreditch kitsch yr vegan godard. Lomo 90's meh.
</p>
</figcaption>
</figure>
<p>Tofu pug vice lo-fi tumblr ethical. Small batch jean shorts roof flexitarian salvia authentic distillery. Shabby chic godard bushwick locavore cardigan. Ennui crucifix diy taxidermy brunch shoreditch selvage pug. Meditation squid vinegar. Meggings helvetica squid truffaut post-ironic hashtag ennui xoxo. Yolo raw denim master chillwave slow-carb quinoa vice. Locavore iphone narwhal fingerstache organic. Everyday retro park synth distillery single-origin coffee.</p>
<!-- Contextual Image (mods: --large, --left, --strip) -->
<figure class="vi-contextual-image vi-contextual-image--large vi-contextual-image--left vi-contextual-image--strip">
<div class="vi-contextual-image__visual">
...
</div>
<figcaption class="vi-contextual-image__caption vi-contextual-image__caption--center">
<p>
<strong>vi-contextual-image__caption--center.</strong>
<br>
Yolo gastropub pinterest waistcoat five dollar toast xoxo. Heirloom next level synth wes anderson fixie. Carry tumblr yuccie. Forage twee pbr&b direct trade church-key.
</p>
</figcaption>
</figure>
<p>Gentrify forage vinyl tacos food truck pinterest taxidermy artisan. Cronut typewriter semiotics slow-carb actually. Retro cliche pug lumbersexual meh. +1 leggings mumblecore. Vegan kombucha 90's master occupy waistcoat migas. Pickled food truck umami letterpress forage. Tacos truffaut fingerstache post-ironic shoreditch mustache drinking single-origin coffee. Neutra gluten-free butcher kinfolk. Flexitarian wayfarers neutra health.</p>
<!-- Contextual Image (mods: --large, --right, --strip) -->
<figure class="vi-contextual-image vi-contextual-image--large vi-contextual-image--right vi-contextual-image--strip">
<div class="vi-contextual-image__visual">
...
</div>
<figcaption class="vi-contextual-image__caption vi-contextual-image__caption--end">
<p>
<strong>vi-contextual-image__caption--end.</strong>
<br>
Hashtag vinegar normcore stumptown letterpress. Drinking typewriter bicycle rights gluten-free freegan. Tacos iphone kickstarter 8-bit. Pug wayfarers fashion axe cold-pressed leggings. Plaid whatever schlitz deep v pork belly tilde kickstarter.
</p>
</figcaption>
</figure>
<p>Salvia skateboard cronut neutra asymmetrical food truck xoxo chillwave. Gentrify phlogiston sriracha park. Slow-carb 3 wolf moon migas pour-over. Church-key small batch scenester cred. Etsy 3 wolf moon cleanse irony poutine plaid. Street flexitarian pitchfork venmo. Intelligentsia occupy chicharrones cred. Letterpress wayfarers dreamcatcher. Vice iphone everyday.</p>
</div>
<div class="vi-content-layout__sidebar">
<div class="vi-content-layout__sidebar-sticky">
...
</div>
</div>
</div>
</div>Backgrounds #
Contextual Images has some default color sets.
Use the modifier --background in combination with one of the following:
--primary--gradient--white--neutral
Backgrounds should only be used with rectangular shaped images.
Swag irony microdosing wolf vinyl ennui quinoa aesthetic. Tousled vinegar shoreditch banh mi wolf brunch biodiesel meggings. Tilde pinterest irony meditation gluten-free.
Intelligentsia irony hammock helvetica 3 wolf moon synth. Pop-up semiotics cold-pressed tumblr pinterest selfies whatever craft beer. Phlogiston before they sold out art party direct trade portland wolf. Ramps banjo squid listicle godard flannel kale chips. Tumblr ramps small batch food truck street irony.
Diy forage quinoa listicle mumblecore bicycle rights intelligentsia. Disrupt pug vinyl skateboard ennui fingerstache iphone schlitz. Marfa fanny pack meggings tumblr austin umami gentrify. Tumblr xoxo narwhal pug raw denim goth whatever. Meggings iphone paleo vice wayfarers. Ugh whatever master forage organic pour-over mustache. Neutra master church-key kitsch mlkshk.
Humblebrag wes anderson tofu next level readymade. Asymmetrical shabby chic goth venmo keytar stumptown franzen. Leggings lumbersexual before they sold out kogi disrupt schlitz cred. Polaroid fashion axe sustainable keffiyeh try-hard normcore. Put a bird on it church-key celiac pork belly.
Ugh cleanse vice marfa meggings tofu. Lumbersexual butcher sustainable fingerstache tofu cronut biodiesel keffiyeh. Kale chips sriracha blue bottle food truck hella swag. You probably haven't heard of them bicycle rights direct trade craft beer. You probably haven't heard of them tote bag pour-over. Blog kogi plaid pabst wayfarers. Drinking craft beer ramps.
Banjo bespoke pour-over sriracha vhs heirloom listicle. Messenger bag salvia shabby chic chartreuse pug. Kinfolk asymmetrical gentrify wayfarers twee. Franzen typewriter venmo cardigan aesthetic.
Photo booth selfies williamsburg kombucha cronut. Crucifix jean shorts seitan. Butcher cray pickled drinking. Shabby chic vice yolo poutine ramps plaid paleo. Butcher cardigan normcore slow-carb synth bespoke typewriter vinegar. Chambray venmo normcore banh mi scenester pickled beard plaid. Vhs yolo marfa.
Lo-fi vegan cold-pressed ugh loko you probably haven't heard of them. Vinyl letterpress tattooed gastropub etsy kickstarter church-key williamsburg. Cleanse forage chambray. Next level deep v fanny pack semiotics. Cold-pressed drinking microdosing 3 wolf moon plaid freegan leggings.
Mumblecore twee shabby chic. Seitan locavore selfies leggings keffiyeh. Actually swag banjo food truck kogi green juice. Microdosing salvia messenger bag forage 3 wolf moon normcore kogi truffaut. Scenester williamsburg poutine. Deep v biodiesel cliche austin pug. Listicle mlkshk diy. Loko heirloom food truck dreamcatcher pop-up.
<!-- Wrapped by container -->
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<!-- Content Layout -->
<div class="vi-content-layout">
<div class="vi-content-layout__main">
<p>Swag irony microdosing wolf vinyl ennui quinoa aesthetic. Tousled vinegar shoreditch banh mi wolf brunch biodiesel meggings. Tilde pinterest irony meditation gluten-free.</p>
<!-- Contextual Image (mods: --small, --left, --background, --primary) -->
<figure class="vi-contextual-image vi-contextual-image--small vi-contextual-image--left vi-contextual-image--background vi-contextual-image--primary">
<div class="vi-contextual-image__visual">
...
</div>
<figcaption class="vi-contextual-image__caption">
<p>Intelligentsia irony hammock helvetica 3 wolf moon synth. Pop-up semiotics cold-pressed tumblr pinterest selfies whatever craft beer. Phlogiston before they sold out art party direct trade portland wolf. Ramps banjo squid listicle godard flannel kale chips. Tumblr ramps small batch food truck street irony.</p>
</figcaption>
</figure>
<p>Diy forage quinoa listicle mumblecore bicycle rights intelligentsia. Disrupt pug vinyl skateboard ennui fingerstache iphone schlitz. Marfa fanny pack meggings tumblr austin umami gentrify. Tumblr xoxo narwhal pug raw denim goth whatever. Meggings iphone paleo vice wayfarers. Ugh whatever master forage organic pour-over mustache. Neutra master church-key kitsch mlkshk.</p>
<!-- Contextual Image (mods: --small, --right, --background, --gradient) -->
<figure class="vi-contextual-image vi-contextual-image--small vi-contextual-image--right vi-contextual-image--background vi-contextual-image--gradient">
<div class="vi-contextual-image__visual">
...
</div>
<figcaption class="vi-contextual-image__caption">
<p>Humblebrag wes anderson tofu next level readymade. Asymmetrical shabby chic goth venmo keytar stumptown franzen. Leggings lumbersexual before they sold out kogi disrupt schlitz cred. Polaroid fashion axe sustainable keffiyeh try-hard normcore. Put a bird on it church-key celiac pork belly.</p>
</figcaption>
</figure>
<p>Ugh cleanse vice marfa meggings tofu. Lumbersexual butcher sustainable fingerstache tofu cronut biodiesel keffiyeh. Kale chips sriracha blue bottle food truck hella swag. You probably haven't heard of them bicycle rights direct trade craft beer. You probably haven't heard of them tote bag pour-over. Blog kogi plaid pabst wayfarers. Drinking craft beer ramps.</p>
<!-- Contextual Image (mods: --large, --left, --background, --white) -->
<figure class="vi-contextual-image vi-contextual-image--large vi-contextual-image--left vi-contextual-image--background vi-contextual-image--white">
<div class="vi-contextual-image__visual">
...
</div>
<figcaption class="vi-contextual-image__caption">
<p>Banjo bespoke pour-over sriracha vhs heirloom listicle. Messenger bag salvia shabby chic chartreuse pug. Kinfolk asymmetrical gentrify wayfarers twee. Franzen typewriter venmo cardigan aesthetic.</p>
</figcaption>
</figure>
<p>Photo booth selfies williamsburg kombucha cronut. Crucifix jean shorts seitan. Butcher cray pickled drinking. Shabby chic vice yolo poutine ramps plaid paleo. Butcher cardigan normcore slow-carb synth bespoke typewriter vinegar. Chambray venmo normcore banh mi scenester pickled beard plaid. Vhs yolo marfa.</p>
<!-- Contextual Image (mods: --large, --right, --background, --neutral) -->
<figure class="vi-contextual-image vi-contextual-image--large vi-contextual-image--right vi-contextual-image--background vi-contextual-image--neutral">
<div class="vi-contextual-image__visual">
...
</div>
<figcaption class="vi-contextual-image__caption">
<p>Lo-fi vegan cold-pressed ugh loko you probably haven't heard of them. Vinyl letterpress tattooed gastropub etsy kickstarter church-key williamsburg. Cleanse forage chambray. Next level deep v fanny pack semiotics. Cold-pressed drinking microdosing 3 wolf moon plaid freegan leggings.</p>
</figcaption>
</figure>
<p>Mumblecore twee shabby chic. Seitan locavore selfies leggings keffiyeh. Actually swag banjo food truck kogi green juice. Microdosing salvia messenger bag forage 3 wolf moon normcore kogi truffaut. Scenester williamsburg poutine. Deep v biodiesel cliche austin pug. Listicle mlkshk diy. Loko heirloom food truck dreamcatcher pop-up.</p>
</div>
<div class="vi-content-layout__sidebar">
<div class="vi-content-layout__sidebar-sticky">
...
</div>
</div>
</div>
</div>Background also work when in strip mode.
Keffiyeh yr lomo neutra wolf dreamcatcher ugh pinterest. Celiac ethical heirloom. Sriracha small batch muggle magic etsy shoreditch sustainable skateboard. You probably haven't heard of them yr green juice.
Intelligentsia deep v tousled bitters semiotics flexitarian readymade. Flexitarian shabby chic humblebrag bicycle rights gluten-free narwhal jean shorts. Tote bag muggle magic beard retro. Tote bag semiotics squid pork belly. Forage letterpress swag sustainable put a bird on it authentic.
Selvage listicle craft beer. Salvia lomo mustache fingerstache fashion axe. Sartorial ennui yuccie. Park meh sriracha whatever quinoa selvage sustainable. Skateboard authentic letterpress etsy scenester fashion axe direct trade. Wes anderson echo freegan park banjo letterpress. Kickstarter selvage typewriter irony retro distillery. Poutine microdosing craft beer paleo cardigan fanny pack art party hammock. Butcher crucifix lo-fi before they sold out ugh.
Chia bushwick portland actually pabst distillery taxidermy. Diy thundercats chartreuse keytar pork belly. Fashion axe godard skateboard hella kickstarter ramps single-origin coffee authentic. Heirloom hashtag freegan crucifix salvia post-ironic. Squid readymade kinfolk jean shorts. Typewriter messenger bag cliche synth kickstarter slow-carb. Tousled synth normcore meggings. Scenester mumblecore jean shorts hashtag mixtape park goth single-origin coffee. Small batch selvage hammock seitan blue bottle church-key diy.
Offal austin organic. Artisan yolo authentic mustache tofu typewriter. Vice asymmetrical brooklyn before they sold out listicle 3 wolf moon. Gentrify bushwick salvia swag helvetica. Chartreuse park tousled master street irony you probably haven't heard of them kinfolk. Literally phlogiston twee muggle magic cronut biodiesel. Squid marfa brunch roof kickstarter flexitarian. Chartreuse master flannel.
Migas direct trade whatever listicle polaroid wes anderson tattooed. Semiotics leggings +1. Iphone next level locavore kombucha.
Hoodie austin gentrify cliche single-origin coffee. Slow-carb heirloom etsy tote bag quinoa paleo taxidermy. Cleanse echo beard chia phlogiston. Gluten-free cold-pressed slow-carb loko keytar vhs. Cronut park street quinoa vhs. Celiac photo booth 3 wolf moon cold-pressed tousled meggings vice. Taxidermy master tilde chicharrones marfa polaroid.
Green juice pop-up schlitz ugh austin. Photo booth yolo actually poutine fashion axe diy raw denim food truck. Schlitz irony skateboard shoreditch tacos salvia. Drinking loko fixie helvetica park.
Actually ramps yolo viral. Roof occupy vhs you probably haven't heard of them church-key. Pbr&b biodiesel tote bag. Hoodie pinterest salvia. Bespoke shoreditch leggings drinking viral tumblr post-ironic. Phlogiston vinyl before they sold out craft beer cray artisan. Cardigan wes anderson mumblecore post-ironic raw denim vhs kombucha. Iphone pug photo booth tote bag green juice.
<!-- Wrapped by container -->
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<!-- Content Layout -->
<div class="vi-content-layout">
<div class="vi-content-layout__main">
<p>Keffiyeh yr lomo neutra wolf dreamcatcher ugh pinterest. Celiac ethical heirloom. Sriracha small batch muggle magic etsy shoreditch sustainable skateboard. You probably haven't heard of them yr green juice.</p>
<!-- Contextual Image (mods: --small, --left, --strip, --background, --primary) -->
<figure class="vi-contextual-image vi-contextual-image--small vi-contextual-image--left vi-contextual-image--strip vi-contextual-image--background vi-contextual-image--primary">
<div class="vi-contextual-image__visual">
...
</div>
<figcaption class="vi-contextual-image__caption">
<p>Intelligentsia deep v tousled bitters semiotics flexitarian readymade. Flexitarian shabby chic humblebrag bicycle rights gluten-free narwhal jean shorts. Tote bag muggle magic beard retro. Tote bag semiotics squid pork belly. Forage letterpress swag sustainable put a bird on it authentic.</p>
</figcaption>
</figure>
<p>Selvage listicle craft beer. Salvia lomo mustache fingerstache fashion axe. Sartorial ennui yuccie. Park meh sriracha whatever quinoa selvage sustainable. Skateboard authentic letterpress etsy scenester fashion axe direct trade. Wes anderson echo freegan park banjo letterpress. Kickstarter selvage typewriter irony retro distillery. Poutine microdosing craft beer paleo cardigan fanny pack art party hammock. Butcher crucifix lo-fi before they sold out ugh.</p>
<!-- Contextual Image (mods: --small, --right, --strip, --background, --gradient) -->
<figure class="vi-contextual-image vi-contextual-image--small vi-contextual-image--right vi-contextual-image--strip vi-contextual-image--background vi-contextual-image--gradient">
<div class="vi-contextual-image__visual">
...
</div>
<figcaption class="vi-contextual-image__caption">
<p>Chia bushwick portland actually pabst distillery taxidermy. Diy thundercats chartreuse keytar pork belly. Fashion axe godard skateboard hella kickstarter ramps single-origin coffee authentic. Heirloom hashtag freegan crucifix salvia post-ironic. Squid readymade kinfolk jean shorts. Typewriter messenger bag cliche synth kickstarter slow-carb. Tousled synth normcore meggings. Scenester mumblecore jean shorts hashtag mixtape park goth single-origin coffee. Small batch selvage hammock seitan blue bottle church-key diy.</p>
</figcaption>
</figure>
<p>Offal austin organic. Artisan yolo authentic mustache tofu typewriter. Vice asymmetrical brooklyn before they sold out listicle 3 wolf moon. Gentrify bushwick salvia swag helvetica. Chartreuse park tousled master street irony you probably haven't heard of them kinfolk. Literally phlogiston twee muggle magic cronut biodiesel. Squid marfa brunch roof kickstarter flexitarian. Chartreuse master flannel.</p>
<!-- Contextual Image (mods: --large, --left, --strip, --background, --white) -->
<figure class="vi-contextual-image vi-contextual-image--large vi-contextual-image--left vi-contextual-image--strip vi-contextual-image--background vi-contextual-image--white">
<div class="vi-contextual-image__visual">
...
</div>
<figcaption class="vi-contextual-image__caption">
<p>Migas direct trade whatever listicle polaroid wes anderson tattooed. Semiotics leggings +1. Iphone next level locavore kombucha.</p>
</figcaption>
</figure>
<p>Hoodie austin gentrify cliche single-origin coffee. Slow-carb heirloom etsy tote bag quinoa paleo taxidermy. Cleanse echo beard chia phlogiston. Gluten-free cold-pressed slow-carb loko keytar vhs. Cronut park street quinoa vhs. Celiac photo booth 3 wolf moon cold-pressed tousled meggings vice. Taxidermy master tilde chicharrones marfa polaroid.</p>
<!-- Contextual Image (mods: --large, --right, --strip, --background, --neutral) -->
<figure class="vi-contextual-image vi-contextual-image--large vi-contextual-image--right vi-contextual-image--strip vi-contextual-image--background vi-contextual-image--neutral">
<div class="vi-contextual-image__visual">
...
</div>
<figcaption class="vi-contextual-image__caption">
<p>Green juice pop-up schlitz ugh austin. Photo booth yolo actually poutine fashion axe diy raw denim food truck. Schlitz irony skateboard shoreditch tacos salvia. Drinking loko fixie helvetica park.</p>
</figcaption>
</figure>
<p>Actually ramps yolo viral. Roof occupy vhs you probably haven't heard of them church-key. Pbr&b biodiesel tote bag. Hoodie pinterest salvia. Bespoke shoreditch leggings drinking viral tumblr post-ironic. Phlogiston vinyl before they sold out craft beer cray artisan. Cardigan wes anderson mumblecore post-ironic raw denim vhs kombucha. Iphone pug photo booth tote bag green juice.</p>
</div>
<div class="vi-content-layout__sidebar">
<div class="vi-content-layout__sidebar-sticky">
...
</div>
</div>
</div>
</div>Large captions #
Large captions can be created by using the .h4 class
(or h4 element) on the contents
of the caption (normally p tag(s)).
When using large captions the following rules apply:
- Only in combination with small images, so modifier
--small - Only in combination with strip mode, so modifier
--strip. - The caption should be center aligned, so use modifier
--centeron element with class.vi-contextual-image__caption
Art party direct trade cornhole bushwick. 3 wolf moon pug vice neutra organic. Hammock paleo drinking 8-bit.
Hella helvetica williamsburg pug slow-carb +1 pop-up swag godard roof.
Helvetica lo-fi 90's chia neutra freegan everyday. Portland wes anderson readymade squid. Yuccie microdosing chillwave health bicycle rights five dollar toast sriracha wolf. Migas roof hella aesthetic ramps. Cronut cliche keytar wolf poutine church-key shabby chic. Lumbersexual meggings muggle magic leggings beard. Vice tote bag bespoke quinoa authentic synth fixie kale chips. Helvetica aesthetic keffiyeh kinfolk put a bird on it muggle magic flexitarian. Goth kombucha asymmetrical microdosing celiac 90's meditation pour-over.
Humblebrag vinegar pinterest everyday park mustache keytar microdosing tattooed thundercats.
Messenger bag raw denim portland narwhal mumblecore offal microdosing 8-bit. Ennui drinking crucifix polaroid shoreditch diy mixtape. Iphone cardigan franzen marfa vinyl post-ironic farm-to-table. You probably haven't heard of them blue bottle drinking kickstarter paleo fashion axe. Deep v vhs ethical keytar lomo listicle forage banh mi. Street wolf pbr&b everyday roof food truck. Letterpress single-origin coffee bitters scenester green juice jean shorts bushwick salvia.
Pop-up chartreuse readymade diy mumblecore yolo hashtag pabst tumblr locavore.
Direct trade shabby chic whatever marfa. Intelligentsia iphone green juice skateboard raw denim. Put a bird on it neutra kombucha portland phlogiston celiac.
Small batch cardigan intelligentsia phlogiston. Forage put a bird on it bushwick 3 wolf moon fingerstache. Yolo polaroid +1 scenester next level butcher. Cred craft beer cleanse sustainable. Waistcoat venmo tumblr goth sustainable tousled. Flannel muggle magic franzen salvia pug. Drinking tousled leggings cold-pressed.
Taxidermy plaid tattooed bespoke keffiyeh meditation ramps polaroid normcore locavore.
Single-origin coffee scenester narwhal flexitarian sriracha. Put a bird on it hammock selvage kinfolk intelligentsia.
Humblebrag food truck street seitan. Godard meggings authentic. Ethical brooklyn ennui vinegar muggle magic. Phlogiston kickstarter post-ironic xoxo hella disrupt bushwick slow-carb. Pop-up celiac retro photo booth seitan schlitz. Marfa leggings tattooed vice mumblecore cliche trust fund. Helvetica small batch lomo mumblecore cleanse. Portland butcher pour-over mumblecore tumblr offal.
<!-- Wrapped by container -->
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<!-- Content Layout -->
<div class="vi-content-layout">
<div class="vi-content-layout__main">
<p>Art party direct trade cornhole bushwick. 3 wolf moon pug vice neutra organic. Hammock paleo drinking 8-bit.</p>
<!-- Contextual Image (mods: --small, --left, --strip) -->
<figure class="vi-contextual-image vi-contextual-image--small vi-contextual-image--left vi-contextual-image--strip">
<div class="vi-contextual-image__visual">
...
</div>
<figcaption class="vi-contextual-image__caption vi-contextual-image__caption--center">
<p class="h4">Hella helvetica williamsburg pug slow-carb +1 pop-up swag godard roof.</p>
</figcaption>
</figure>
<p>Helvetica lo-fi 90's chia neutra freegan everyday. Portland wes anderson readymade squid. Yuccie microdosing chillwave health bicycle rights five dollar toast sriracha wolf. Migas roof hella aesthetic ramps. Cronut cliche keytar wolf poutine church-key shabby chic. Lumbersexual meggings muggle magic leggings beard. Vice tote bag bespoke quinoa authentic synth fixie kale chips. Helvetica aesthetic keffiyeh kinfolk put a bird on it muggle magic flexitarian. Goth kombucha asymmetrical microdosing celiac 90's meditation pour-over.</p>
<!-- Contextual Image (mods: --small, --right, --strip) -->
<figure class="vi-contextual-image vi-contextual-image--small vi-contextual-image--right vi-contextual-image--strip">
<div class="vi-contextual-image__visual">
...
</div>
<figcaption class="vi-contextual-image__caption vi-contextual-image__caption--center">
<h6 class="h4">Humblebrag vinegar pinterest everyday park mustache keytar microdosing tattooed thundercats.</h6>
</figcaption>
</figure>
<p>Messenger bag raw denim portland narwhal mumblecore offal microdosing 8-bit. Ennui drinking crucifix polaroid shoreditch diy mixtape. Iphone cardigan franzen marfa vinyl post-ironic farm-to-table. You probably haven't heard of them blue bottle drinking kickstarter paleo fashion axe. Deep v vhs ethical keytar lomo listicle forage banh mi. Street wolf pbr&b everyday roof food truck. Letterpress single-origin coffee bitters scenester green juice jean shorts bushwick salvia.</p>
<!-- Contextual Image (mods: --small, --left, --strip) -->
<figure class="vi-contextual-image vi-contextual-image--small vi-contextual-image--left vi-contextual-image--strip">
<div class="vi-contextual-image__visual">
...
</div>
<figcaption class="vi-contextual-image__caption vi-contextual-image__caption--center">
<h4>Pop-up chartreuse readymade diy mumblecore yolo hashtag pabst tumblr locavore.</h4>
<p>Direct trade shabby chic whatever marfa. Intelligentsia iphone green juice skateboard raw denim. Put a bird on it neutra kombucha portland phlogiston celiac.</p>
</figcaption>
</figure>
<p>Small batch cardigan intelligentsia phlogiston. Forage put a bird on it bushwick 3 wolf moon fingerstache. Yolo polaroid +1 scenester next level butcher. Cred craft beer cleanse sustainable. Waistcoat venmo tumblr goth sustainable tousled. Flannel muggle magic franzen salvia pug. Drinking tousled leggings cold-pressed.</p>
<!-- Contextual Image (mods: --small, --right, --strip) -->
<figure class="vi-contextual-image vi-contextual-image--small vi-contextual-image--right vi-contextual-image--strip">
<div class="vi-contextual-image__visual">
...
</div>
<figcaption class="vi-contextual-image__caption vi-contextual-image__caption--center">
<h6 class="h4">Taxidermy plaid tattooed bespoke keffiyeh meditation ramps polaroid normcore locavore.</h6>
<p>Single-origin coffee scenester narwhal flexitarian sriracha. Put a bird on it hammock selvage kinfolk intelligentsia.</p>
</figcaption>
</figure>
<p>Humblebrag food truck street seitan. Godard meggings authentic. Ethical brooklyn ennui vinegar muggle magic. Phlogiston kickstarter post-ironic xoxo hella disrupt bushwick slow-carb. Pop-up celiac retro photo booth seitan schlitz. Marfa leggings tattooed vice mumblecore cliche trust fund. Helvetica small batch lomo mumblecore cleanse. Portland butcher pour-over mumblecore tumblr offal.</p>
</div>
<div class="vi-content-layout__sidebar">
<div class="vi-content-layout__sidebar-sticky">
...
</div>
</div>
</div>
</div>Large captions can be used in combination with backgrounds.
Carry skateboard irony. Tousled semiotics diy put a bird on it try-hard. Pbr&b freegan banjo meditation. Shoreditch leggings locavore truffaut yuccie goth fashion axe.
Listicle chicharrones schlitz vinyl roof typewriter flannel.
Flexitarian iphone beard. Paleo thundercats vice cardigan schlitz hammock park.
Fashion axe organic tousled artisan. Biodiesel tattooed brooklyn trust fund next level. Artisan trust fund migas venmo hoodie waistcoat kombucha +1. Kale chips shabby chic slow-carb park gentrify master vegan brunch. Celiac flexitarian beard. Cray cronut bicycle rights listicle direct trade. Chartreuse readymade poutine blue bottle distillery hashtag narwhal.
Beard ugh portland kinfolk shoreditch flexitarian chillwave.
Pork belly pop-up thundercats marfa intelligentsia yuccie single-origin coffee. Letterpress mixtape cornhole chia hoodie intelligentsia wolf. Butcher five dollar toast +1 iphone quinoa biodiesel.
Everyday quinoa cold-pressed pug whatever polaroid selfies retro. Organic deep v heirloom. 3 wolf moon put a bird on it freegan hammock migas. +1 deep v before they sold out tacos. Neutra paleo freegan vegan small batch. Phlogiston photo booth hammock viral shabby chic listicle intelligentsia. Cardigan whatever kitsch. Offal actually readymade you probably haven't heard of them.
Sustainable gentrify umami lomo kitsch butcher tumblr.
Loko waistcoat knausgaard flannel. Mixtape bicycle rights food truck mustache. Church-key authentic distillery microdosing drinking food truck cornhole goth. Chambray selvage try-hard aesthetic.
Austin sustainable pbr&b. Crucifix cardigan synth bitters hoodie. Vinyl brunch venmo authentic literally. Actually portland diy biodiesel bespoke aesthetic. Meditation retro lomo. Sartorial squid stumptown. Tacos xoxo blog deep v direct trade retro.
Xoxo literally roof asymmetrical venmo banjo try-hard.
Echo diy green juice wes anderson actually sustainable leggings twee. Cleanse typewriter yuccie occupy dreamcatcher. Kombucha vice keffiyeh bushwick yuccie tofu godard.
Knausgaard vinyl farm-to-table you probably haven't heard of them carry lumbersexual. Freegan thundercats truffaut echo. Art party put a bird on it pickled phlogiston shabby chic. Pickled jean shorts green juice master semiotics. Lo-fi tacos farm-to-table pinterest waistcoat pabst portland. Squid master celiac lo-fi cred beard. Keffiyeh wayfarers put a bird on it salvia meditation bespoke etsy.
<!-- Wrapped by container -->
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<!-- Content Layout -->
<div class="vi-content-layout">
<div class="vi-content-layout__main">
<p>Carry skateboard irony. Tousled semiotics diy put a bird on it try-hard. Pbr&b freegan banjo meditation. Shoreditch leggings locavore truffaut yuccie goth fashion axe.</p>
<!-- Contextual Image (mods: --small, --left, --strip, --background, --primary) -->
<figure class="vi-contextual-image vi-contextual-image--small vi-contextual-image--left vi-contextual-image--strip vi-contextual-image--background vi-contextual-image--primary">
<div class="vi-contextual-image__visual">
...
</div>
<figcaption class="vi-contextual-image__caption vi-contextual-image__caption--center">
<p class="h4">Listicle chicharrones schlitz vinyl roof typewriter flannel.</p>
<p>Flexitarian iphone beard. Paleo thundercats vice cardigan schlitz hammock park.</p>
</figcaption>
</figure>
<p>Fashion axe organic tousled artisan. Biodiesel tattooed brooklyn trust fund next level. Artisan trust fund migas venmo hoodie waistcoat kombucha +1. Kale chips shabby chic slow-carb park gentrify master vegan brunch. Celiac flexitarian beard. Cray cronut bicycle rights listicle direct trade. Chartreuse readymade poutine blue bottle distillery hashtag narwhal.</p>
<!-- Contextual Image (mods: --small, --right, --strip, --background, --gradient) -->
<figure class="vi-contextual-image vi-contextual-image--small vi-contextual-image--right vi-contextual-image--strip vi-contextual-image--background vi-contextual-image--gradient">
<div class="vi-contextual-image__visual">
...
</div>
<figcaption class="vi-contextual-image__caption vi-contextual-image__caption--center">
<h6 class="h4">Beard ugh portland kinfolk shoreditch flexitarian chillwave.</h6>
<p>Pork belly pop-up thundercats marfa intelligentsia yuccie single-origin coffee. Letterpress mixtape cornhole chia hoodie intelligentsia wolf. Butcher five dollar toast +1 iphone quinoa biodiesel.</p>
</figcaption>
</figure>
<p>Everyday quinoa cold-pressed pug whatever polaroid selfies retro. Organic deep v heirloom. 3 wolf moon put a bird on it freegan hammock migas. +1 deep v before they sold out tacos. Neutra paleo freegan vegan small batch. Phlogiston photo booth hammock viral shabby chic listicle intelligentsia. Cardigan whatever kitsch. Offal actually readymade you probably haven't heard of them.</p>
<!-- Contextual Image (mods: --small, --left, --strip, --background, --white) -->
<figure class="vi-contextual-image vi-contextual-image--small vi-contextual-image--left vi-contextual-image--strip vi-contextual-image--background vi-contextual-image--white">
<div class="vi-contextual-image__visual">
...
</div>
<figcaption class="vi-contextual-image__caption vi-contextual-image__caption--center">
<h4>Sustainable gentrify umami lomo kitsch butcher tumblr.</h4>
<p>Loko waistcoat knausgaard flannel. Mixtape bicycle rights food truck mustache. Church-key authentic distillery microdosing drinking food truck cornhole goth. Chambray selvage try-hard aesthetic.</p>
</figcaption>
</figure>
<p>Austin sustainable pbr&b. Crucifix cardigan synth bitters hoodie. Vinyl brunch venmo authentic literally. Actually portland diy biodiesel bespoke aesthetic. Meditation retro lomo. Sartorial squid stumptown. Tacos xoxo blog deep v direct trade retro.</p>
<!-- Contextual Image (mods: --small, --right, --strip, --background, --neutral) -->
<figure class="vi-contextual-image vi-contextual-image--small vi-contextual-image--right vi-contextual-image--strip vi-contextual-image--background vi-contextual-image--neutral">
<div class="vi-contextual-image__visual">
...
</div>
<figcaption class="vi-contextual-image__caption vi-contextual-image__caption--center">
<h6 class="h4">Xoxo literally roof asymmetrical venmo banjo try-hard.</h6>
<p>Echo diy green juice wes anderson actually sustainable leggings twee. Cleanse typewriter yuccie occupy dreamcatcher. Kombucha vice keffiyeh bushwick yuccie tofu godard.</p>
</figcaption>
</figure>
<p>Knausgaard vinyl farm-to-table you probably haven't heard of them carry lumbersexual. Freegan thundercats truffaut echo. Art party put a bird on it pickled phlogiston shabby chic. Pickled jean shorts green juice master semiotics. Lo-fi tacos farm-to-table pinterest waistcoat pabst portland. Squid master celiac lo-fi cred beard. Keffiyeh wayfarers put a bird on it salvia meditation bespoke etsy.</p>
</div>
<div class="vi-content-layout__sidebar">
<div class="vi-content-layout__sidebar-sticky">
...
</div>
</div>
</div>
</div>Leggings tattooed venmo before they sold out cold-pressed crucifix carry migas. Kickstarter pabst cold-pressed small batch 3 wolf moon. Neutra twee wayfarers waistcoat listicle post-ironic. Stumptown kinfolk literally freegan vegan. Migas deep v 8-bit master diy lo-fi.
Whatever narwhal farm-to-table flannel twee tacos banjo umami narwhal neutra mlkshk church-key franzen freegan humblebrag.
Portland squid muggle magic. Phlogiston tumblr plaid. Helvetica readymade tofu whatever. Kickstarter lomo phlogiston raw denim health. Intelligentsia distillery letterpress gastropub crucifix butcher before they sold out brunch. Chia before they sold out disrupt waistcoat sriracha. Letterpress tilde direct trade swag sustainable meggings. +1 dreamcatcher echo mustache diy messenger bag wes anderson. 90's raw denim pour-over +1 typewriter williamsburg.
Flannel scenester viral squid stumptown lomo tofu seitan distillery hoodie crucifix listicle try-hard narwhal brooklyn.
Lomo truffaut irony. Goth viral fanny pack slow-carb celiac marfa. Scenester humblebrag knausgaard squid aesthetic plaid pop-up master. Portland fashion axe +1. Farm-to-table flexitarian art party stumptown try-hard lumbersexual. Bespoke iphone brooklyn vhs. Yr cliche readymade yuccie chillwave everyday photo booth cleanse. Banh mi everyday narwhal tote bag echo locavore.
Artisan mustache meggings kombucha flexitarian sriracha ethical helvetica lo-fi offal letterpress tattooed locavore gluten-free tumblr.
Semiotics umami chia. Lo-fi sustainable bitters pop-up quinoa wayfarers phlogiston. Farm-to-table chartreuse locavore wes anderson. Single-origin coffee poutine dreamcatcher master shabby chic. Actually listicle tattooed umami squid. Bitters lumbersexual post-ironic. Yuccie portland tattooed you probably haven't heard of them kale chips.
Fingerstache tacos street meditation dreamcatcher meh literally lo-fi listicle mumblecore.
Readymade godard slow-carb leggings cold-pressed muggle magic blue bottle synth. Lomo gentrify drinking vinyl sustainable diy. Bushwick hammock slow-carb.
Chicharrones bicycle rights venmo celiac dreamcatcher loko semiotics. Post-ironic vinyl cred small batch hoodie poutine. Church-key sriracha letterpress selvage ramps. Hammock iphone vinegar. Craft beer migas vhs cronut small batch salvia. Keytar vinegar hashtag twee pop-up. Meggings gentrify normcore offal +1 salvia gastropub pour-over. Drinking small batch direct trade. Listicle wayfarers pickled direct trade aesthetic narwhal tattooed banjo.
Actually disrupt keytar franzen flannel scenester tattooed normcore artisan yr.
Bitters cleanse biodiesel hammock fanny pack marfa. Austin microdosing butcher typewriter next level keffiyeh organic.
<!-- Wrapped by container -->
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
<!-- Content Layout -->
<div class="vi-content-layout">
<div class="vi-content-layout__main">
<p>Leggings tattooed venmo before they sold out cold-pressed crucifix carry migas. Kickstarter pabst cold-pressed small batch 3 wolf moon. Neutra twee wayfarers waistcoat listicle post-ironic. Stumptown kinfolk literally freegan vegan. Migas deep v 8-bit master diy lo-fi.</p>
<!-- Contextual Image (mods: --small, --left) -->
<figure class="vi-contextual-image vi-contextual-image--small vi-contextual-image--left">
<div class="vi-contextual-image__visual">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-300x300.jpg" srcset="/assets/images/static/test-300x300.jpg, /assets/images/static/test-600x600.jpg 2x"></div>
</div>
<figcaption class="vi-contextual-image__caption">
<p>Whatever narwhal farm-to-table flannel twee tacos banjo umami narwhal neutra mlkshk church-key franzen freegan humblebrag.</p>
</figcaption>
</figure>
<p>Portland squid muggle magic. Phlogiston tumblr plaid. Helvetica readymade tofu whatever. Kickstarter lomo phlogiston raw denim health. Intelligentsia distillery letterpress gastropub crucifix butcher before they sold out brunch. Chia before they sold out disrupt waistcoat sriracha. Letterpress tilde direct trade swag sustainable meggings. +1 dreamcatcher echo mustache diy messenger bag wes anderson. 90's raw denim pour-over +1 typewriter williamsburg.</p>
<!-- Contextual Image (mods: --small, --right, --strip) -->
<figure class="vi-contextual-image vi-contextual-image--small vi-contextual-image--right vi-contextual-image--strip">
<div class="vi-contextual-image__visual">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--contextual vi-moment-image--contextual-1">
<div class="vi-moment-image__visual vi-moment-image__visual--contextual vi-moment-image__visual--contextual-1">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-300x300.jpg" srcset="/assets/images/static/test-300x300.jpg, /assets/images/static/test-600x600.jpg 2x"></div>
</div>
</div>
</div>
<figcaption class="vi-contextual-image__caption vi-contextual-image__caption--center">
<p class="h4">Flannel scenester viral squid stumptown lomo tofu seitan distillery hoodie crucifix listicle try-hard narwhal brooklyn.</p>
</figcaption>
</figure>
<p>Lomo truffaut irony. Goth viral fanny pack slow-carb celiac marfa. Scenester humblebrag knausgaard squid aesthetic plaid pop-up master. Portland fashion axe +1. Farm-to-table flexitarian art party stumptown try-hard lumbersexual. Bespoke iphone brooklyn vhs. Yr cliche readymade yuccie chillwave everyday photo booth cleanse. Banh mi everyday narwhal tote bag echo locavore.</p>
<!-- Contextual Image (mods: --large, --left, --strip) -->
<figure class="vi-contextual-image vi-contextual-image--large vi-contextual-image--left vi-contextual-image--strip">
<div class="vi-contextual-image__visual">
<!-- Rectangular Image (mods: --custom) -->
<div class="vi-rectangular-image vi-rectangular-image--custom" style="padding-top: 75.00000%"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-450x338.jpg" srcset="/assets/images/static/test-450x338.jpg, /assets/images/static/test-900x676.jpg 2x"></div>
</div>
<figcaption class="vi-contextual-image__caption">
<p>Artisan mustache meggings kombucha flexitarian sriracha ethical helvetica lo-fi offal letterpress tattooed locavore gluten-free tumblr.</p>
</figcaption>
</figure>
<p>Semiotics umami chia. Lo-fi sustainable bitters pop-up quinoa wayfarers phlogiston. Farm-to-table chartreuse locavore wes anderson. Single-origin coffee poutine dreamcatcher master shabby chic. Actually listicle tattooed umami squid. Bitters lumbersexual post-ironic. Yuccie portland tattooed you probably haven't heard of them kale chips.</p>
<!-- Contextual Image (mods: --small, --right, --strip) -->
<figure class="vi-contextual-image vi-contextual-image--small vi-contextual-image--right vi-contextual-image--strip">
<div class="vi-contextual-image__visual">
<!-- Rectangular Image (mods: --custom) -->
<div class="vi-rectangular-image vi-rectangular-image--custom" style="padding-top: 133.33333%"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-300x400.jpg" srcset="/assets/images/static/test-300x400.jpg, /assets/images/static/test-600x800.jpg 2x"></div>
</div>
<figcaption class="vi-contextual-image__caption vi-contextual-image__caption--center">
<h4>Fingerstache tacos street meditation dreamcatcher meh literally lo-fi listicle mumblecore.</h4>
<p>Readymade godard slow-carb leggings cold-pressed muggle magic blue bottle synth. Lomo gentrify drinking vinyl sustainable diy. Bushwick hammock slow-carb.</p>
</figcaption>
</figure>
<p>Chicharrones bicycle rights venmo celiac dreamcatcher loko semiotics. Post-ironic vinyl cred small batch hoodie poutine. Church-key sriracha letterpress selvage ramps. Hammock iphone vinegar. Craft beer migas vhs cronut small batch salvia. Keytar vinegar hashtag twee pop-up. Meggings gentrify normcore offal +1 salvia gastropub pour-over. Drinking small batch direct trade. Listicle wayfarers pickled direct trade aesthetic narwhal tattooed banjo.</p>
<!-- Contextual Image (mods: --small, --left, --strip) -->
<figure class="vi-contextual-image vi-contextual-image--small vi-contextual-image--left vi-contextual-image--strip">
<div class="vi-contextual-image__visual">
<!-- Moment Image -->
<div class="vi-moment-image vi-moment-image--contextual vi-moment-image--contextual-2">
<div class="vi-moment-image__visual vi-moment-image__visual--contextual vi-moment-image__visual--contextual-2">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-300x300.jpg" srcset="/assets/images/static/test-300x300.jpg, /assets/images/static/test-600x600.jpg 2x"></div>
</div>
</div>
</div>
<figcaption class="vi-contextual-image__caption vi-contextual-image__caption--center">
<h4>Actually disrupt keytar franzen flannel scenester tattooed normcore artisan yr.</h4>
<p>Bitters cleanse biodiesel hammock fanny pack marfa. Austin microdosing butcher typewriter next level keffiyeh organic.</p>
</figcaption>
</figure>
</div>
<div class="vi-content-layout__sidebar">
<div class="vi-content-layout__sidebar-sticky">
...
</div>
</div>
</div>
</div>Stylesheets #
The following stylesheet is required to display this component.
The following additional stylesheets are used to display the example(s).
The following additional javascript is used to display the example(s).
Usage documentation #
Usage documentation can be found here.
Changelog #
Changelog
Changed
- 14 Jan 2025 - feat(contextual-image): adjust small right margin in styles to always align to the left
Added
- 05 Mar 2025 - feat(contextual-image): add grid example
- Add BPS support
- Initial draft