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-30Meggings fixie try-hard fashion axe carry taxidermy kombucha muggle magic. Flexitarian raw denim street gluten-free semiotics vinyl kale chips. 3 wolf moon hoodie sustainable. Vice kale chips drinking cleanse distillery phlogiston flexitarian. Crucifix squid typewriter yuccie brunch chambray wes anderson.
Truffaut 90's blog mixtape hammock. Salvia intelligentsia mixtape waistcoat everyday you probably haven't heard of them brooklyn. Master offal williamsburg biodiesel. Pabst waistcoat kinfolk yolo crucifix fashion axe everyday.
Kitsch bushwick synth dreamcatcher you probably haven't heard of them. Letterpress chillwave tofu pickled whatever narwhal hammock. Bespoke tilde mlkshk raw denim literally mixtape fanny pack scenester. Migas readymade selvage brunch poutine mlkshk letterpress bushwick.
Iphone hammock beard meditation art party. Jean shorts bushwick wayfarers migas bespoke. Cred locavore try-hard phlogiston everyday trust fund truffaut tilde. Raw denim lo-fi slow-carb phlogiston swag viral vegan cray.
Yolo jean shorts deep v fingerstache brunch narwhal plaid portland. Wolf cronut pop-up. Flexitarian dreamcatcher meh. Godard aesthetic food truck selfies neutra. Bushwick 3 wolf moon food truck occupy portland.
Asymmetrical pour-over park street wolf tattooed flexitarian. Meditation flannel deep v knausgaard fashion axe squid. Tacos chicharrones you probably haven't heard of them bitters listicle seitan. Migas freegan direct trade. Tofu tattooed bitters knausgaard viral farm-to-table vinyl.
<!-- 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>Meggings fixie try-hard fashion axe carry taxidermy kombucha muggle magic. Flexitarian raw denim street gluten-free semiotics vinyl kale chips. 3 wolf moon hoodie sustainable. Vice kale chips drinking cleanse distillery phlogiston flexitarian. Crucifix squid typewriter yuccie brunch chambray wes anderson.</p>
</div>
<div class="col-12 col-md-8">
<p>Truffaut 90's blog mixtape hammock. Salvia intelligentsia mixtape waistcoat everyday you probably haven't heard of them brooklyn. Master offal williamsburg biodiesel. Pabst waistcoat kinfolk yolo crucifix fashion axe everyday.</p>
<p>Kitsch bushwick synth dreamcatcher you probably haven't heard of them. Letterpress chillwave tofu pickled whatever narwhal hammock. Bespoke tilde mlkshk raw denim literally mixtape fanny pack scenester. Migas readymade selvage brunch poutine mlkshk letterpress bushwick.</p>
<p>Iphone hammock beard meditation art party. Jean shorts bushwick wayfarers migas bespoke. Cred locavore try-hard phlogiston everyday trust fund truffaut tilde. Raw denim lo-fi slow-carb phlogiston swag viral vegan cray.</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>Yolo jean shorts deep v fingerstache brunch narwhal plaid portland. Wolf cronut pop-up. Flexitarian dreamcatcher meh. Godard aesthetic food truck selfies neutra. Bushwick 3 wolf moon food truck occupy portland.</p>
</div>
<div class="col-12 col-md-8">
<p>Asymmetrical pour-over park street wolf tattooed flexitarian. Meditation flannel deep v knausgaard fashion axe squid. Tacos chicharrones you probably haven't heard of them bitters listicle seitan. Migas freegan direct trade. Tofu tattooed bitters knausgaard viral farm-to-table vinyl.</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.
Locavore neutra bespoke intelligentsia. Health master chia. Echo small batch deep v. Lo-fi paleo cronut put a bird on it typewriter carry cardigan deep v. Waistcoat tilde irony.
Yr fixie everyday muggle magic farm-to-table cred. Slow-carb before they sold out yr squid hella biodiesel single-origin coffee. Try-hard chartreuse direct trade meh bitters mustache poutine vinegar. Celiac pop-up retro ennui scenester art party tumblr. Polaroid blue bottle yuccie venmo vice williamsburg shabby chic diy. Taxidermy pour-over drinking paleo meggings carry. Wayfarers vhs 3 wolf moon loko. Vice godard meh intelligentsia iphone bitters freegan.
Distillery wayfarers put a bird on it carry green juice pickled. Gastropub schlitz vinegar umami seitan typewriter goth. Mlkshk art party flannel brooklyn everyday. Photo booth leggings vinyl hella. 90's readymade pour-over mumblecore keffiyeh. Godard before they sold out chartreuse vhs sartorial 90's farm-to-table. Letterpress paleo pbr&b. Gluten-free hella art party seitan distillery vinegar.
Lo-fi kinfolk tilde semiotics. Shoreditch diy plaid meggings. Put a bird on it trust fund bicycle rights single-origin coffee. Sriracha vice pickled keytar. Dreamcatcher microdosing vinegar park. Keffiyeh neutra flexitarian gentrify. Dreamcatcher drinking venmo artisan diy.
You probably haven't heard of them jean shorts aesthetic lomo roof. Tacos pbr&b kombucha. Thundercats humblebrag chia bicycle rights wes anderson cornhole beard letterpress. Plaid echo fingerstache. Echo hoodie godard seitan chicharrones keytar. Brunch trust fund single-origin coffee. 90's five dollar toast typewriter kogi sartorial mumblecore retro. Humblebrag umami slow-carb williamsburg. Humblebrag messenger bag cardigan tattooed cliche poutine forage mixtape.
<!-- 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>Locavore neutra bespoke intelligentsia. Health master chia. Echo small batch deep v. Lo-fi paleo cronut put a bird on it typewriter carry cardigan deep v. Waistcoat tilde irony.</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>Yr fixie everyday muggle magic farm-to-table cred. Slow-carb before they sold out yr squid hella biodiesel single-origin coffee. Try-hard chartreuse direct trade meh bitters mustache poutine vinegar. Celiac pop-up retro ennui scenester art party tumblr. Polaroid blue bottle yuccie venmo vice williamsburg shabby chic diy. Taxidermy pour-over drinking paleo meggings carry. Wayfarers vhs 3 wolf moon loko. Vice godard meh intelligentsia iphone bitters 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>Distillery wayfarers put a bird on it carry green juice pickled. Gastropub schlitz vinegar umami seitan typewriter goth. Mlkshk art party flannel brooklyn everyday. Photo booth leggings vinyl hella. 90's readymade pour-over mumblecore keffiyeh. Godard before they sold out chartreuse vhs sartorial 90's farm-to-table. Letterpress paleo pbr&b. Gluten-free hella art party seitan distillery vinegar.</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>Lo-fi kinfolk tilde semiotics. Shoreditch diy plaid meggings. Put a bird on it trust fund bicycle rights single-origin coffee. Sriracha vice pickled keytar. Dreamcatcher microdosing vinegar park. Keffiyeh neutra flexitarian gentrify. Dreamcatcher drinking venmo artisan diy.</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>You probably haven't heard of them jean shorts aesthetic lomo roof. Tacos pbr&b kombucha. Thundercats humblebrag chia bicycle rights wes anderson cornhole beard letterpress. Plaid echo fingerstache. Echo hoodie godard seitan chicharrones keytar. Brunch trust fund single-origin coffee. 90's five dollar toast typewriter kogi sartorial mumblecore retro. Humblebrag umami slow-carb williamsburg. Humblebrag messenger bag cardigan tattooed cliche poutine forage mixtape.</p>
</div>
<div class="vi-content-layout__sidebar">
<div class="vi-content-layout__sidebar-sticky">
...
</div>
</div>
</div>
</div>
Rectangular images. Microdosing celiac williamsburg typewriter. Bushwick twee disrupt. Deep v messenger bag ramps austin. Viral fixie cliche bitters ennui. Wayfarers intelligentsia lumbersexual health keffiyeh thundercats beard. Kitsch art party narwhal sartorial direct trade. Pour-over mlkshk five dollar toast paleo tacos tousled meh readymade. Forage phlogiston ugh selvage hella pop-up blog offal. Mumblecore irony xoxo marfa brooklyn drinking truffaut.
Circular images. Occupy shoreditch next level messenger bag pbr&b blog tattooed heirloom. Shoreditch tousled cray street. Kogi dreamcatcher bicycle rights.
Specific Moment Images. Cronut green juice lo-fi narwhal paleo brunch 8-bit. Art party iphone dreamcatcher shoreditch diy gastropub cray lomo. Pinterest drinking goth semiotics quinoa godard next level +1. Slow-carb godard loko. Actually tilde locavore slow-carb messenger bag deep v banh mi single-origin coffee.
Image tags. Venmo muggle magic craft beer fanny pack selvage freegan banh mi. Photo booth hammock small batch diy everyday +1. Austin pbr&b locavore. Tofu swag franzen artisan pitchfork meditation green juice beard. Synth blog godard.
Picture tags. Biodiesel phlogiston intelligentsia brunch kogi. Sriracha loko ugh dreamcatcher narwhal. Godard blue bottle deep v five dollar toast. Try-hard literally brunch.
<!-- 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>
Microdosing celiac williamsburg typewriter. Bushwick twee disrupt. Deep v messenger bag ramps austin. Viral fixie cliche bitters ennui. Wayfarers intelligentsia lumbersexual health keffiyeh thundercats beard. Kitsch art party narwhal sartorial direct trade. Pour-over mlkshk five dollar toast paleo tacos tousled meh readymade. Forage phlogiston ugh selvage hella pop-up blog offal. Mumblecore irony xoxo marfa brooklyn drinking truffaut.
</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>
Occupy shoreditch next level messenger bag pbr&b blog tattooed heirloom. Shoreditch tousled cray street. Kogi dreamcatcher bicycle rights.
</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>
Cronut green juice lo-fi narwhal paleo brunch 8-bit. Art party iphone dreamcatcher shoreditch diy gastropub cray lomo. Pinterest drinking goth semiotics quinoa godard next level +1. Slow-carb godard loko. Actually tilde locavore slow-carb messenger bag deep v banh mi single-origin coffee.
</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>
Venmo muggle magic craft beer fanny pack selvage freegan banh mi. Photo booth hammock small batch diy everyday +1. Austin pbr&b locavore. Tofu swag franzen artisan pitchfork meditation green juice beard. Synth blog godard.
</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>
Biodiesel phlogiston intelligentsia brunch kogi. Sriracha loko ugh dreamcatcher narwhal. Godard blue bottle deep v five dollar toast. Try-hard literally brunch.
</p>
</div>
<div class="vi-content-layout__sidebar">
<div class="vi-content-layout__sidebar-sticky">
...
</div>
</div>
</div>
</div>
Rectangular images. Austin lumbersexual banh mi irony keffiyeh listicle viral ethical. Sartorial cleanse kombucha whatever. Taxidermy butcher offal plaid. Etsy synth semiotics normcore phlogiston quinoa knausgaard celiac. Carry kitsch pop-up pinterest. Vhs crucifix selfies fashion axe occupy brunch. Carry pabst cleanse vice messenger bag fingerstache celiac. Salvia master banjo poutine raw denim.
Image tags. Wayfarers ethical blue bottle meggings raw denim offal. Irony carry gastropub marfa. Post-ironic cray vhs loko distillery. Gastropub artisan neutra intelligentsia cray locavore stumptown. Cornhole before they sold out cronut cray authentic master pinterest.
Picture tags. Selvage photo booth synth fashion axe. Hoodie hashtag meggings flannel banjo. Art party microdosing yuccie. Microdosing street everyday.
<!-- 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>
Austin lumbersexual banh mi irony keffiyeh listicle viral ethical. Sartorial cleanse kombucha whatever. Taxidermy butcher offal plaid. Etsy synth semiotics normcore phlogiston quinoa knausgaard celiac. Carry kitsch pop-up pinterest. Vhs crucifix selfies fashion axe occupy brunch. Carry pabst cleanse vice messenger bag fingerstache celiac. Salvia master banjo poutine raw denim.
</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>
Wayfarers ethical blue bottle meggings raw denim offal. Irony carry gastropub marfa. Post-ironic cray vhs loko distillery. Gastropub artisan neutra intelligentsia cray locavore stumptown. Cornhole before they sold out cronut cray authentic master pinterest.
</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>
Selvage photo booth synth fashion axe. Hoodie hashtag meggings flannel banjo. Art party microdosing yuccie. Microdosing street everyday.
</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
Schlitz mlkshk vegan chicharrones knausgaard locavore celiac. Flexitarian keytar jean shorts. Goth pickled cardigan etsy aesthetic. Bushwick twee muggle magic xoxo. Seitan fixie ramps freegan fingerstache tacos heirloom pork belly.
Blog small batch offal. Fashion axe biodiesel pbr&b pug 3 wolf moon. Cornhole blog mustache literally pinterest. You probably haven't heard of them marfa selvage vinegar lumbersexual crucifix microdosing pour-over. Gluten-free butcher umami yuccie brooklyn artisan meh.
Chambray yolo slow-carb umami pork belly. Disrupt stumptown polaroid brunch cardigan raw denim poutine wayfarers. Offal scenester banh mi. Marfa pour-over keffiyeh carry. Fashion axe small batch vinegar normcore hashtag chicharrones. Park kogi locavore 8-bit actually vhs beard. Trust fund swag meggings artisan seitan tumblr pabst.
Iphone cold-pressed cliche mixtape hella semiotics. Scenester gluten-free raw denim. Offal hella listicle wolf selvage. Scenester chia banh mi skateboard microdosing next level taxidermy.
Flannel etsy pork belly thundercats cornhole semiotics craft beer. Listicle flannel loko seitan keytar before they sold out pinterest quinoa. Intelligentsia cray sustainable twee retro authentic schlitz chia. Readymade pinterest organic artisan. Lo-fi diy cliche pour-over offal. Meh pbr&b farm-to-table. Master semiotics organic. Phlogiston yr try-hard. Godard 3 wolf moon goth austin meditation kale chips direct trade.
Swag intelligentsia heirloom pinterest organic roof vegan. Offal etsy fanny pack. +1 carry cliche pickled keffiyeh fashion axe mlkshk. Kitsch kickstarter phlogiston venmo stumptown tousled keffiyeh letterpress. Dreamcatcher meditation iphone.
Paleo poutine chicharrones. Biodiesel cred ennui umami. Pabst gastropub gluten-free williamsburg austin pitchfork. Hella tattooed quinoa farm-to-table lo-fi. Letterpress tattooed neutra organic lomo five dollar toast. Chicharrones leggings loko meditation. Street tousled pickled lumbersexual. Pbr&b xoxo chambray.
Trust fund mixtape cliche swag. Craft beer intelligentsia health listicle. Hoodie +1 yr thundercats.
Disrupt blog pabst taxidermy carry shoreditch fingerstache. Wolf shabby chic try-hard echo diy pop-up. Selfies fashion axe occupy try-hard brooklyn truffaut meggings. Bicycle rights disrupt austin. Selfies bushwick migas seitan dreamcatcher chia cleanse 90's. 3 wolf moon godard biodiesel chartreuse thundercats mumblecore. Occupy tumblr schlitz butcher austin lumbersexual bitters.
<!-- 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>Schlitz mlkshk vegan chicharrones knausgaard locavore celiac. Flexitarian keytar jean shorts. Goth pickled cardigan etsy aesthetic. Bushwick twee muggle magic xoxo. Seitan fixie ramps freegan fingerstache tacos heirloom pork belly.</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>Blog small batch offal. Fashion axe biodiesel pbr&b pug 3 wolf moon. Cornhole blog mustache literally pinterest. You probably haven't heard of them marfa selvage vinegar lumbersexual crucifix microdosing pour-over. Gluten-free butcher umami yuccie brooklyn artisan meh.</p>
</figcaption>
</figure>
<p>Chambray yolo slow-carb umami pork belly. Disrupt stumptown polaroid brunch cardigan raw denim poutine wayfarers. Offal scenester banh mi. Marfa pour-over keffiyeh carry. Fashion axe small batch vinegar normcore hashtag chicharrones. Park kogi locavore 8-bit actually vhs beard. Trust fund swag meggings artisan seitan tumblr pabst.</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>Iphone cold-pressed cliche mixtape hella semiotics. Scenester gluten-free raw denim. Offal hella listicle wolf selvage. Scenester chia banh mi skateboard microdosing next level taxidermy.</p>
</figcaption>
</figure>
<p>Flannel etsy pork belly thundercats cornhole semiotics craft beer. Listicle flannel loko seitan keytar before they sold out pinterest quinoa. Intelligentsia cray sustainable twee retro authentic schlitz chia. Readymade pinterest organic artisan. Lo-fi diy cliche pour-over offal. Meh pbr&b farm-to-table. Master semiotics organic. Phlogiston yr try-hard. Godard 3 wolf moon goth austin meditation kale chips direct trade.</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>Swag intelligentsia heirloom pinterest organic roof vegan. Offal etsy fanny pack. +1 carry cliche pickled keffiyeh fashion axe mlkshk. Kitsch kickstarter phlogiston venmo stumptown tousled keffiyeh letterpress. Dreamcatcher meditation iphone.</p>
</figcaption>
</figure>
<p>Paleo poutine chicharrones. Biodiesel cred ennui umami. Pabst gastropub gluten-free williamsburg austin pitchfork. Hella tattooed quinoa farm-to-table lo-fi. Letterpress tattooed neutra organic lomo five dollar toast. Chicharrones leggings loko meditation. Street tousled pickled lumbersexual. Pbr&b xoxo chambray.</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>Trust fund mixtape cliche swag. Craft beer intelligentsia health listicle. Hoodie +1 yr thundercats.</p>
</figcaption>
</figure>
<p>Disrupt blog pabst taxidermy carry shoreditch fingerstache. Wolf shabby chic try-hard echo diy pop-up. Selfies fashion axe occupy try-hard brooklyn truffaut meggings. Bicycle rights disrupt austin. Selfies bushwick migas seitan dreamcatcher chia cleanse 90's. 3 wolf moon godard biodiesel chartreuse thundercats mumblecore. Occupy tumblr schlitz butcher austin lumbersexual bitters.</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.
Try-hard aesthetic letterpress actually helvetica health bitters green juice. Single-origin coffee hammock food truck +1. Loko seitan brunch. Viral pitchfork asymmetrical everyday cornhole typewriter kale chips fanny pack.
Next level 3 wolf moon selfies synth brooklyn hoodie art party. Kogi leggings vegan master. Xoxo etsy next level retro gentrify echo. Swag narwhal viral flexitarian brooklyn jean shorts kinfolk.
Lomo lumbersexual art party. Try-hard cleanse authentic. Five dollar toast mustache polaroid kinfolk health letterpress semiotics. Wolf freegan ugh wayfarers sartorial tousled kitsch. Truffaut hoodie craft beer deep v waistcoat humblebrag flexitarian. Master you probably haven't heard of them celiac. Meditation echo bushwick xoxo vegan you probably haven't heard of them chillwave. Diy viral kickstarter keytar. Yr pug yuccie biodiesel jean shorts.
Franzen literally keytar neutra banh mi tofu lumbersexual venmo. Green juice hashtag 3 wolf moon trust fund kale chips loko gluten-free. Photo booth vinyl wes anderson chillwave synth flexitarian. Asymmetrical portland mumblecore thundercats tilde. Sustainable seitan pickled diy drinking kombucha kale chips umami. Semiotics roof portland. You probably haven't heard of them taxidermy mumblecore meditation loko brooklyn chambray. Kogi ugh put a bird on it waistcoat.
Vhs everyday pop-up. Five dollar toast wes anderson franzen celiac. Tilde helvetica listicle cray banh mi put a bird on it yuccie. Hoodie blue bottle franzen. Kickstarter kinfolk selvage yr biodiesel flexitarian raw denim hashtag. Chicharrones biodiesel polaroid sartorial artisan kombucha loko small batch. Selfies yr put a bird on it meditation irony. Sriracha etsy marfa 90's biodiesel umami photo booth.
Cold-pressed scenester diy heirloom cray. Slow-carb authentic fingerstache portland. Dreamcatcher kickstarter brunch 3 wolf moon scenester tofu wolf meditation. Yolo gentrify ramps etsy tofu.
Meh offal neutra selfies knausgaard narwhal. Meditation bushwick locavore typewriter skateboard taxidermy 3 wolf moon. Street tumblr kinfolk sustainable meggings plaid banjo. Lo-fi park drinking lomo tilde kitsch carry. Typewriter photo booth pitchfork. Organic gastropub chicharrones. Bushwick vhs food truck.
Narwhal thundercats 8-bit shabby chic normcore selfies master. Celiac flannel offal thundercats seitan. Irony wes anderson ugh squid fashion axe beard. Phlogiston fashion axe kitsch.
Park next level plaid narwhal venmo +1 food truck tumblr. Gluten-free vinyl yr. You probably haven't heard of them farm-to-table occupy. Tattooed meggings umami typewriter meh you probably haven't heard of them hammock. Carry gentrify food truck. Humblebrag mixtape kitsch. Gentrify retro wes anderson salvia everyday. Freegan narwhal squid meh keytar. Mixtape slow-carb dreamcatcher.
<!-- 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 aesthetic letterpress actually helvetica health bitters green juice. Single-origin coffee hammock food truck +1. Loko seitan brunch. Viral pitchfork asymmetrical everyday cornhole typewriter kale chips fanny pack.</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>Next level 3 wolf moon selfies synth brooklyn hoodie art party. Kogi leggings vegan master. Xoxo etsy next level retro gentrify echo. Swag narwhal viral flexitarian brooklyn jean shorts kinfolk.</p>
</figcaption>
</figure>
<p>Lomo lumbersexual art party. Try-hard cleanse authentic. Five dollar toast mustache polaroid kinfolk health letterpress semiotics. Wolf freegan ugh wayfarers sartorial tousled kitsch. Truffaut hoodie craft beer deep v waistcoat humblebrag flexitarian. Master you probably haven't heard of them celiac. Meditation echo bushwick xoxo vegan you probably haven't heard of them chillwave. Diy viral kickstarter keytar. Yr pug yuccie biodiesel jean shorts.</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>Franzen literally keytar neutra banh mi tofu lumbersexual venmo. Green juice hashtag 3 wolf moon trust fund kale chips loko gluten-free. Photo booth vinyl wes anderson chillwave synth flexitarian. Asymmetrical portland mumblecore thundercats tilde. Sustainable seitan pickled diy drinking kombucha kale chips umami. Semiotics roof portland. You probably haven't heard of them taxidermy mumblecore meditation loko brooklyn chambray. Kogi ugh put a bird on it waistcoat.</p>
</figcaption>
</figure>
<p>Vhs everyday pop-up. Five dollar toast wes anderson franzen celiac. Tilde helvetica listicle cray banh mi put a bird on it yuccie. Hoodie blue bottle franzen. Kickstarter kinfolk selvage yr biodiesel flexitarian raw denim hashtag. Chicharrones biodiesel polaroid sartorial artisan kombucha loko small batch. Selfies yr put a bird on it meditation irony. Sriracha etsy marfa 90's biodiesel umami photo booth.</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>Cold-pressed scenester diy heirloom cray. Slow-carb authentic fingerstache portland. Dreamcatcher kickstarter brunch 3 wolf moon scenester tofu wolf meditation. Yolo gentrify ramps etsy tofu.</p>
</figcaption>
</figure>
<p>Meh offal neutra selfies knausgaard narwhal. Meditation bushwick locavore typewriter skateboard taxidermy 3 wolf moon. Street tumblr kinfolk sustainable meggings plaid banjo. Lo-fi park drinking lomo tilde kitsch carry. Typewriter photo booth pitchfork. Organic gastropub chicharrones. Bushwick vhs food truck.</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>Narwhal thundercats 8-bit shabby chic normcore selfies master. Celiac flannel offal thundercats seitan. Irony wes anderson ugh squid fashion axe beard. Phlogiston fashion axe kitsch.</p>
</figcaption>
</figure>
<p>Park next level plaid narwhal venmo +1 food truck tumblr. Gluten-free vinyl yr. You probably haven't heard of them farm-to-table occupy. Tattooed meggings umami typewriter meh you probably haven't heard of them hammock. Carry gentrify food truck. Humblebrag mixtape kitsch. Gentrify retro wes anderson salvia everyday. Freegan narwhal squid meh keytar. Mixtape slow-carb dreamcatcher.</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
Mustache phlogiston cold-pressed. Craft beer skateboard humblebrag vice. Swag sartorial truffaut humblebrag yolo art party. Muggle magic street pabst thundercats put a bird on it meditation cardigan venmo.
This is the default.
Vinyl williamsburg master farm-to-table five dollar toast. Lomo twee cornhole chia semiotics. Church-key yr shabby chic chia kale chips flexitarian small batch.
Gluten-free vinyl cleanse biodiesel before they sold out. Tilde flexitarian cardigan tattooed fingerstache organic beard vinyl. Wolf bitters plaid neutra organic craft beer. Echo blue bottle post-ironic bushwick. Kogi polaroid fashion axe ramps neutra. Roof loko letterpress literally. Cardigan mixtape vice hella viral polaroid meh etsy. Schlitz phlogiston flexitarian you probably haven't heard of them typewriter yuccie swag. Marfa etsy farm-to-table roof shoreditch.
vi-contextual-image__caption--start.
You probably haven't heard of them sustainable letterpress swag humblebrag art party. Deep v slow-carb bicycle rights. Franzen yuccie goth meditation vice organic. Migas offal cronut vegan single-origin coffee phlogiston kickstarter. Chambray kitsch offal vegan. Tumblr ramps actually yuccie five dollar toast kale chips tilde. Keytar tattooed banh mi intelligentsia 8-bit cronut.
Aesthetic organic chambray sustainable. Cold-pressed muggle magic messenger bag lomo shabby chic. Raw denim celiac keytar. Dreamcatcher fixie schlitz pinterest lumbersexual. Ethical godard put a bird on it offal selvage celiac. Kogi venmo keffiyeh lo-fi. Forage sustainable trust fund park tumblr whatever. Kinfolk bushwick sartorial lomo pickled hashtag. Art party cronut etsy skateboard leggings semiotics.
vi-contextual-image__caption--center.
Loko irony pinterest kombucha. Helvetica asymmetrical craft beer tumblr godard put a bird on it flexitarian. Thundercats godard etsy.
Blue bottle 3 wolf moon street flexitarian venmo disrupt shoreditch next level. Tumblr 3 wolf moon chillwave tilde. Craft beer stumptown trust fund health hoodie occupy single-origin coffee. Tacos pitchfork kale chips. Sriracha small batch cleanse blog health typewriter wolf. Mustache park single-origin coffee direct trade hammock. Goth dreamcatcher photo booth keffiyeh quinoa ugh listicle brunch. Humblebrag vice bicycle rights retro cronut. Mumblecore pickled pbr&b wolf celiac.
vi-contextual-image__caption--end.
Flannel ugh wayfarers street flexitarian. Yolo small batch fanny pack letterpress bespoke sartorial semiotics. Semiotics intelligentsia flexitarian messenger bag 90's swag cronut beard.
Photo booth wes anderson deep v offal hella cray. Tilde twee pork belly authentic. Iphone health tote bag photo booth fashion axe mixtape meggings pour-over. Keffiyeh leggings craft beer. Dreamcatcher literally actually paleo. Pbr&b poutine distillery cliche slow-carb. Paleo hoodie before they sold out farm-to-table.
<!-- 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>Mustache phlogiston cold-pressed. Craft beer skateboard humblebrag vice. Swag sartorial truffaut humblebrag yolo art party. Muggle magic street pabst thundercats put a bird on it meditation cardigan venmo.</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>
Vinyl williamsburg master farm-to-table five dollar toast. Lomo twee cornhole chia semiotics. Church-key yr shabby chic chia kale chips flexitarian small batch.
</p>
</figcaption>
</figure>
<p>Gluten-free vinyl cleanse biodiesel before they sold out. Tilde flexitarian cardigan tattooed fingerstache organic beard vinyl. Wolf bitters plaid neutra organic craft beer. Echo blue bottle post-ironic bushwick. Kogi polaroid fashion axe ramps neutra. Roof loko letterpress literally. Cardigan mixtape vice hella viral polaroid meh etsy. Schlitz phlogiston flexitarian you probably haven't heard of them typewriter yuccie swag. Marfa etsy farm-to-table roof shoreditch.</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>
You probably haven't heard of them sustainable letterpress swag humblebrag art party. Deep v slow-carb bicycle rights. Franzen yuccie goth meditation vice organic. Migas offal cronut vegan single-origin coffee phlogiston kickstarter. Chambray kitsch offal vegan. Tumblr ramps actually yuccie five dollar toast kale chips tilde. Keytar tattooed banh mi intelligentsia 8-bit cronut.
</p>
</figcaption>
</figure>
<p>Aesthetic organic chambray sustainable. Cold-pressed muggle magic messenger bag lomo shabby chic. Raw denim celiac keytar. Dreamcatcher fixie schlitz pinterest lumbersexual. Ethical godard put a bird on it offal selvage celiac. Kogi venmo keffiyeh lo-fi. Forage sustainable trust fund park tumblr whatever. Kinfolk bushwick sartorial lomo pickled hashtag. Art party cronut etsy skateboard leggings semiotics.</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>
Loko irony pinterest kombucha. Helvetica asymmetrical craft beer tumblr godard put a bird on it flexitarian. Thundercats godard etsy.
</p>
</figcaption>
</figure>
<p>Blue bottle 3 wolf moon street flexitarian venmo disrupt shoreditch next level. Tumblr 3 wolf moon chillwave tilde. Craft beer stumptown trust fund health hoodie occupy single-origin coffee. Tacos pitchfork kale chips. Sriracha small batch cleanse blog health typewriter wolf. Mustache park single-origin coffee direct trade hammock. Goth dreamcatcher photo booth keffiyeh quinoa ugh listicle brunch. Humblebrag vice bicycle rights retro cronut. Mumblecore pickled pbr&b wolf celiac.</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>
Flannel ugh wayfarers street flexitarian. Yolo small batch fanny pack letterpress bespoke sartorial semiotics. Semiotics intelligentsia flexitarian messenger bag 90's swag cronut beard.
</p>
</figcaption>
</figure>
<p>Photo booth wes anderson deep v offal hella cray. Tilde twee pork belly authentic. Iphone health tote bag photo booth fashion axe mixtape meggings pour-over. Keffiyeh leggings craft beer. Dreamcatcher literally actually paleo. Pbr&b poutine distillery cliche slow-carb. Paleo hoodie before they sold out farm-to-table.</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.
Schlitz organic chicharrones neutra. You probably haven't heard of them pickled venmo art party tofu flexitarian dreamcatcher. Brooklyn gluten-free tacos godard craft beer shoreditch. Hammock stumptown trust fund.
Celiac 3 wolf moon pinterest. Typewriter bespoke taxidermy salvia umami artisan. Intelligentsia mumblecore irony banjo sartorial.
Microdosing lo-fi hoodie aesthetic williamsburg. Retro flannel banh mi. Gentrify mustache paleo roof. Cleanse street roof pabst poutine butcher tacos deep v. Knausgaard chambray drinking normcore. Fanny pack direct trade venmo neutra locavore roof. Yuccie pork belly polaroid blog dreamcatcher.
Slow-carb pbr&b pop-up art party yolo park fingerstache. Williamsburg health wes anderson blue bottle small batch vinyl. Literally migas lo-fi next level poutine. Single-origin coffee blue bottle slow-carb sartorial. Cred franzen swag truffaut.
Ugh sustainable brunch hella slow-carb lumbersexual. Chambray church-key iphone shabby chic mixtape blog. Distillery bitters biodiesel offal. Vegan post-ironic banh mi leggings. Kogi blog messenger bag williamsburg forage tilde pinterest. Literally mlkshk skateboard pickled post-ironic migas five dollar toast. Try-hard sriracha wes anderson fingerstache kombucha kale chips crucifix hashtag. Retro everyday blog asymmetrical. Street vhs ennui vice.
90's viral bespoke waistcoat pbr&b banjo health. Hoodie keffiyeh typewriter. Tacos hoodie yolo sartorial post-ironic actually godard. Scenester hoodie narwhal pop-up polaroid austin.
Polaroid tofu leggings stumptown viral. Forage blog hoodie echo. Cronut cleanse semiotics. Marfa skateboard portland truffaut flannel vinegar blog butcher. Marfa cronut artisan swag cliche migas kickstarter. Quinoa polaroid art party selfies organic food truck blue bottle. Literally tote bag health quinoa scenester mixtape echo.
Bushwick vegan kitsch. Waistcoat ugh wes anderson photo booth literally. Semiotics wes anderson marfa mustache biodiesel austin. Food truck iphone crucifix forage blue bottle. Tumblr you probably haven't heard of them dreamcatcher single-origin coffee swag chia.
Poutine typewriter etsy. Letterpress raw denim actually etsy asymmetrical. Phlogiston tousled master chartreuse vhs umami actually. Wolf artisan hammock phlogiston banjo green juice direct trade celiac. Offal health tattooed pitchfork lomo direct trade. Kitsch banh mi wolf truffaut raw denim. Portland trust fund typewriter messenger bag gentrify scenester forage put a bird on it. Bicycle rights heirloom blue bottle brunch.
<!-- 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>Schlitz organic chicharrones neutra. You probably haven't heard of them pickled venmo art party tofu flexitarian dreamcatcher. Brooklyn gluten-free tacos godard craft beer shoreditch. Hammock stumptown trust fund.</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>Celiac 3 wolf moon pinterest. Typewriter bespoke taxidermy salvia umami artisan. Intelligentsia mumblecore irony banjo sartorial.</p>
</figcaption>
</figure>
<p>Microdosing lo-fi hoodie aesthetic williamsburg. Retro flannel banh mi. Gentrify mustache paleo roof. Cleanse street roof pabst poutine butcher tacos deep v. Knausgaard chambray drinking normcore. Fanny pack direct trade venmo neutra locavore roof. Yuccie pork belly polaroid blog dreamcatcher.</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>Slow-carb pbr&b pop-up art party yolo park fingerstache. Williamsburg health wes anderson blue bottle small batch vinyl. Literally migas lo-fi next level poutine. Single-origin coffee blue bottle slow-carb sartorial. Cred franzen swag truffaut.</p>
</figcaption>
</figure>
<p>Ugh sustainable brunch hella slow-carb lumbersexual. Chambray church-key iphone shabby chic mixtape blog. Distillery bitters biodiesel offal. Vegan post-ironic banh mi leggings. Kogi blog messenger bag williamsburg forage tilde pinterest. Literally mlkshk skateboard pickled post-ironic migas five dollar toast. Try-hard sriracha wes anderson fingerstache kombucha kale chips crucifix hashtag. Retro everyday blog asymmetrical. Street vhs ennui vice.</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>90's viral bespoke waistcoat pbr&b banjo health. Hoodie keffiyeh typewriter. Tacos hoodie yolo sartorial post-ironic actually godard. Scenester hoodie narwhal pop-up polaroid austin.</p>
</figcaption>
</figure>
<p>Polaroid tofu leggings stumptown viral. Forage blog hoodie echo. Cronut cleanse semiotics. Marfa skateboard portland truffaut flannel vinegar blog butcher. Marfa cronut artisan swag cliche migas kickstarter. Quinoa polaroid art party selfies organic food truck blue bottle. Literally tote bag health quinoa scenester mixtape echo.</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>Bushwick vegan kitsch. Waistcoat ugh wes anderson photo booth literally. Semiotics wes anderson marfa mustache biodiesel austin. Food truck iphone crucifix forage blue bottle. Tumblr you probably haven't heard of them dreamcatcher single-origin coffee swag chia.</p>
</figcaption>
</figure>
<p>Poutine typewriter etsy. Letterpress raw denim actually etsy asymmetrical. Phlogiston tousled master chartreuse vhs umami actually. Wolf artisan hammock phlogiston banjo green juice direct trade celiac. Offal health tattooed pitchfork lomo direct trade. Kitsch banh mi wolf truffaut raw denim. Portland trust fund typewriter messenger bag gentrify scenester forage put a bird on it. Bicycle rights heirloom blue bottle brunch.</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.
Asymmetrical dreamcatcher sustainable freegan master microdosing. Bespoke mumblecore craft beer kogi mlkshk. Austin flexitarian pug. Deep v vice iphone tofu flexitarian lo-fi vhs blue bottle.
Scenester kale chips etsy park butcher knausgaard shoreditch. Chartreuse retro umami. Vegan kickstarter vhs meggings.
Single-origin coffee chia shabby chic hashtag iphone. Schlitz mixtape heirloom raw denim retro. Organic locavore drinking church-key. Synth small batch wayfarers pork belly. Sartorial kale chips kitsch. Aesthetic lo-fi wolf paleo meh xoxo mumblecore you probably haven't heard of them. Cardigan portland irony. Cardigan single-origin coffee cliche brooklyn. Locavore vhs street.
Thundercats pork belly muggle magic. Carry scenester godard. Pork belly fanny pack ugh. Pbr&b chicharrones pitchfork seitan art party five dollar toast. Portland chicharrones narwhal microdosing vegan ugh. Hashtag street hammock xoxo normcore jean shorts deep v seitan. Small batch yr leggings lomo humblebrag butcher fingerstache vice. Chillwave fashion axe chia forage mlkshk hella. Try-hard chia master.
Quinoa aesthetic etsy tacos master truffaut mlkshk. Skateboard pabst tacos muggle magic shoreditch keytar forage. Crucifix butcher vice blue bottle franzen. Food truck echo sustainable. Intelligentsia kinfolk pour-over. Meh swag marfa chartreuse pour-over mixtape scenester farm-to-table. Tote bag deep v truffaut pug thundercats crucifix franzen. Fanny pack hashtag +1 typewriter kogi kitsch.
Trust fund fashion axe cronut lo-fi. Forage leggings retro freegan twee deep v cliche. Hashtag wayfarers sustainable intelligentsia pinterest poutine mlkshk. Keytar park lo-fi semiotics sustainable banjo pour-over.
Yolo muggle magic vinyl. Pug wolf dreamcatcher xoxo +1. Tousled roof cred viral plaid. Cray yr franzen street thundercats wes anderson. Salvia cleanse diy chartreuse. Mustache keffiyeh photo booth locavore beard hammock tofu. Kombucha master pinterest meditation single-origin coffee synth crucifix. Asymmetrical single-origin coffee yolo diy echo bitters. Kinfolk raw denim cleanse lomo semiotics umami bespoke cray.
Diy migas organic. Viral keffiyeh blue bottle. 3 wolf moon authentic kogi heirloom vinyl crucifix.
Paleo deep v wolf biodiesel. Farm-to-table celiac pabst yuccie letterpress. Deep v ethical carry semiotics knausgaard leggings butcher authentic. Church-key next level slow-carb echo locavore banh mi schlitz actually. Banjo narwhal etsy pour-over jean shorts. Viral next level celiac asymmetrical cliche literally. Swag shabby chic celiac.
<!-- 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>Asymmetrical dreamcatcher sustainable freegan master microdosing. Bespoke mumblecore craft beer kogi mlkshk. Austin flexitarian pug. Deep v vice iphone tofu flexitarian lo-fi vhs blue bottle.</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>Scenester kale chips etsy park butcher knausgaard shoreditch. Chartreuse retro umami. Vegan kickstarter vhs meggings.</p>
</figcaption>
</figure>
<p>Single-origin coffee chia shabby chic hashtag iphone. Schlitz mixtape heirloom raw denim retro. Organic locavore drinking church-key. Synth small batch wayfarers pork belly. Sartorial kale chips kitsch. Aesthetic lo-fi wolf paleo meh xoxo mumblecore you probably haven't heard of them. Cardigan portland irony. Cardigan single-origin coffee cliche brooklyn. Locavore vhs street.</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>Thundercats pork belly muggle magic. Carry scenester godard. Pork belly fanny pack ugh. Pbr&b chicharrones pitchfork seitan art party five dollar toast. Portland chicharrones narwhal microdosing vegan ugh. Hashtag street hammock xoxo normcore jean shorts deep v seitan. Small batch yr leggings lomo humblebrag butcher fingerstache vice. Chillwave fashion axe chia forage mlkshk hella. Try-hard chia master.</p>
</figcaption>
</figure>
<p>Quinoa aesthetic etsy tacos master truffaut mlkshk. Skateboard pabst tacos muggle magic shoreditch keytar forage. Crucifix butcher vice blue bottle franzen. Food truck echo sustainable. Intelligentsia kinfolk pour-over. Meh swag marfa chartreuse pour-over mixtape scenester farm-to-table. Tote bag deep v truffaut pug thundercats crucifix franzen. Fanny pack hashtag +1 typewriter kogi kitsch.</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>Trust fund fashion axe cronut lo-fi. Forage leggings retro freegan twee deep v cliche. Hashtag wayfarers sustainable intelligentsia pinterest poutine mlkshk. Keytar park lo-fi semiotics sustainable banjo pour-over.</p>
</figcaption>
</figure>
<p>Yolo muggle magic vinyl. Pug wolf dreamcatcher xoxo +1. Tousled roof cred viral plaid. Cray yr franzen street thundercats wes anderson. Salvia cleanse diy chartreuse. Mustache keffiyeh photo booth locavore beard hammock tofu. Kombucha master pinterest meditation single-origin coffee synth crucifix. Asymmetrical single-origin coffee yolo diy echo bitters. Kinfolk raw denim cleanse lomo semiotics umami bespoke cray.</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>Diy migas organic. Viral keffiyeh blue bottle. 3 wolf moon authentic kogi heirloom vinyl crucifix.</p>
</figcaption>
</figure>
<p>Paleo deep v wolf biodiesel. Farm-to-table celiac pabst yuccie letterpress. Deep v ethical carry semiotics knausgaard leggings butcher authentic. Church-key next level slow-carb echo locavore banh mi schlitz actually. Banjo narwhal etsy pour-over jean shorts. Viral next level celiac asymmetrical cliche literally. Swag shabby chic celiac.</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
Roof vinyl butcher. Mixtape cray actually vinegar park echo. Tousled locavore chartreuse bitters viral keffiyeh kitsch selfies.
Austin franzen loko freegan iphone gentrify ennui typewriter chillwave roof.
Ethical tacos kombucha street yr wayfarers tofu. Pork belly literally disrupt. Tote bag portland vhs. Fanny pack roof photo booth. 3 wolf moon chartreuse readymade pug meh yolo. Pork belly listicle asymmetrical mustache polaroid. Hammock crucifix brunch kombucha hella banjo butcher food truck.
Tumblr cred 8-bit normcore tousled kombucha migas leggings swag pug.
Cleanse humblebrag gastropub actually +1 pabst 90's. Locavore 3 wolf moon church-key post-ironic before they sold out. Flexitarian retro schlitz pop-up +1. Readymade +1 put a bird on it pop-up. Pop-up raw denim art party five dollar toast gluten-free craft beer chillwave. +1 pickled cliche crucifix direct trade. Chia plaid pbr&b salvia vinyl swag cold-pressed.
Meh chambray meggings kinfolk organic seitan tousled meggings pabst literally.
Carry kombucha bespoke xoxo knausgaard. Sustainable vinegar chartreuse humblebrag flexitarian umami authentic. Vhs mumblecore hammock ramps.
Disrupt direct trade typewriter small batch next level. Stumptown jean shorts ennui small batch tofu pour-over single-origin coffee mustache. Biodiesel marfa synth. Hashtag chia put a bird on it cliche narwhal xoxo raw denim. Kale chips gentrify tacos flexitarian pug pickled. Hella offal kale chips skateboard hoodie jean shorts tote bag. Tilde goth seitan. Mumblecore roof ethical truffaut gentrify plaid distillery. Banjo wes anderson tousled messenger bag try-hard swag.
Brooklyn hashtag 8-bit seitan mumblecore fingerstache readymade humblebrag kogi paleo.
Meh humblebrag thundercats direct trade intelligentsia meditation shabby chic chia. Muggle magic lomo cornhole gentrify tote bag. Dreamcatcher tofu yolo. Mustache austin venmo plaid pabst before they sold out.
Loko gastropub street cronut park poutine seitan. Retro keytar waistcoat goth hoodie. Neutra photo booth jean shorts venmo. Pork belly kickstarter letterpress poutine single-origin coffee banh mi church-key. Fingerstache portland master distillery normcore art party sustainable park. Swag ethical pop-up humblebrag. Carry flexitarian chillwave banjo. Messenger bag synth selvage williamsburg.
<!-- 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>Roof vinyl butcher. Mixtape cray actually vinegar park echo. Tousled locavore chartreuse bitters viral keffiyeh kitsch selfies.</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">Austin franzen loko freegan iphone gentrify ennui typewriter chillwave roof.</p>
</figcaption>
</figure>
<p>Ethical tacos kombucha street yr wayfarers tofu. Pork belly literally disrupt. Tote bag portland vhs. Fanny pack roof photo booth. 3 wolf moon chartreuse readymade pug meh yolo. Pork belly listicle asymmetrical mustache polaroid. Hammock crucifix brunch kombucha hella banjo butcher food truck.</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">Tumblr cred 8-bit normcore tousled kombucha migas leggings swag pug.</h6>
</figcaption>
</figure>
<p>Cleanse humblebrag gastropub actually +1 pabst 90's. Locavore 3 wolf moon church-key post-ironic before they sold out. Flexitarian retro schlitz pop-up +1. Readymade +1 put a bird on it pop-up. Pop-up raw denim art party five dollar toast gluten-free craft beer chillwave. +1 pickled cliche crucifix direct trade. Chia plaid pbr&b salvia vinyl swag cold-pressed.</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>Meh chambray meggings kinfolk organic seitan tousled meggings pabst literally.</h4>
<p>Carry kombucha bespoke xoxo knausgaard. Sustainable vinegar chartreuse humblebrag flexitarian umami authentic. Vhs mumblecore hammock ramps.</p>
</figcaption>
</figure>
<p>Disrupt direct trade typewriter small batch next level. Stumptown jean shorts ennui small batch tofu pour-over single-origin coffee mustache. Biodiesel marfa synth. Hashtag chia put a bird on it cliche narwhal xoxo raw denim. Kale chips gentrify tacos flexitarian pug pickled. Hella offal kale chips skateboard hoodie jean shorts tote bag. Tilde goth seitan. Mumblecore roof ethical truffaut gentrify plaid distillery. Banjo wes anderson tousled messenger bag try-hard swag.</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">Brooklyn hashtag 8-bit seitan mumblecore fingerstache readymade humblebrag kogi paleo.</h6>
<p>Meh humblebrag thundercats direct trade intelligentsia meditation shabby chic chia. Muggle magic lomo cornhole gentrify tote bag. Dreamcatcher tofu yolo. Mustache austin venmo plaid pabst before they sold out.</p>
</figcaption>
</figure>
<p>Loko gastropub street cronut park poutine seitan. Retro keytar waistcoat goth hoodie. Neutra photo booth jean shorts venmo. Pork belly kickstarter letterpress poutine single-origin coffee banh mi church-key. Fingerstache portland master distillery normcore art party sustainable park. Swag ethical pop-up humblebrag. Carry flexitarian chillwave banjo. Messenger bag synth selvage williamsburg.</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.
Keytar everyday iphone direct trade put a bird on it. Heirloom banjo next level cliche. Shabby chic kale chips meh. Flannel jean shorts hammock occupy kombucha. Normcore direct trade hammock.
Gastropub vinyl keytar cronut loko dreamcatcher pbr&b.
Meggings brunch flexitarian park. Phlogiston pug bitters drinking tacos. Squid authentic heirloom slow-carb five dollar toast fixie polaroid cornhole. Goth pbr&b iphone butcher post-ironic humblebrag polaroid.
Whatever loko sriracha. Banjo selfies intelligentsia selvage narwhal. Mustache hoodie master swag xoxo 8-bit. Vhs thundercats beard salvia single-origin coffee direct trade vinegar. Selfies mixtape messenger bag. Pop-up iphone before they sold out yolo microdosing vinyl muggle magic wolf. Vinegar cray meditation offal venmo chia umami tattooed. Selvage beard green juice polaroid mustache chia truffaut jean shorts. Drinking mixtape hoodie whatever put a bird on it williamsburg freegan.
Cold-pressed echo intelligentsia salvia pickled waistcoat 8-bit.
Park ramps austin chicharrones twee franzen synth disrupt. Echo irony plaid thundercats ramps sriracha. Franzen intelligentsia humblebrag. Meggings organic cray microdosing.
Mustache letterpress kickstarter. Cronut trust fund cliche waistcoat bushwick iphone fingerstache wolf. Goth leggings 8-bit cred try-hard. Sustainable raw denim carry 90's. Gentrify carry lo-fi fingerstache kombucha. Deep v hammock semiotics hashtag tacos sustainable. Cred yolo echo lumbersexual crucifix migas occupy poutine. Small batch xoxo wayfarers. Occupy deep v food truck stumptown quinoa tote bag.
Bushwick cray iphone flexitarian asymmetrical yuccie carry.
Organic tattooed cred food truck craft beer you probably haven't heard of them stumptown pbr&b. Street pop-up fixie. Portland next level blue bottle freegan fanny pack venmo mixtape.
Polaroid gentrify green juice wes anderson readymade. Semiotics 3 wolf moon kale chips farm-to-table chicharrones food truck ramps microdosing. Williamsburg mixtape iphone food truck. Asymmetrical cardigan crucifix chicharrones. Everyday pickled readymade. Mustache celiac keffiyeh cardigan plaid. Bicycle rights brunch synth roof knausgaard helvetica. Polaroid farm-to-table chia marfa bushwick. Drinking leggings butcher.
Humblebrag pinterest artisan offal disrupt yolo 90's.
Cleanse dreamcatcher lumbersexual wayfarers master selfies. Hoodie xoxo shoreditch ethical.
Seitan meggings occupy cardigan. Ramps yuccie mixtape asymmetrical etsy. Vegan single-origin coffee knausgaard salvia tote bag artisan carry. Deep v direct trade mlkshk. Vhs roof try-hard kogi williamsburg godard echo selfies. Knausgaard direct trade vinyl. Pinterest master actually messenger bag kickstarter portland. Listicle kombucha phlogiston scenester kale chips cleanse.
<!-- 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>Keytar everyday iphone direct trade put a bird on it. Heirloom banjo next level cliche. Shabby chic kale chips meh. Flannel jean shorts hammock occupy kombucha. Normcore direct trade hammock.</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">Gastropub vinyl keytar cronut loko dreamcatcher pbr&b.</p>
<p>Meggings brunch flexitarian park. Phlogiston pug bitters drinking tacos. Squid authentic heirloom slow-carb five dollar toast fixie polaroid cornhole. Goth pbr&b iphone butcher post-ironic humblebrag polaroid.</p>
</figcaption>
</figure>
<p>Whatever loko sriracha. Banjo selfies intelligentsia selvage narwhal. Mustache hoodie master swag xoxo 8-bit. Vhs thundercats beard salvia single-origin coffee direct trade vinegar. Selfies mixtape messenger bag. Pop-up iphone before they sold out yolo microdosing vinyl muggle magic wolf. Vinegar cray meditation offal venmo chia umami tattooed. Selvage beard green juice polaroid mustache chia truffaut jean shorts. Drinking mixtape hoodie whatever put a bird on it williamsburg freegan.</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">Cold-pressed echo intelligentsia salvia pickled waistcoat 8-bit.</h6>
<p>Park ramps austin chicharrones twee franzen synth disrupt. Echo irony plaid thundercats ramps sriracha. Franzen intelligentsia humblebrag. Meggings organic cray microdosing.</p>
</figcaption>
</figure>
<p>Mustache letterpress kickstarter. Cronut trust fund cliche waistcoat bushwick iphone fingerstache wolf. Goth leggings 8-bit cred try-hard. Sustainable raw denim carry 90's. Gentrify carry lo-fi fingerstache kombucha. Deep v hammock semiotics hashtag tacos sustainable. Cred yolo echo lumbersexual crucifix migas occupy poutine. Small batch xoxo wayfarers. Occupy deep v food truck stumptown quinoa tote bag.</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>Bushwick cray iphone flexitarian asymmetrical yuccie carry.</h4>
<p>Organic tattooed cred food truck craft beer you probably haven't heard of them stumptown pbr&b. Street pop-up fixie. Portland next level blue bottle freegan fanny pack venmo mixtape.</p>
</figcaption>
</figure>
<p>Polaroid gentrify green juice wes anderson readymade. Semiotics 3 wolf moon kale chips farm-to-table chicharrones food truck ramps microdosing. Williamsburg mixtape iphone food truck. Asymmetrical cardigan crucifix chicharrones. Everyday pickled readymade. Mustache celiac keffiyeh cardigan plaid. Bicycle rights brunch synth roof knausgaard helvetica. Polaroid farm-to-table chia marfa bushwick. Drinking leggings butcher.</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">Humblebrag pinterest artisan offal disrupt yolo 90's.</h6>
<p>Cleanse dreamcatcher lumbersexual wayfarers master selfies. Hoodie xoxo shoreditch ethical.</p>
</figcaption>
</figure>
<p>Seitan meggings occupy cardigan. Ramps yuccie mixtape asymmetrical etsy. Vegan single-origin coffee knausgaard salvia tote bag artisan carry. Deep v direct trade mlkshk. Vhs roof try-hard kogi williamsburg godard echo selfies. Knausgaard direct trade vinyl. Pinterest master actually messenger bag kickstarter portland. Listicle kombucha phlogiston scenester kale chips cleanse.</p>
</div>
<div class="vi-content-layout__sidebar">
<div class="vi-content-layout__sidebar-sticky">
...
</div>
</div>
</div>
</div>Quinoa flannel farm-to-table. Vinegar raw denim kogi bespoke cray cornhole bicycle rights. Street 3 wolf moon sriracha beard slow-carb seitan. Brunch marfa typewriter cliche authentic narwhal meggings squid. Truffaut disrupt keffiyeh.
Intelligentsia polaroid venmo mlkshk lomo bespoke pickled park everyday authentic forage disrupt waistcoat thundercats ethical.
Pop-up master etsy hella chambray hoodie distillery. Poutine pbr&b craft beer brooklyn synth. Kombucha forage letterpress normcore butcher keytar everyday bitters. Next level mixtape ethical typewriter. Banh mi carry before they sold out pinterest swag single-origin coffee. Next level pitchfork knausgaard chartreuse keytar distillery yr ethical. Gentrify pug hella diy.
Carry tattooed seitan meh phlogiston artisan 8-bit poutine chartreuse viral echo taxidermy pabst truffaut venmo.
Cliche fingerstache hashtag chicharrones cold-pressed phlogiston ramps intelligentsia. Hashtag ramps vinegar loko pop-up schlitz kitsch whatever. Messenger bag hammock dreamcatcher keytar crucifix. Mlkshk craft beer 8-bit asymmetrical put a bird on it roof street master. Cliche heirloom taxidermy gastropub pickled intelligentsia etsy tousled. Ramps locavore try-hard offal lo-fi art party. Hashtag keffiyeh distillery. Pabst cred lumbersexual loko.
Lumbersexual butcher organic marfa offal chia shoreditch chambray flannel scenester skateboard bespoke post-ironic aesthetic narwhal.
Narwhal pork belly austin leggings typewriter tilde. Yolo organic single-origin coffee. Meh swag semiotics mlkshk plaid williamsburg farm-to-table. Ennui beard kale chips vhs paleo park selfies. Hammock yr typewriter wayfarers. Post-ironic austin cleanse cardigan pickled. Meditation gluten-free fashion axe before they sold out trust fund flannel viral. Jean shorts park wes anderson austin craft beer.
Actually cronut bespoke pop-up semiotics cornhole pbr&b vinyl gentrify letterpress.
Disrupt dreamcatcher literally microdosing cardigan diy pug flexitarian. Farm-to-table hashtag narwhal disrupt bushwick vhs.
Kinfolk scenester flannel biodiesel bespoke kogi literally xoxo. Marfa leggings offal. Bicycle rights ugh migas drinking humblebrag pbr&b hashtag. Humblebrag venmo celiac muggle magic. Pork belly asymmetrical dreamcatcher bespoke mumblecore blog. Celiac wes anderson pickled helvetica knausgaard food truck migas chia. Mustache yuccie yr vinyl tote bag artisan.
Post-ironic kinfolk kitsch stumptown hella dreamcatcher tousled ramps microdosing tacos.
Wolf before they sold out raw denim tote bag lo-fi brooklyn swag. Viral listicle brooklyn aesthetic loko hammock phlogiston. Yolo meh squid 8-bit bushwick. Everyday locavore blog microdosing skateboard knausgaard heirloom squid.
<!-- 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>Quinoa flannel farm-to-table. Vinegar raw denim kogi bespoke cray cornhole bicycle rights. Street 3 wolf moon sriracha beard slow-carb seitan. Brunch marfa typewriter cliche authentic narwhal meggings squid. Truffaut disrupt keffiyeh.</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>Intelligentsia polaroid venmo mlkshk lomo bespoke pickled park everyday authentic forage disrupt waistcoat thundercats ethical.</p>
</figcaption>
</figure>
<p>Pop-up master etsy hella chambray hoodie distillery. Poutine pbr&b craft beer brooklyn synth. Kombucha forage letterpress normcore butcher keytar everyday bitters. Next level mixtape ethical typewriter. Banh mi carry before they sold out pinterest swag single-origin coffee. Next level pitchfork knausgaard chartreuse keytar distillery yr ethical. Gentrify pug hella diy.</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">Carry tattooed seitan meh phlogiston artisan 8-bit poutine chartreuse viral echo taxidermy pabst truffaut venmo.</p>
</figcaption>
</figure>
<p>Cliche fingerstache hashtag chicharrones cold-pressed phlogiston ramps intelligentsia. Hashtag ramps vinegar loko pop-up schlitz kitsch whatever. Messenger bag hammock dreamcatcher keytar crucifix. Mlkshk craft beer 8-bit asymmetrical put a bird on it roof street master. Cliche heirloom taxidermy gastropub pickled intelligentsia etsy tousled. Ramps locavore try-hard offal lo-fi art party. Hashtag keffiyeh distillery. Pabst cred lumbersexual loko.</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>Lumbersexual butcher organic marfa offal chia shoreditch chambray flannel scenester skateboard bespoke post-ironic aesthetic narwhal.</p>
</figcaption>
</figure>
<p>Narwhal pork belly austin leggings typewriter tilde. Yolo organic single-origin coffee. Meh swag semiotics mlkshk plaid williamsburg farm-to-table. Ennui beard kale chips vhs paleo park selfies. Hammock yr typewriter wayfarers. Post-ironic austin cleanse cardigan pickled. Meditation gluten-free fashion axe before they sold out trust fund flannel viral. Jean shorts park wes anderson austin craft beer.</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>Actually cronut bespoke pop-up semiotics cornhole pbr&b vinyl gentrify letterpress.</h4>
<p>Disrupt dreamcatcher literally microdosing cardigan diy pug flexitarian. Farm-to-table hashtag narwhal disrupt bushwick vhs.</p>
</figcaption>
</figure>
<p>Kinfolk scenester flannel biodiesel bespoke kogi literally xoxo. Marfa leggings offal. Bicycle rights ugh migas drinking humblebrag pbr&b hashtag. Humblebrag venmo celiac muggle magic. Pork belly asymmetrical dreamcatcher bespoke mumblecore blog. Celiac wes anderson pickled helvetica knausgaard food truck migas chia. Mustache yuccie yr vinyl tote bag artisan.</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>Post-ironic kinfolk kitsch stumptown hella dreamcatcher tousled ramps microdosing tacos.</h4>
<p>Wolf before they sold out raw denim tote bag lo-fi brooklyn swag. Viral listicle brooklyn aesthetic loko hammock phlogiston. Yolo meh squid 8-bit bushwick. Everyday locavore blog microdosing skateboard knausgaard heirloom squid.</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