1
2
3
4
Four Column Collapse Two Collapse One
HTML
<section class="cf"> <div class="fl w-100 w-50-m w-25-l bg-black-10 tc pv4">1</div> <div class="fl w-100 w-50-m w-25-l bg-black-05 tc pv4">2</div> <div class="fl w-100 w-50-m w-25-l bg-black-20 tc pv4">3</div> <div class="fl w-100 w-50-m w-25-l bg-black-30 tc pv4">4</div> </section>
css
.cf:before, .cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
.fl {
float: left;
_display: inline;
}
.w-100 {
width: 100%;
}
.bg-black-30 {
background-color: rgba(0, 0, 0, .3);
}
.bg-black-20 {
background-color: rgba(0, 0, 0, .2);
}
.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) and (max-width: 60em) {
.w-50-m {
width: 50%;
}
}
@media screen and (min-width: 60em) {
.w-25-l {
width: 25%;
}
}
Css stats for this component
- Gzipped Size
- 304B
- Selectors
- 14
- Declarations
- 16
Modules referenced
Install via npm Only installs the needed tachyons-modules for this component
npm i --save tachyons-clears tachyons-floats tachyons-widths tachyons-skins tachyons-spacing tachyons-text-align