Double Ring
HTML
<div class="tc pa4"> <img src="http://tachyons.io/img/logo.jpg" class="br-100 pa1 ba b--black-10 h3 w3" alt="avatar"> </div>
css
.ba {
border-style: solid;
border-width: 1px;
}
.b--black-10 {
border-color: rgba(0, 0, 0, .1);
}
.br-100 {
border-radius: 100%;
}
.h3 {
height: 4rem;
}
.w3 {
width: 4rem;
}
.pa1 {
padding: .25rem;
}
.pa4 {
padding: 2rem;
}
.tc {
text-align: center;
}
Css stats for this component
- Gzipped Size
- 177B
- Selectors
- 8
- Declarations
- 9
Install via npm Only installs the needed tachyons-modules for this component
npm i --save tachyons-borders tachyons-border-colors tachyons-border-radius tachyons-heights tachyons-widths tachyons-spacing tachyons-text-align