Profile Card Title Subtitle
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 h4 w4 dib ba b--black-05 pa2" title="Kitty staring at you">
<h1 class="f3 mb2">Mimi W.</h1>
<h2 class="f5 fw4 gray mt0">CCO (Chief Cat Officer)</h2>
</div>
</article>
css
.ba {
border-style: solid;
border-width: 1px;
}
.b--black-10 {
border-color: rgba(0, 0, 0, .1);
}
.b--black-05 {
border-color: rgba(0, 0, 0, .05);
}
.br3 {
border-radius: .5rem;
}
.br-100 {
border-radius: 100%;
}
.dib {
display: inline-block;
}
.fw4 {
font-weight: 400;
}
.h4 {
height: 8rem;
}
.mw5 {
max-width: 16rem;
}
.w4 {
width: 8rem;
}
.gray {
color: #777;
}
.bg-white {
background-color: #fff;
}
.pa2 {
padding: .5rem;
}
.pa3 {
padding: 1rem;
}
.mb2 {
margin-bottom: .5rem;
}
.mt0 {
margin-top: 0;
}
.mv3 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.tc {
text-align: center;
}
.f3 {
font-size: 1.5rem;
}
.f5 {
font-size: 1rem;
}
.center {
margin-right: auto;
margin-left: auto;
}
@media screen and (min-width: 30em) {
.pa4-ns {
padding: 2rem;
}
}
Css stats for this component
- Gzipped Size
- 370B
- Selectors
- 22
- Declarations
- 25
Install via npm Only installs the needed tachyons-modules for this component
npm i --save tachyons-borders tachyons-border-colors tachyons-border-radius tachyons-display tachyons-font-weight tachyons-heights tachyons-max-widths tachyons-widths tachyons-skins tachyons-spacing tachyons-text-align tachyons-type-scale tachyons-utilities