Mimi W.

CCO (Chief Cat Officer)

Profile Card Title Subtitle

HTML

<article class="mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10">
  <div class="tc">
    <img src="/img/avatar_1.jpg" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Kitty staring at you">
    <h1 class="f3 mb2">Mimi W.</h1>
    <h2 class="f5 fw4 gray mt0">CCO (Chief Cat Officer)</h2>
  </div>
</article>

css

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

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

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

.br3 {
    border-radius: .5rem;
}

.br-100 {
    border-radius: 100%;
}

.dib {
    display: inline-block;
}

.fw4 {
    font-weight: 400;
}

.h4 {
    height: 8rem;
}

.mw5 {
    max-width: 16rem;
}

.w4 {
    width: 8rem;
}

.gray {
    color: #777;
}

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

.pa2 {
    padding: .5rem;
}

.pa3 {
    padding: 1rem;
}

.mb2 {
    margin-bottom: .5rem;
}

.mt0 {
    margin-top: 0;
}

.mv3 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.tc {
    text-align: center;
}

.f3 {
    font-size: 1.5rem;
}

.f5 {
    font-size: 1rem;
}

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

@media screen and (min-width: 30em) {
    .pa4-ns {
        padding: 2rem;
    }
}

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-font-weight tachyons-heights tachyons-max-widths tachyons-widths tachyons-skins tachyons-spacing tachyons-text-align tachyons-type-scale 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