kitty

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.

Product Card

HTML

<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>

css

.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%;
    }
}

Install via npm Only installs the needed tachyons-modules for this component

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

Other Components

articles

Full Bleed Background Large Title Text Left Title Top Border Left Title Title Text Image Title Text

cards

Album Centered Album Left

collections

News Card Product Card Profile Card Title Subtitle Profile Card Text Card

footers

Simple Large Type Small Print Social Circles Social Text Social

headers

Circle Avatar Title Subtitle Fixed Semi Transparent Rounded Avatar Title Subtitle

layout

Centered Container Flag Object Collapse Flag Object Four Column Collapse Two Four Column Two Column Collapse One Two Column

lists

Border Spaced Border Tight Large Links Inline Links Inline Links With Borders Inline Slab Stat Large Slab Stat Small Slab Stat Title Text

nav

Large Title Link List List Overflow Logo Links Inline Collapse Logo Links Inline Title Link List