1
2
3
Three Column Collapse One
HTML
<div class="dt-ns dt--fixed-ns">
<div class="dtc-ns tc pv4 bg-black-10">
1
</div>
<div class="dtc-ns tc pv4 bg-black-05">
2
</div>
<div class="dtc-ns tc pv4 bg-black-10">
3
</div>
</div>
css
.bg-black-10 {
background-color: rgba(0, 0, 0, .1);
}
.bg-black-05 {
background-color: rgba(0, 0, 0, .05);
}
.pv4 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.tc {
text-align: center;
}
@media screen and (min-width: 30em) {
.dt-ns {
display: table;
}
.dtc-ns {
display: table-cell;
}
.dt--fixed-ns {
table-layout: fixed;
width: 100%;
}
}
Css stats for this component
- Gzipped Size
- 225B
- Selectors
- 7
- Declarations
- 9
Modules referenced
Install via npm Only installs the needed tachyons-modules for this component
npm i --save tachyons-skins tachyons-spacing tachyons-text-align tachyons-display