menu

Card

THE BUTTER

  • .card
  • .valign-center
  • .valign-top
  • .overflow-hidden
  • .card-v
  • .tail
  • .corner
  • .corner-bottom
  • .tail-v

Card-ing is hard. In all my years of experience, I never reused a card. So this framework produces the simplest form of a card, which is enough to pick up prototyping. Extra fine-tuning will always be needed.

The card

Simple flexbox horizontal layout. (flow-direction: row)

<div class="card">
	<div class="rspace">
		<h4 class="f4">Title of card</h4>
		Simple horizontal flexbox
	</div>
	<div class="blue">
		another div
	</div>
	<div class="tail">With a .tail</div>
</div>

Title of card

Simple horizontal flexbox
another div
With a .tail
<div class="card h-3 box box-white">
	<div>
		content here
	</div>
	<div class="corner red">.corner</div>
	<div class="corner-bottom green">.corner-bottom</div>
</div>
content here
.corner
.corner-bottom

Align items

A card is a flexbox with horizontal layout.

.valign-center
align-items: center
.valign-top
align-items: flex-start
.overflow-hidden
overflow: hidden
<div class="card valign-center">
	<button class="btn-fake">one botton</button>
	<button class="btn-diff">another botton</button>
	<span class="hbreath">Just text</span>
	<div class="tail">tail</div>
</div>
Just text
tail

Vertical card

Align content vertically. (flow-direction: column)

<div class="card box-white-dark card-v doublespaced">
	<div class="box">
		First element
	</div>
	<div class="box">
		content vertically directed .card-v
	</div>
	<div class="hpad breath box-green">
		the bottom card
	</div>
	<div class="corner box-red">
		.corner
	</div>
	<div class="corner-bottom box-yellow">
		.corner-bottom
	</div>
</div>
First element
content vertically directed .card-v
the bottom card
.corner
.corner-bottom

.v-tail creats a tail with margin-top: auto. This becomes handy in a flex-box row of eleements. 

<div class="row">
	<div class="box c-4 card card-v">
		<div class="h-1 box box-grey-light">short content</div>
		<div class="tail-v box-yellow">.tail-v</div>
	</div>
	<div class="box c-4 card card-v">
		<div class="h-2 box box-grey-light">long content</div>
		<div class="tail-v box-yellow">.tail-v</div>
	</div>
</div>
short content
.tail-v
long content
.tail-v

Examples

Following is a popular example, which can be built with framework out of the box classes. Though the mantra of this framework is to prototype fast, then build specific style on top of the back bones, to increase site-wide control, and reduce maintenance.

<ul class="row-spaced ucol umd-6">
	<li class="box-shadow-normal spaced">
		<div class="card card-v border-bottom">
			<a class="dblock"><img class="h-1 hm-3 image-fill" src="/assets/images/upl1.png"></a>
			<div class="box">
				<h4 class="f6 weight-bold"><a href="">Lorem Ipsum</a></h4>
				<div class="small"><a class="cam weight-bold">Disposables</a> / <a class="cam">Ships</a>.
				</div>
			</div>
			<div class="corner">
				<div class="box">
					<button title="Link" class="btn"><i class="liga">link</i></button>
				</div>
			</div>
		</div>
		<div class="card box valign-center">
			<a class="dblock c-2 rspace"><img class="h-1 hm-1 image-fill" src="/assets/images/upl2.png"></a>
			<div>
				<h3 class="f6 text-nowrap weight-normal"><a>The Shaft Corp.</a></h3>
				<div class="small light"> India </div>
			</div>
		</div>
	</li>
	<li class="box-shadow-normal spaced">
		<div class="card card-v border-bottom">
			<a class="dblock"><img class="h-1 hm-3 image-fill" src="/assets/images/upl1.png"></a>
			<div class="box">
				<h4 class="f6 weight-bold"><a href="">Lorem Ipsum</a></h4>
				<div class="small"><a class="cam weight-bold">Disposables</a> / <a class="cam">Ships</a>.
				</div>
			</div>
			<div class="corner">
				<div class="box">
					<button title="Link" class="btn"><i class="liga">link</i></button>
				</div>
			</div>
		</div>
		<div class="card box valign-center">
			<a class="dblock c-2 rspace"><img class="h-1 hm-1 image-fill" src="/assets/images/upl2.png"></a>
			<div>
				<h3 class="f6 text-nowrap weight-normal"><a>The Shaft Corp.</a></h3>
				<div class="small light"> India </div>
			</div>
		</div>
	</li>
</ul>

Extra styles

.image-fill {
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
}
  
.border-bottom {
	border-bottom: 1px solid @grey;
}