Title of card
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Text Card
HTML
<article class="center mw5 mw6-ns br3 hidden ba b--black-10 mv4">
<h1 class="f4 bg-near-white br3 br--top black-60 mv0 pv2 ph3">Title of card</h1>
<div class="pa3 bt b--black-10">
<p class="f6 f5-ns lh-copy measure">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
vero eos et accusam et justo duo dolores et ea rebum.
</p>
</div>
</article>
css
.ba {
border-style: solid;
border-width: 1px;
}
.bt {
border-top-style: solid;
border-top-width: 1px;
}
.b--black-10 {
border-color: rgba(0, 0, 0, .1);
}
.br3 {
border-radius: .5rem;
}
.br--top {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.lh-copy {
line-height: 1.5;
}
.mw5 {
max-width: 16rem;
}
.black-60 {
color: rgba(0, 0, 0, .6);
}
.bg-near-white {
background-color: #f4f4f4;
}
.pa3 {
padding: 1rem;
}
.pv2 {
padding-top: .5rem;
padding-bottom: .5rem;
}
.ph3 {
padding-left: 1rem;
padding-right: 1rem;
}
.mv0 {
margin-top: 0;
margin-bottom: 0;
}
.mv4 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.f4 {
font-size: 1.25rem;
}
.f6 {
font-size: .875rem;
}
.measure {
max-width: 30em;
}
.center {
margin-right: auto;
margin-left: auto;
}
@media screen and (min-width: 30em) {
.mw6-ns {
max-width: 32rem;
}
.f5-ns {
font-size: 1rem;
}
}
Css stats for this component
- Gzipped Size
- 382B
- Selectors
- 20
- Declarations
- 28
Install via npm Only installs the needed tachyons-modules for this component
npm i --save tachyons-borders tachyons-border-colors tachyons-border-radius tachyons-line-height tachyons-max-widths tachyons-skins tachyons-spacing tachyons-type-scale tachyons-typography tachyons-utilities