Card

card.html

<a href="#card" class="uim-card">
    <div class="uim-card-heading">
        uim-card-heading
    </div>

    <div class="uim-card-body">
        uim-card-body
    </div>

    <div class="uim-card-footer">
        uim-card-footer
    </div>
</a>

card.less

.uim-card {
	background-color: #fff;
	border-radius: 3px;
	box-shadow: 0 2px 1px 2px rgba(0, 0, 0, 0.06);
	color: #555;
	display: block;
	margin-bottom: 20px;
	overflow: hidden;
	position: relative;
	-webkit-transition: all .2s ease-in-out;
	   -moz-transition: all .2s ease-in-out;
	    -ms-transition: all .2s ease-in-out;
  		transition: all .2s ease-in-out;

	&:before, &:after {
		display:table;
		content:" ";
		clear: both;
	}
	img {max-width: 100%;}

	.uim-card-heading {
	padding: 5px 10px 5px;
	font-size: 24px;
	font-weight: 200;
	background-color: rgba(0,0,0,.045);

	&:before, &:after {
		display:table;
		content:" ";
		clear: both;
	}
	}
	.uim-card-body {
	padding: 10px;

		&:before, &:after {
			display:table;
			content:" ";
			clear: both;
		}
	}
	.uim-card-footer {
		padding: 10px;
		background: rgba(0, 0, 0, 0.02);
		border-bottom: 1px solid #E9E9E9;
		box-shadow: inset 0 3px rgba(0, 0, 0, 0.04);

		&:before, &:after {
			display:table;
			content:" ";
			clear: both;
		}

	}

}

a.uim-card:hover, a.uim-card:active, a.uim-card:focus {
	box-shadow: 0 2px 8px 8px rgba(0, 0, 0, 0.04), 0 2px 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 2px rgba(0, 136, 204, 0.49);
	color: #555;
	text-decoration: none;
	-webkit-transform: translateY(-4px);
	   -moz-transform: translateY(-4px);
	    -ms-transform: translateY(-4px);
	        transform: translateY(-4px);
}

// Static Variation
&.uim-card-static {
	background-color: #FBFCFC;
	box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.5), inset 0 1px 0 0 #ffffff, inset 0 -1px 0 0 rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.08), 0 3px 0 0 rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.1);
}