Odyssey styleguide

Ratio

Toggle example guides Toggle HTML markup

Used to indicate ratio of things

<insert-markup>components.ratio-</insert-markup>

Ratio information

Markup 
<div class="odyssey-ratio">
	<div class="odyssey-tooltip odyssey-tooltip--top-left">
		<p>Ratio information</p>
	</div>
	<div class="odyssey-ratio__bars">
		<div class="odyssey-ratio__bar odyssey-ratio__bar--warn" style="width: 18%"></div>
		<div class="odyssey-ratio__bar odyssey-ratio__bar--error" style="width: 18%"></div>
		<div class="odyssey-ratio__bar odyssey-ratio__bar--success" style="width: 18%"></div>
		<div class="odyssey-ratio__bar odyssey-ratio__bar--info" style="width: 18%"></div>
		<div class="odyssey-ratio__bar odyssey-ratio__bar--attention" style="width: 18%"></div>
	</div>
</div>
Source: src/components/ratio.less, line 1