Jasper Whitehouse
Los Angeles
Rounded Avatar Title Subtitle
HTML
<header class="tc pv4 pv5-ns"> <img src="http://tachyons.io/img/logo.jpg" class="br3 ba b--black-10 h3 w3" alt="avatar"> <h1 class="f5 f4-ns fw6 black-70">Jasper Whitehouse</h1> <h2 class="f6 black-70 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); } .br3 { border-radius: .5rem; } .fw2 { font-weight: 200; } .fw6 { font-weight: 600; } .h3 { height: 4rem; } .tracked { letter-spacing: .1em; } .w3 { width: 4rem; } .black-70 { color: rgba(0, 0, 0, .7); } .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
- 321B
- Selectors
- 16
- Declarations
- 19
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