Card

Cards are a convenient way of displaying content composed of different types of objects. You can make a card using any or all of the following elements:

  • card-header
  • card-image
  • card-body
  • card-footer
    • card-footer-item

Basic Card

Card Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis neque nisl, et pretium turpis vulputate at. Duis tristique est laoreet arcu posuere.

Card Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis neque nisl, et pretium turpis vulputate at. Duis tristique est laoreet arcu posuere.

Card Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis neque nisl, et pretium turpis vulputate at. Duis tristique est laoreet arcu posuere.

<div class="card has-border">
	<h6 class="card-header">Card Header</h6>
	<div class="card-body">
		<div class="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis neque nisl, et pretium turpis vulputate at. Duis tristique est laoreet arcu posuere.</p>
		</div>
	</div>
	<div class="card-footer">
		<div class="card-footer-item">
			<a href="" rel="tag">#tag</a>, <a href="" rel="tag">#tag</a>, <a href="" rel="tag">#tag</a>
		</div>
	</div>
</div>

Image Card

<article class="card has-border has-shadow is-rounded">
	<figure class="image is-4by3">
		<a href=""><img src="https://unsplash.it/640/480" alt=""></a>
	</figure>
	<div class="card-body">
		<h3 class="title is-4"><a href="">Exciting Headline Right Here</a></h3>
	</div>
	<footer class="card-footer">
		<div class="card-footer-item">2 days ago</div>
		<div class="card-footer-item">

			<div class="card-footer-icons">
    			<a href="">
	    			<span class="icon is-16">
		    			<svg version="1.1" viewBox="0 0 16 16" role="img"><title>Comment icon</title><g transform="translate(0, 0)"><path fill="#cccccc" d="M1,0h14c0.552,0,1,0.448,1,1v10c0,0.552-0.448,1-1,1h-5l-6,4v-4H1c-0.552,0-1-0.448-1-1V1 C0,0.448,0.448,0,1,0z"></path></g></svg>
		    		</span>
		    	</a>
    			<a href="">
		    		<span class="icon is-16">
		    			<svg version="1.1" viewBox="0 0 16 16" role="img"><title>Favourite icon</title><g transform="translate(0, 0)"><path fill="#cccccc" d="M14.682,2.318c-1.757-1.757-4.607-1.757-6.364,0C8.197,2.439,8.104,2.577,8,2.707 C7.896,2.577,7.803,2.439,7.682,2.318c-1.757-1.757-4.607-1.757-6.364,0c-1.757,1.757-1.757,4.607,0,6.364L8,15l6.682-6.318 C16.439,6.925,16.439,4.075,14.682,2.318z"></path></g></svg>
		    		</span>
		    	</a>
		    </div>

		</div>

	</footer>
</article>