Cat
$1,000
If it fits, i sits burrow under covers. Destroy couch leave hair everywhere, and touch water with paw then recoil in horror.
If it fits, i sits burrow under covers. Destroy couch leave hair everywhere, and touch water with paw then recoil in horror.
<article class="br2 ba dark-gray b--black-10 mv4 w-100 w-50-m w-25-l mw5 center">
<img src="http://placekitten.com/g/600/300" class="db w-100 br2 br--top" alt="kitty">
<div class="pa2 ph3-ns pb3-ns">
<div class="dt w-100 mt1">
<div class="dtc">
<h1 class="f5 f4-ns mv0">Cat</h1>
</div>
<div class="dtc tr">
<h2 class="f5 mv0">$1,000</h2>
</div>
</div>
<p class="f6 lh-copy measure mt2 mid-gray">
If it fits, i sits burrow under covers. Destroy couch leave hair everywhere,
and touch water with paw then recoil in horror.
</p>
</div>
</article>
.ba {
border-style: solid;
border-width: 1px;
}
.b--black-10 {
border-color: rgba(0, 0, 0, .1);
}
.br2 {
border-radius: .25rem;
}
.br--top {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.db {
display: block;
}
.dt {
display: table;
}
.dtc {
display: table-cell;
}
.lh-copy {
line-height: 1.5;
}
.mw5 {
max-width: 16rem;
}
.w-100 {
width: 100%;
}
.dark-gray {
color: #333;
}
.mid-gray {
color: #555;
}
.pa2 {
padding: .5rem;
}
.mt1 {
margin-top: .25rem;
}
.mt2 {
margin-top: .5rem;
}
.mv0 {
margin-top: 0;
margin-bottom: 0;
}
.mv4 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.tr {
text-align: right;
}
.f5 {
font-size: 1rem;
}
.f6 {
font-size: .875rem;
}
.measure {
max-width: 30em;
}
.center {
margin-right: auto;
margin-left: auto;
}
@media screen and (min-width: 30em) {
.pb3-ns {
padding-bottom: 1rem;
}
.ph3-ns {
padding-left: 1rem;
padding-right: 1rem;
}
.f4-ns {
font-size: 1.25rem;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.w-50-m {
width: 50%;
}
}
@media screen and (min-width: 60em) {
.w-25-l {
width: 25%;
}
}
npm i --save tachyons-borders tachyons-border-colors tachyons-border-radius tachyons-display tachyons-line-height tachyons-max-widths tachyons-widths tachyons-skins tachyons-spacing tachyons-text-align tachyons-type-scale tachyons-typography tachyons-utilities