How To Add Image into a Code Block?

Site URL: https://www.aghlaw.com.au/document-packs

Hi,

I'm looking to find if it is possible to add images or icons inside code blocks? My client wants to add company logos inside of each of the boxes on their services page (see screenshot). 

Each box is an individual service package that requires a different logo in each box. 

Any help would be appreciated!

Thanks,

Jordan

Hi Jordon,

I'd probably go with pseudo elements.  The below example assumes the same logo/icon for each block, but you could swap out the block id's for the class used below (custom-pricing-table) in the actual pseudo element. ie: create a ::before element for every different logo/table

In the below example the outline is for reference only, so you can easy identify where the element is.  Play around with the sizing/padding to match your icons/logos.
 

.custom-pricing-table{
  position:relative;
  padding-top:100px;
}

.custom-pricing-table::before{
  content:"";
  position:absolute;
  width:20%;
  min-width:80px;
  aspect-ratio:1 / 1;
  top:0;
  left:0;
  background-image:url("https://upload.wikimedia.org/wikipedia/commons/c/c5/Squarespace_Logo.png");
  outline:red 2px solid;
  background-size:cover;
  
}
  
}

** the above also assumes there is a reason you cannot just code a normal HTML element in to these cards/pricing tables for the images.

in Code Block 1 ($1500 popular), edit your code

<div class="custom-pricing-table">
  <span class="tag">Popular</span>
  <span class="price"><strong>$1,500</strong> incl. GST</span>
  <h4>Set Up Pack</h4>
  <hr>
  <p>
   Everything you need to get started on your business. 
  </p>
  <a href="/set-up-bundle" class="sqs-block-button-element--large sqs-block-button-element" data-initialized="true">What’s included?</a>
</div>

to this

<div class="custom-pricing-table">
  <img src="https://cdn.pixabay.com/photo/2021/12/23/13/25/flower-6889331__480.jpg" width="100px">
  <span class="tag">Popular</span>
  <span class="price"><strong>$1,500</strong> incl. GST</span>
  <h4>Set Up Pack</h4>
  <hr>
  <p>
   Everything you need to get started on your business. 
  </p>
  <a href="/set-up-bundle" class="sqs-block-button-element--large sqs-block-button-element" data-initialized="true">What’s included?</a>
</div>

Do similar for other Code Blocks