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.
<article class="center mw5 mw6-ns hidden ba mv4"> <h1 class="f4 bg-near-black white mv0 pv2 ph3">Title of card</h1> <div class="pa3 bt"> <p class="f6 f5-ns lh-copy measure mv0"> 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>
.ba { border-style: solid; border-width: 1px; } .bt { border-top-style: solid; border-top-width: 1px; } .lh-copy { line-height: 1.5; } .mw5 { max-width: 16rem; } .white { color: #fff; } .bg-near-black { background-color: #111; } .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; } }
npm i --save tachyons-borders tachyons-line-height tachyons-max-widths tachyons-skins tachyons-spacing tachyons-type-scale tachyons-typography tachyons-utilities