Daily News Co.

Cat yawning

News Card

HTML

<article class="bg-white center mw5 ba b--black-10 mv4">
  <div class="pv2 ph3">
     <h1 class="f6 ttu tracked">Daily News Co.</h1>
  </div>
  <img src="/img/cat-720.jpg" class="w-100 db" alt="Cat yawning">
  <div class="pa3">
    <a href="#" class="link dim lh-title">15 things every cat owner should know</a>
    <small class="gray db pv2">AMP - <time>6 hours ago</time></small>
  </div>
</article>

css

.ba {
    border-style: solid;
    border-width: 1px;
}

.b--black-10 {
    border-color: rgba(0, 0, 0, .1);
}

.db {
    display: block;
}

.tracked {
    letter-spacing: .1em;
}

.lh-title {
    line-height: 1.25;
}

.link {
    text-decoration: none;
    transition: color .15s ease-in;
}

.link:link, .link:visited {
    transition: color .15s ease-in;
}

.link:hover {
    transition: color .15s ease-in;
}

.link:active {
    transition: color .15s ease-in;
}

.link:focus {
    transition: color .15s ease-in;
}

.mw5 {
    max-width: 16rem;
}

.w-100 {
    width: 100%;
}

.gray {
    color: #777;
}

.bg-white {
    background-color: #fff;
}

.pa3 {
    padding: 1rem;
}

.pv2 {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.ph3 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.mv4 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.ttu {
    text-transform: uppercase;
}

.f6 {
    font-size: .875rem;
}

.center {
    margin-right: auto;
    margin-left: auto;
}

.dim {
    opacity: 1;
    transition: opacity .15s ease-in;
}

.dim:hover, .dim:focus {
    opacity: .5;
    transition: opacity .15s ease-in;
}

.dim:active {
    opacity: .8;
    transition: opacity .15s ease-out;
}

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

npm i --save tachyons-borders tachyons-border-colors tachyons-display tachyons-letter-spacing tachyons-line-height tachyons-links tachyons-max-widths tachyons-widths tachyons-skins tachyons-spacing tachyons-text-transform tachyons-type-scale tachyons-utilities tachyons-hovers

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