This is a promo title
This is suporting copy for the wonderful promo catchphrase that is going to be used.
This is suporting copy for the wonderful promo catchphrase that is going to be used.
<section class="ph3 ph5-ns pv5"> <article class="mw8 center br2 ba b--light-blue bg-lightest-blue"> <div class="dt-ns dt--fixed-ns w-100"> <div class="pa3 pa4-ns dtc-ns v-mid"> <div> <h2 class="fw4 blue mt0 mb3">This is a promo title </h2> <p class="black-70 measure lh-copy mv0"> This is suporting copy for the wonderful promo catchphrase that is going to be used. </p> </div> </div> <div class="pa3 pa4-ns dtc-ns v-mid"> <a href="#" class="no-underline f6 tc db w-100 pv3 bg-animate bg-blue hover-bg-dark-blue white br2">Sign up for free</a> </div> </div> </article> </section>
.ba { border-style: solid; border-width: 1px; } .b--light-blue { border-color: #96ccff; } .br2 { border-radius: .25rem; } .db { display: block; } .fw4 { font-weight: 400; } .lh-copy { line-height: 1.5; } .mw8 { max-width: 64rem; } .w-100 { width: 100%; } .black-70 { color: rgba(0, 0, 0, .7); } .white { color: #fff; } .blue { color: #357edd; } .bg-blue { background-color: #357edd; } .bg-lightest-blue { background-color: #cdecff; } .hover-bg-dark-blue:hover { background-color: #00449e; } .hover-bg-dark-blue:focus { background-color: #00449e; } .pa3 { padding: 1rem; } .pv3 { padding-top: 1rem; padding-bottom: 1rem; } .pv5 { padding-top: 4rem; padding-bottom: 4rem; } .ph3 { padding-left: 1rem; padding-right: 1rem; } .mb3 { margin-bottom: 1rem; } .mt0 { margin-top: 0; } .mv0 { margin-top: 0; margin-bottom: 0; } .no-underline { text-decoration: none; } .tc { text-align: center; } .f6 { font-size: .875rem; } .measure { max-width: 30em; } .center { margin-right: auto; margin-left: auto; } .v-mid { vertical-align: middle; } .bg-animate, .bg-animate:hover, .bg-animate:focus { transition: background-color .15s ease-in-out; } @media screen and (min-width: 30em) { .dt-ns { display: table; } .dtc-ns { display: table-cell; } .dt--fixed-ns { table-layout: fixed; width: 100%; } .pa4-ns { padding: 2rem; } .ph5-ns { padding-left: 4rem; padding-right: 4rem; } }
npm i --save tachyons-borders tachyons-border-colors tachyons-border-radius tachyons-display tachyons-font-weight tachyons-line-height tachyons-max-widths tachyons-widths tachyons-skins tachyons-skins-pseudo tachyons-spacing tachyons-text-decoration tachyons-text-align tachyons-type-scale tachyons-typography tachyons-utilities tachyons-vertical-align tachyons-hovers