Odyssey styleguide

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

Overspend




Markup
<div class="odyssey-collaps-card">
	<div class="odyssey-collaps-card-header">
		<h3 class="odyssey-collaps-card-header__title">Overspend</h3>
		<img class="odyssey-collaps-card-header__icon" src="https://app.odysseyattribution.co/Orders.de7230ce7aba38c344b1.svg"></img>
		<img class="odyssey-collaps-card-header__icon" src="https://app.odysseyattribution.co/Trending.cbac863d97c42df9eceb.svg"></img>
	</div>
	<div class="odyssey-collaps-card-body">
		<input id="collapsible" class="odyssey-toggle"type="checkbox">
		<label for="collapsible" class="odyssey-lbl-toggle">
			<span class="odyssey-collaps-card__text odyssey-lbl-toggle--close">Close Details</span>
			<span class="odyssey-collaps-card__text odyssey-lbl-toggle--open">Show Details</span>
			<i></i>
		</label>
		<div class="odyssey-collaps-card-item">
			<div class="odyssey-collaps-card-item-collaps">
				<label class="odyssey-collaps-card-item__lbl">
					<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--left">custom1==*&+brand==abc</span>
					<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--red">-$ 2.129</span>
				</label>
				<label class="odyssey-collaps-card-item__lbl">
					<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--left">custom1==*&+brand==def</span>
					<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--green">+$ 2.128</span>
				</label>
				<label class="odyssey-collaps-card-item__lbl">
					<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--left">custom1==*&+brand==ghi</span>
					<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--green">+$ 1.204</span>
				</label>
				<label class="odyssey-collaps-card-item__lbl">
					<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--left">other 81</span>
					<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--green">+$ 10.427</span>
				</label>
				<hr class="odyssey-collaps-card__line"></hr>
			</div>
			<label class="odyssey-collaps-card-item__lbl">
				<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--left odyssey-collaps-card-item__lbl--text-big">Overspend in smart Shopping - all brands</span>
				<span class="odyssey-collaps-card-item__lbl--text-big odyssey-collaps-card-item__lbl--red">+$ 15.888</span>
			</label>
		</div>
		<div class="odyssey-collaps-card-item">
			<div class="odyssey-collaps-card-item-collaps">
				<label class="odyssey-collaps-card-item__lbl">
					<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--left">abc - traffic - Something else</span>
					<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--green">+$ 2.129</span>
				</label>
				<label class="odyssey-collaps-card-item__lbl">
					<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--left">abc - fgh -  sales - Something</span>
					<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--red">+$ 1.478</span>
				</label>
				<label class="odyssey-collaps-card-item__lbl">
					<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--left">abc - traffic - Some markt</span>
					<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--green">+$ 1.054</span>
				</label>
				<hr class="odyssey-collaps-card__line"></hr>
			</div>
			<label class="odyssey-collaps-card-item__lbl">
				<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--left odyssey-collaps-card-item__lbl--text-big">Overspend in Facebook</span>
				<span class="odyssey-collaps-card-item__lbl--text-big odyssey-collaps-card-item__lbl--red">+$ 4.661</span>
			</label>
		</div>
		<div class="odyssey-collaps-card-item odyssey-collaps-card-item--no-margin">
			<label class="odyssey-collaps-card-item__lbl">
				<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--left odyssey-collaps-card-item__lbl--bold">And 31 others</span>
				<span class="odyssey-collaps-card-item__lbl--text-big odyssey-collaps-card-item__lbl--red">+$ 26.198</span>
			</label>
		</div>
		<hr class="odyssey-collaps-card__line"></hr>
		<div class="odyssey-collaps-card-item odyssey-collaps-card-item--no-margin">
			<label class="odyssey-collaps-card-item__lbl">
				<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--left odyssey-collaps-card-item__lbl--bold odyssey-collaps-card-item__lbl--text-big">Total Overspend</span>
				<span class="odyssey-collaps-card-item__lbl--text-big odyssey-collaps-card-item__lbl--red odyssey-collaps-card-item__lbl--bold">+$ 26.198</span>
			</label>
		</div>
	</div>
</div>
Source: src/components/card.less, line 258