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.
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.
<article class="mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10"> <div class="tc"> <img src="http://tachyons.io/img/avatar_1.jpg" class="br-100 h3 w3 dib" title="Photo of a 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>
.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; } }
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