Odyssey styleguide

Small Card with header bold & icon

Toggle example guides Toggle HTML markup

<insert-markup>components.card.icons-</insert-markup>
Card header

Total

123.456

Growth

456.789

.odyssey-card__icon--red
Red Icon
<insert-markup>components.card.icons-0</insert-markup>
Card header

Total

123.456

Growth

456.789

.odyssey-card__icon--orange
Orange Icon
<insert-markup>components.card.icons-1</insert-markup>
Card header

Total

123.456

Growth

456.789

.odyssey-card__icon--green
Green Icon
<insert-markup>components.card.icons-2</insert-markup>
Card header

Total

123.456

Growth

456.789

.odyssey-card__icon--yellow
Yellow Icon
<insert-markup>components.card.icons-3</insert-markup>
Card header

Total

123.456

Growth

456.789

Markup 
<div class="odyssey-card odyssey-card--small">
	<h5 class="odyssey-card__header">Card header</h5>
	<span class="odyssey-card__icon [modifier class]">
		<i class="odyssey-card__example-icon"></i>
	</span>
	<div class="odyssey-card__metric">
		<p class="odyssey-card__metric-title">Total</p>
		<p class="odyssey-card__metric-number">123.456</p>
	</div>
	<div class="odyssey-card__metric">
		<p class="odyssey-card__metric-title">Growth</p>
		<p class="odyssey-card__metric-number">456.789</p>
	</div>
</div>
Source: src/components/card.less, line 93