🎀 Ribbons (Muse's Code Snippets)

Slate

Profile

Display Row
The way I've listed them here. WYSIWYG-friendly, you can just raw-dog insert more ribbons into the box with the insert image function and it'll work fine.
You can also add more boxes or take some away, they will scale.

Ribbon Name
Ribbon description.

<!------------------------------------->
<hr class="m-1" style="border-color:faded;">
<!------------------------------------->
<div class="container">
	<div class="row">
		<div class="col" style="padding:10px;">
			<div class="card-block rounded bg-faded text-left" style="white-space:normal;">

				<p align="center" style="text-align: center;"><a href="URL" id=""><strong><span style="font-size: 18px;">Header</span></strong></a></p>
			</div>
		</div>
	</div>
</div>
<!------------------------------------->
<hr class="m-1" style="border-color:faded;">
<!------------------------------------->
<div class="container">
	<div class="row">
		<!--------------- Column --------------->
		<div class="col" style="padding:10px;">
			<div class="card-block rounded bg-faded text-left" style="white-space:normal;">
				<div align="center">
					<div class="row"><img src="IMGURL" class="fr-fic fr-dib" width="43" height="62"></div>

					<p align="center" style="text-align: center;"><strong> Ribbon Name</strong>
						<br>Ribbon Description</p>
				</div>
			</div>
		</div>
		<!------------------------------------->
		<!--------------- Column --------------->
		<div class="col" style="padding:10px;">
			<div class="card-block rounded bg-faded text-left" style="white-space:normal;">
				<div align="center">
					<div class="row"><img src="IMGURL" class="fr-fic fr-dib" width="43" height="62"></div>

					<p align="center" style="text-align: center;"><strong> Ribbon Name</strong>
						<br>Ribbon Description</p>
				</div>
			</div>
		</div>
		<!------------------------------------->
		<!--------------- Column --------------->
		<div class="col" style="padding:10px;">
			<div class="card-block rounded bg-faded text-left" style="white-space:normal;">
				<div align="center">
					<div class="row"><img src="IMGURL" class="fr-fic fr-dib" width="43" height="62"></div>

					<p align="center" style="text-align: center;"><strong> Ribbon Name</strong>
						<br>Ribbon Description</p>
				</div>
			</div>
		</div>
		<!------------------------------------->
		<!--------------- Column --------------->
		<div class="col" style="padding:10px;">
			<div class="card-block rounded bg-faded text-left" style="white-space:normal;">
				<div align="center">
					<div class="row"><img src="IMGURL" class="fr-fic fr-dib" width="43" height="62"></div>

					<p align="center" style="text-align: center;"><strong> Ribbon Name</strong>
						<br>Ribbon Description</p>
				</div>
			</div>
		</div>
		<!------------------------------------->
	</div>
</div>
<!------------------------------------->
<hr class="m-1" style="border-color:faded;">
<!------------------------------------->

Display Carousel
My personal preferred way of displaying them on character pages.
You can hover over the ribbons for tooltips containing their descriptions.

With Autoscroll
Whenever the mouse is not on the carousel, the ribbons will automatically scroll.

<!---
=========================================
                  Ribbons
Make sure not to have more than one ribbon
       say "carousel-item active,"
           or else it'll break.
=========================================
--->
								<div class="carousel slide carousel-slide my-0" data-ride="carousel" id="ribbonimage" style="overflow:hidden;">
									<div class="carousel-inner">
										<!---=================== Ribbon 1 ================--->
										<div class="carousel-item active"><span data-toggle="tooltip" title="RIBBON DESCRIPTION"><img class="d-block mx-auto fr-fic fr-dib" style="max-width: 100%;" src="RIBBON-URL" height="61.9688" width="42.9844"></span></div>
										<!---=================== Ribbon 2 ================--->
										<div class="carousel-item"><span data-toggle="tooltip" title="RIBBON DESCRIPTION"><img class="d-block mx-auto fr-fic fr-dib" style="max-width: 100%;" src="RIBBON-URL" height="62" width="43"></span></div>
										<!---===== Add more ribbons above this line ======--->
									</div><a class="carousel-control-prev" data-slide="prev" href="#ribbonimage"><span class="fas fa-chevron-left fa-2x text-white"></span></a>
									<a class="carousel-control-next" data-slide="next" href="#ribbonimage"><span class="fas fa-chevron-right fa-2x text-white"></span></a></div>
<!---=========================================--->

Without Autoscroll
Ribbons will only scroll when the arrows are manually clicked.

<!---
=========================================
                  Ribbons
Make sure not to have more than one ribbon
       say "carousel-item active,"
           or else it'll break.
=========================================
--->
								<div class="carousel slide carousel-slide my-0" data-pause="true" data-ride="false" id="ribbonimage" style="overflow:hidden;">
									<div class="carousel-inner">
										<!---=================== Ribbon 1 ================--->
										<div class="carousel-item active"><span data-toggle="tooltip" title="RIBBON DESCRIPTION"><img class="d-block mx-auto fr-fic fr-dib" style="max-width: 100%;" src="RIBBON-URL" height="61.9688" width="42.9844"></span></div>
										<!---=================== Ribbon 2 ================--->
										<div class="carousel-item"><span data-toggle="tooltip" title="RIBBON DESCRIPTION"><img class="d-block mx-auto fr-fic fr-dib" style="max-width: 100%;" src="RIBBON-URL" height="62" width="43"></span></div>
										<!---===== Add more ribbons above this line ======--->
									</div><a class="carousel-control-prev" data-slide="prev" href="#ribbonimage"><span class="fas fa-chevron-left fa-2x text-white"></span></a>
									<a class="carousel-control-next" data-slide="next" href="#ribbonimage"><span class="fas fa-chevron-right fa-2x text-white"></span></a></div>
<!---=========================================--->

🎀 Ribbons (Muse's Code Snippets)

Slate

Profile

Images