<!--------------------------------
"RIBBON BOX [CONDENSED]" - F2U HTML by @StormyStarlight
VERSION - 6 Feb 2022
https://toyhou.se/13285135.-f2u-html-ribbon-box
• Do not remove or redirect the credit. You may change how the credit is displayed/move it elsewhere, but it may not be removed altogether. Do not claim you made this layout. If ribbons other than those made by @MisterMuse (aka @Slate) are added to the box, please be sure to modify the credit for the ribbons used appropriately!
• Feel free to modify/frankenstein this layout as much as you want as long as I am still credited, along with any other involved (consenting) creators.
• Keep Profile Text WYSIWYG disabled and Code Editor enabled when using this layout.
• Do not publicly redistribute this layout, or modified/copied/frankensteined versions of it, regardless of whether it is for free or paid use.
--------------------------------->
<div style="height:296px;overflow:auto;">
<div class="row no-gutters mb-3">
<div class="col-12 col-lg-6 row no-gutters">
<p class="my-auto col-2 text-center"><img src="IMAGELINK"></p>
<p class="my-auto col-10"><b>RIBBONNAME:</b> Description text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col-12 col-lg-6 row no-gutters mt-3 mt-lg-0">
<p class="my-auto col-2 text-center"><img src="IMAGELINK"></p>
<p class="my-auto col-10"><b>RIBBONNAME:</b> Longer descriptions work but will cause the height of each row to change if longer than 2 lines.</p>
</div>
</div>
<div class="row no-gutters mb-3">
<div class="col-12 col-lg-6 row no-gutters">
<p class="my-auto col-2 text-center"><img src="IMAGELINK"></p>
<p class="my-auto col-10"><b>RIBBONNAME:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium.</p>
</div>
<div class="col-12 col-lg-6 row no-gutters mt-3 mt-lg-0">
<p class="my-auto col-2 text-center"><img src="IMAGELINK"></p>
<p class="my-auto col-10"><b>RIBBONNAME:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="row no-gutters mb-3">
<div class="col-12 col-lg-6 row no-gutters">
<p class="my-auto col-2 text-center"><img src="IMAGELINK"></p>
<p class="my-auto col-10"><b>RIBBONNAME:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col-12 col-lg-6 row no-gutters mt-3 mt-lg-0">
<p class="my-auto col-2 text-center"><img src="IMAGELINK"></p>
<p class="my-auto col-10"><b>RIBBONNAME:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium.</p>
</div>
</div>
<div class="row no-gutters mb-3">
<div class="col-12 col-lg-6 row no-gutters">
<p class="my-auto col-2 text-center"><img src="IMAGELINK"></p>
<p class="my-auto col-10"><b>RIBBONNAME:</b> If you want more or less ribbons to show at once...</p>
</div>
<div class="col-12 col-lg-6 row no-gutters mt-3 mt-lg-0">
<p class="my-auto col-2 text-center"><img src="IMAGELINK"></p>
<p class="my-auto col-10"><b>RIBBONNAME:</b> ...add or subtract 78 pixels per row from the default 296 in the first line.</p>
</div>
</div>
<!-- ADD MORE ABOVE ^^ ------>
<div class="row no-gutters">
<div class="col-12 col-lg-6 row no-gutters">
<p class="my-auto col-2 text-center"><img src="IMAGELINK"></p>
<p class="my-auto col-10"><b>RIBBONNAME:</b> This last row's code MUST NOT INCLUDE "mb-3" as all the others do in order for it to fit the box properly. When adding more rows, copy and paste the code ABOVE this row.</p>
</div>
<div class="col-12 col-lg-6 row no-gutters mt-3 mt-lg-0">
<p class="my-auto col-2 text-center"><img src="IMAGELINK"></p>
<p class="my-auto col-10"><b>RIBBONNAME:</b> If you have an odd number of ribbons, the 4 lines that make up this last ribbon can be deleted.</p>
</div>
</div>
</div>
<!------ CREDIT - DON'T DELETE -->
<p class="text-muted"><small><a href="https://toyhou.se/13285135.-f2u-html-ribbon-box">F2U HTML</a> by @StormyStarlight • <a href="https://toyhou.se/4739396.-ribbons">Ribbons</a> by @MisterMuse</small></p>