Mimi Whitehouse


Quite affectionate and outgoing. She loves to get chin scratches and will roll around on the floor waiting for you give her more of them.

Profile Card

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 h3 w3 dib" title="Kitty staring at you">
    <h1 class="f4">Mimi Whitehouse</h1>
    <hr class="mw3 bb bw1 b--black-10">
  </div>
  <p class="lh-copy measure center f6 black-70">
    Quite affectionate and outgoing.
    She loves to get chin scratches and will
    roll around on the floor waiting for you give her more of them.
  </p>
</article>

css

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

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

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

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

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

.bw1 {
    border-width: .125rem;
}

.dib {
    display: inline-block;
}

.h3 {
    height: 4rem;
}

.lh-copy {
    line-height: 1.5;
}

.mw3 {
    max-width: 4rem;
}

.mw5 {
    max-width: 16rem;
}

.w3 {
    width: 4rem;
}

.black-70 {
    color: rgba(0, 0, 0, .7);
}

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

.pa3 {
    padding: 1rem;
}

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

.tc {
    text-align: center;
}

.f4 {
    font-size: 1.25rem;
}

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

.measure {
    max-width: 30em;
}

.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-border-widths tachyons-display tachyons-heights 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