Link copied!

Separator Examples

<e-separator>Label</e-separator>
<div class="e-legend">
  <div class="e-legend__title">Label Goes Here</div>
  <div class="e-legend__value text-color-chart-01">14.72%</div>
</div>

<div class="e-padding-l">
  <e-separator vertical>VS</e-separator>
</div>

<div class="e-legend">
  <div class="e-legend__title">Label Goes Here</div>
  <div class="e-legend__value text-color-chart-02">14.72%</div>
</div>
<div class="e-grid">
  <div class="e-cell">
    <div class="e-legend">
      <div class="e-legend__title">Label Goes Here</div>
      <div class="e-legend__value text-color-chart-01">14.72%</div>
    </div>
    <div class="e-legend">
      <div class="e-legend__title">Label Goes Here</div>
      <div class="e-legend__value text-color-chart-01-700">14.72%</div>
    </div>
  </div>
  <div class="e-cell e-padding-horizontal-l">
    <e-separator vertical fullheight>VS</e-separator>
  </div>
  <div class="e-cell">
    <div class="e-legend">
      <div class="e-legend__title">Label Goes Here</div>
      <div class="e-legend__value text-color-chart-02">14.72%</div>
    </div>
    <div class="e-legend">
      <div class="e-legend__title">Label Goes Here</div>
      <div class="e-legend__value text-color-chart-02-700">14.72%</div>
    </div>
  </div>
</div>
<hr class="e-separator">