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