Menu

Component: Card

Basic card

<a href="#" class="box-1">
	<div class="box-1-visual">
		<img src="images/visual-buddy.jpg" alt="" />
	</div>
	<div class="box-1-content">
		<h5>Example of card</h5>
		<p>Lorem ipsum dolor sit amet,
		consectetur adipisicing elit,
		sed do eiusmod tempor incididunt
		ut labore et dolore magna aliqua.</p>
		<span class="link-follow">Read more</span>
	</div>
</a>

Card with hover effect on image

<a href="#" class="box-1">
	<div class="box-1-visual">
		<img src="images/visual-buddy.jpg" alt="" />
		<div class="hover">
			<i class="fas fa-plus">	</i>
		</div>
	</div>
	<div class="box-1-content">
		<h5>Example of card</h5>
		<p>Lorem ipsum dolor sit amet,
		consectetur adipisicing elit,
		sed do eiusmod tempor incididunt
		ut labore et dolore magna aliqua.</p>
		<span class="link-follow">Read more</span>
	</div>
</a>

Card with infos

You can put the .infos before <h5>, after <h5> or before <span class="link-follow">Read more</span>

<a href="#" class="box-1">
	<div class="box-1-visual">
		<img src="images/visual-buddy.jpg" alt="" />
	</div>
	<div class="box-1-content">
		<div class="infos">
			<span><i class="far fa-calendar"></i> 04/08/2018</span>
			<span><i class="far fa-user"></i> Sciampagna Loïc</span>
		</div>
		<h5>Example of card</h5>
		<p>Lorem ipsum dolor sit amet,
		consectetur adipisicing elit,
		sed do eiusmod tempor incididunt
		ut labore et dolore magna aliqua.</p>
		<span class="link-follow">Read more</span>
	</div>
</a>

Card with no image

<a href="#" class="box-1">
	<div class="box-1-content">
		<div class="infos">
			<span><i class="far fa-calendar"></i> 04/08/2018</span>
			<span><i class="far fa-user"></i> Sciampagna Loïc</span>
		</div>
		<h5>Example of card</h5>
		<p>Lorem ipsum dolor sit amet,
		consectetur adipisicing elit,
		sed do eiusmod tempor incididunt
		ut labore et dolore magna aliqua.</p>
		<span class="link-follow">Read more</span>
	</div>
</a>

Horizontal card

<a href="#" class="box-1 horizontal">
	<div class="box-1-visual" style="background-image: url('images/visual-buddy.jpg');">
		<div class="hover">
			<i class="fas fa-plus"></i>
		</div>
	</div>
	<div class="box-1-content">
		<h5>Example of card</h5>
		<p>Lorem ipsum dolor sit amet,
		consectetur adipisicing elit,
		sed do eiusmod tempor incididunt
		ut labore et dolore magna aliqua.</p>
		<span class="link-follow">Read more</span>
	</div>
</a>

Custom width on horizontal card

Add .w-XX where XX is a number between 1 and 100. It will adjust the width of visual (left column).

<a href="#" class="box-1 horizontal w-15">
	<div class="box-1-visual" style="background-image: url('images/visual-buddy.jpg');">
		<div class="hover">
			<i class="fas fa-plus"></i>
		</div>
	</div>
	<div class="box-1-content">
		<h5>Example of card</h5>
		<p>Lorem ipsum dolor sit amet,
		consectetur adipisicing elit,
		sed do eiusmod tempor incididunt
		ut labore et dolore magna aliqua.</p>
		<span class="link-follow">Read more</span>
	</div>
</a>

Horizontal card with no image

<a href="#" class="box-1 horizontal">
	<div class="box-1-content">
		<div class="infos">
			<span><i class="far fa-calendar"></i> 04/08/2018</span>
			<span><i class="far fa-user"></i> Sciampagna Loïc</span>
		</div>
		<h5>Example of card</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		<span class="link-follow">Read more</span>
	</div>
</a>