Embed Codes in RichText

HR Line

If you wanted a simple line to seperate content, just use <hr/>

Appearance

Some Random Text

The Code

<p>Some Random Text</p>
<hr />
<p>Some Random Text</p>

Waiver Button

This is just a reference for Waiver Button for adding it in the RichText.
Copy & Paste this Code Embed wherever you need to add this Waiver button in the RichText.
*It will only open the Waiver when there is a header, so it will not open the modal in this page

Waivers

<a 
  role="button"
  fs-modal-element="open-9999"
  fs-scrolldisable-element="disable"
  href="#" 
  class="links-regular"
>
  Waivers
</a>

Image Gallery

Appearance

1 hex — VB-V0

2 hex — V0-V2

3 hex — V2-V4

4 hex — V4-V6

5 hex — V6-V8

6 hex — V8-V10

7 hex — V10+

The Code

<style>
.richtext-image-gallery {
	display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 16px;
  overflow: hidden;
}
.richtext-image-gallery img {
	height: 104px;
	width: 98px;
}

.card {
  display: flex;
  flex-direction: column;
	height: 216px;
}
.text-bar {
  text-align: center;
  background: rgba(250, 249, 249, 1);
	padding-top: 12px;
	padding-bottom: 12px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .richtext-image-gallery {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
  }
}

@media screen and (max-width: 767px) {
  .richtext-image-gallery {
    grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
  }
}

.img-wrapper {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(229, 227, 225, 1);
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

</style>

<div class="richtext-image-gallery">
  <div class="card">
		<div class="img-wrapper">
    	<img src="https://cdn.prod.website-files.com/65d785b21c0a370a82cee359/682658211ed3008c4362d2e0_1-hex.svg" />
    </div>
		<div class="text-bar">
    	<h5>1 hex — VB-V0</h5>
    </div>
  </div>

  <div class="card">
		<div class="img-wrapper">
    	<img src="https://cdn.prod.website-files.com/65d785b21c0a370a82cee359/682658210c6bdd7d5d9c1b1e_2-hex.svg" />
    </div>
		<div class="text-bar">
    	<h5>2 hex — V0-V2</h5>
    </div>
  </div>

  <div class="card">
		<div class="img-wrapper">
    	<img src="https://cdn.prod.website-files.com/65d785b21c0a370a82cee359/682658219836694a9351a600_3-hex.svg" />
    </div>
		<div class="text-bar">
    	<h5>3 hex — V2-V4</h5>
    </div>
  </div>

  <div class="card">
		<div class="img-wrapper">
		    <img src="https://cdn.prod.website-files.com/65d785b21c0a370a82cee359/682658210a8ac1167a7701c5_4-hex.svg" />
		</div>
    <div class="text-bar">
    	<h5>4 hex — V4-V6</h5>
    </div>
  </div>

  <div class="card">
		<div class="img-wrapper">
    	<img src="https://cdn.prod.website-files.com/65d785b21c0a370a82cee359/6826582184035364914bd556_5-hex.svg" />
    </div>
		<div class="text-bar">
    	<h5>5 hex — V6-V8</h5>
    </div>
  </div>

  <div class="card">
		<div class="img-wrapper">
    	<img src="https://cdn.prod.website-files.com/65d785b21c0a370a82cee359/68265822afb555b06aeda87d_6-hex.svg" />
    </div>
		<div class="text-bar">
    	<h5>6 hex — V8-V10</h5>
    </div>
  </div>

  <div class="card">
		<div class="img-wrapper">
    	<img src="https://cdn.prod.website-files.com/65d785b21c0a370a82cee359/6826582791e45ba798d16775_7-hex.svg" />
    </div>
		<div class="text-bar">
    	<h5>7 hex — V10+</h5>
    </div>
  </div>
</div>