# 🏠 Properties

# 🎰 Slots

            
Show  Code
            
<script src="/components/shared/component-base.js"></script>
<script src="/components/carbon-offset-offer/main.js"></script>
<link rel="stylesheet" href="/components/shared/component-base.css" />
<div id="carbon-offset-offer-container">
  <carbon-offset-offer
    arrivalAirport="SEA" 
    departureAirport="SFO" 
    roundtrip=true 
    totalCo2="500" 
    selectedPercentage="20"
      
    quote1Id="quote-1" 
    quote1Percentage="5" 
    quote1Price="5.50" 
    quote1Co2="25"

    quote2Id="quote-2" 
    quote2Percentage="10"
    quote2Price="15.50" 
    quote2Co2="50"
    
    quote3Id="quote-3" 
    quote3Percentage="20" 
    quote3Price="25.432" 
    quote3Co2="75"
  >
  </carbon-offset-offer>
</div>

<br />

<div id="carbon-offset-offer-container-alt">
  <carbon-offset-offer
    arrivalAirport="SEA" 
    departureAirport="SFO" 
    totalCo2="500" 
    selectedPercentage="20"
      
    quote1Id="quote-1" 
    quote1Percentage="5" 
    quote1Price="5.50" 
    quote1Co2="25"

    quote2Id="quote-2" 
    quote2Percentage="10"
    quote2Price="15.50" 
    quote2Co2="50"
    
    quote3Id="quote-3" 
    quote3Percentage="20" 
    quote3Price="25.432" 
    quote3Co2="75"
    alternate
  >
  </carbon-offset-offer>
</div>

<script>
  const container = document.getElementById("carbon-offset-offer-container");
  const altContainer = document.getElementById("carbon-offset-offer-container-alt");

  container.addEventListener('carbonOffsetOfferClicked', (event) => console.log(event.detail));
  altContainer.addEventListener('carbonOffsetOfferClicked', (event) => console.log(event.detail));
 </script>