Media

Aligns an image next to content.

<div class="o-media">
	<div class="o-media__image">
		<img src="https://placeholdit.com/64x64/1d4ed8/ffffff" alt="">
	</div>
	<div class="o-media__content">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	</div>
</div>

Modifiers

Responsive

Stacks the items on smaller screens.

<div class="o-media o-media--responsive">
	<div class="o-media__image">
		<img src="https://placeholdit.com/64x64/1d4ed8/ffffff" alt="">
	</div>
	<div class="o-media__content">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	</div>
</div>

Gap

Sets the gap between the image and content.

<div class="o-media o-media--gap-sm">
	<div class="o-media__image">
		<img src="https://placeholdit.com/64x64/1d4ed8/ffffff" alt="">
	</div>
	<div class="o-media__content">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	</div>
</div>

<div class="o-media o-media--gap-lg">
	<div class="o-media__image">
		<img src="https://placeholdit.com/64x64/1d4ed8/ffffff" alt="">
	</div>
	<div class="o-media__content">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	</div>
</div>

Align

Set the vertical alignment of the image and content.

<div class="o-media o-media--align-start">
	<div class="o-media__image">
		<img src="https://placeholdit.com/64x64/1d4ed8/ffffff" alt="">
	</div>
	<div class="o-media__content">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	</div>
</div>

<div class="o-media o-media--align-center">
	<div class="o-media__image">
		<img src="https://placeholdit.com/64x64/1d4ed8/ffffff" alt="">
	</div>
	<div class="o-media__content">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	</div>
</div>

<div class="o-media o-media--align-end">
	<div class="o-media__image">
		<img src="https://placeholdit.com/64x64/1d4ed8/ffffff" alt="">
	</div>
	<div class="o-media__content">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	</div>
</div>