Travel Time Markup

travel-time.html

<section class="tp-travel-time tp-block">
	<div class="tp-block__container--full">
		<h4 class="tp-travel-time__title">Travel Time to Next Destination</h4>
		<div class="tp-travel-time__meta">
			<span class="tp-travel-time__bike"><span class="tp-svg-icon"></span><span class="tp-travel-time__content">20 minutes by bike</span></span>
			<span class="tp-travel-time__transit"><span class="tp-svg-icon"></span><span class="tp-travel-time__content">14 mintues by <a href="#">transit</a></span></span>
		</div>
	</div>
</section>

If I have to put a wrapper around the labels, would something like this be okay:

<section class="tp-travel-time tp-block">
	<div class="tp-block__container--full">
		<h4 class="tp-travel-time__title">Travel Time to Next Destination</h4>
		<div class="tp-travel-time__meta">
			<span class="tp-travel-time__bike"><div class="tp-svg-icon"></div><span class="tp-travel-time__label">20 minutes by bike</span></span>
			<span class="tp-travel-time__transit"><div class="tp-svg-icon"></div><span class="tp-travel-time__label">14 mintues by <a href="#">transit</a></span></span>
		</div>
	</div>
</section>

The reason would be that the block attribute for the label I think needs a clear element to select for getting/setting the value. Using tp-travel-time__bike would not work because we have the svg icon div within it.

@jon that makes perfect sense. Yes!

Gist updated with wrapper around text span for icon instead of div.