This is the title
This is the subtitle where additional information can go if you really need it.
Title Subtitle Centered
HTML
<header class="tc ph4">
<h1 class="f3 f2-m f1-l fw2 black-90 mv3">
This is the title
</h1>
<h2 class="f5 f4-m f3-l fw2 black-50 mt0 lh-copy">
This is the subtitle where additional information can go if you really need it.
</h2>
</header>
css
.fw2 {
font-weight: 200;
}
.lh-copy {
line-height: 1.5;
}
.black-90 {
color: rgba(0, 0, 0, .9);
}
.black-50 {
color: rgba(0, 0, 0, .5);
}
.ph4 {
padding-left: 2rem;
padding-right: 2rem;
}
.mt0 {
margin-top: 0;
}
.mv3 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.tc {
text-align: center;
}
.f3 {
font-size: 1.5rem;
}
.f5 {
font-size: 1rem;
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.f2-m {
font-size: 2.25rem;
}
.f4-m {
font-size: 1.25rem;
}
}
@media screen and (min-width: 60em) {
.f1-l {
font-size: 3rem;
}
.f3-l {
font-size: 1.5rem;
}
}
Css stats for this component
- Gzipped Size
- 283B
- Selectors
- 14
- Declarations
- 16
Install via npm Only installs the needed tachyons-modules for this component
npm i --save tachyons-font-weight tachyons-line-height tachyons-skins tachyons-spacing tachyons-text-align tachyons-type-scale