Link copied!

Compare Examples

<div class="e-compare">
  <div class="e-compare__line"></div>
  <div class="e-compare__label e-compare__label-left">
    Worst Openers
  </div>
  <div class="e-compare__label e-compare__label-right">
    Best Openers
  </div>
</div>
<div class="e-compare">
  <div class="e-compare__line background-color-primary"></div>
  <div class="e-compare__label e-compare__label-left">
    Worst Openers
  </div>
  <div class="e-compare__label e-compare__label-right">
    Best Openers
  </div>
</div>
<div class="e-compare" id="boundary">
  <div class="e-compare__line background-color-primary">
    <e-bubble percent="30" label="Label" type="base" boundary="#boundary"></e-bubble>
    <e-bubble color="primary" percent="90" label="Johannes" boundary="#boundary"></e-bubble>
  </div>
  <div class="e-compare__label e-compare__label-left">
    Worst Openers
  </div>
  <div class="e-compare__label e-compare__label-right">
    Best Openers
  </div>
</div>
<div class="e-compare e-compare-bottom" id="boundary2">
  <div class="e-compare__line background-color-primary">
    <e-bubble percent="30" label="Label" type="base" boundary="#boundary2" distance="small"></e-bubble>
    <e-bubble percent="60" label="Bottom Label" type="base" boundary="#boundary2" placement="bottom"></e-bubble>
    <e-bubble percent="100" label="Target Label" type="base" boundary="#boundary2" placement="bottom" distance="small"></e-bubble>
    <e-bubble color="primary" percent="90" label="Johannes" boundary="#boundary2"></e-bubble>
  </div>
</div>
<div class="e-compare e-compare-bottom" id="boundary3">
  <div class="e-compare__line">
    <e-bubble percent="30" label="Label" type="base" boundary="#boundary3" distance="small"></e-bubble>
    <e-bubble percent="60" label="Bottom Label" type="base" boundary="#boundary3" placement="bottom"></e-bubble>
    <e-bubble percent="100" label="Target Label" type="base" boundary="#boundary3" placement="bottom" distance="small"></e-bubble>
    <e-bubble color="primary" percent="50" label="Johannes" boundary="#boundary3"></e-bubble>
  </div>
  <div class="e-compare__line e-compare__line-progress background-color-primary" style="width: 50%;"></div></div>