Jasper Whitehouse
Los Angeles
Circle Avatar Title Subtitle
HTML
<header class="tc pv4 pv5-ns"> <img src="http://tachyons.io/img/logo.jpg" class="br-100 pa1 ba b--black-10 h3 w3" alt="avatar"> <h1 class="f5 f4-ns fw6 mid-gray">Jasper Whitehouse</h1> <h2 class="f6 gray fw2 ttu tracked">Los Angeles</h2> </header>
css
.ba { border-style: solid; border-width: 1px; } .b--black-10 { border-color: rgba(0, 0, 0, .1); } .br-100 { border-radius: 100%; } .fw2 { font-weight: 200; } .fw6 { font-weight: 600; } .h3 { height: 4rem; } .tracked { letter-spacing: .1em; } .w3 { width: 4rem; } .mid-gray { color: #555; } .gray { color: #777; } .pa1 { padding: .25rem; } .pv4 { padding-top: 2rem; padding-bottom: 2rem; } .tc { text-align: center; } .ttu { text-transform: uppercase; } .f5 { font-size: 1rem; } .f6 { font-size: .875rem; } @media screen and (min-width: 30em) { .pv5-ns { padding-top: 4rem; padding-bottom: 4rem; } .f4-ns { font-size: 1.25rem; } }
Css stats for this component
- Gzipped Size
- 342B
- Selectors
- 18
- Declarations
- 21
Install via npm Only installs the needed tachyons-modules for this component
npm i --save tachyons-borders tachyons-border-colors tachyons-border-radius tachyons-font-weight tachyons-heights tachyons-letter-spacing tachyons-widths tachyons-skins tachyons-spacing tachyons-text-align tachyons-text-transform tachyons-type-scale