1.4K views
CSS
1/*Neo Brutalism pricing card*/ 2.card { 3 width: 190px; 4 height: 254px; 5 background: #00FFA0; 6 padding: 1rem; 7 border-radius: 1rem; 8 border: .5vmin solid #05060f; 9 box-shadow: .4rem .4rem #05060f; 10 overflow: hidden; 11} 12 13/*Card content*/ 14.pricing-block-content { 15 display: flex; 16 height: 100%; 17 flex-direction: column; 18 gap: .5rem; 19} 20 21.pricing-plan { 22 color: #05060f; 23 font-size: 1.3rem; 24 line-height: 1.25; 25 font-weight: 700; 26} 27 28.price-value { 29 display: flex; 30 color: #05060f; 31 font-size: 1.8rem; 32 line-height: 1.25; 33 font-weight: 700; 34} 35 36.pricing-note { 37 opacity: .8; 38} 39 40/*Checklist*/ 41.check-list { 42 display: flex; 43 flex-direction: column; 44 gap: .5rem; 45 margin-top: .5rem; 46} 47 48.check-list-item { 49 display: flex; 50 align-items: center; 51 gap: 4px; 52}
HTML
1<div class="card"> 2 <div class="pricing-block-content"> 3 <p class="pricing-plan">Starter</p> 4 <div class="price-value" data-currency="$ USD" data-currency-simple="USD"> 5 <p class="price-number">$<span class="price-integer">0</span></p> 6 <div id="priceDiscountCent">/mo</div> 7 </div> 8 <div class="pricing-note">free forever</div> 9 <ul class="check-list" role="list"> 10 <li class="check-list-item"><svg version="1.0" preserveAspectRatio="xMidYMid meet" height="16" viewBox="0 0 30 30.000001" zoomAndPan="magnify" width="16" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" style="color: rgb(102, 78, 255);"><defs><clipPath id="id1"><path fill="#664eff" clip-rule="nonzero" d="M 2.328125 4.222656 L 27.734375 4.222656 L 27.734375 24.542969 L 2.328125 24.542969 Z M 2.328125 4.222656"></path></clipPath></defs><g clip-path="url(#id1)"><path fill-rule="nonzero" fill-opacity="1" d="M 27.5 7.53125 L 24.464844 4.542969 C 24.15625 4.238281 23.65625 4.238281 23.347656 4.542969 L 11.035156 16.667969 L 6.824219 12.523438 C 6.527344 12.230469 6 12.230469 5.703125 12.523438 L 2.640625 15.539062 C 2.332031 15.84375 2.332031 16.335938 2.640625 16.640625 L 10.445312 24.324219 C 10.59375 24.472656 10.796875 24.554688 11.007812 24.554688 C 11.214844 24.554688 11.417969 24.472656 11.566406 24.324219 L 27.5 8.632812 C 27.648438 8.488281 27.734375 8.289062 27.734375 8.082031 C 27.734375 7.875 27.648438 7.679688 27.5 7.53125 Z M 27.5 7.53125" fill="#664eff"></path></g></svg>Lorem Ipsum</li> 11 <li class="check-list-item"><svg version="1.0" preserveAspectRatio="xMidYMid meet" height="16" viewBox="0 0 30 30.000001" zoomAndPan="magnify" width="16" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" style="color: rgb(102, 78, 255);"><defs><clipPath id="id1"><path fill="#664eff" clip-rule="nonzero" d="M 2.328125 4.222656 L 27.734375 4.222656 L 27.734375 24.542969 L 2.328125 24.542969 Z M 2.328125 4.222656"></path></clipPath></defs><g clip-path="url(#id1)"><path fill-rule="nonzero" fill-opacity="1" d="M 27.5 7.53125 L 24.464844 4.542969 C 24.15625 4.238281 23.65625 4.238281 23.347656 4.542969 L 11.035156 16.667969 L 6.824219 12.523438 C 6.527344 12.230469 6 12.230469 5.703125 12.523438 L 2.640625 15.539062 C 2.332031 15.84375 2.332031 16.335938 2.640625 16.640625 L 10.445312 24.324219 C 10.59375 24.472656 10.796875 24.554688 11.007812 24.554688 C 11.214844 24.554688 11.417969 24.472656 11.566406 24.324219 L 27.5 8.632812 C 27.648438 8.488281 27.734375 8.289062 27.734375 8.082031 C 27.734375 7.875 27.648438 7.679688 27.5 7.53125 Z M 27.5 7.53125" fill="#664eff"></path></g></svg>Lorem Ipsum</li> 12 <li class="check-list-item"><svg version="1.0" preserveAspectRatio="xMidYMid meet" height="16" viewBox="0 0 30 30.000001" zoomAndPan="magnify" width="16" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" style="color: rgb(102, 78, 255);"><defs><clipPath id="id1"><path fill="#664eff" clip-rule="nonzero" d="M 2.328125 4.222656 L 27.734375 4.222656 L 27.734375 24.542969 L 2.328125 24.542969 Z M 2.328125 4.222656"></path></clipPath></defs><g clip-path="url(#id1)"><path fill-rule="nonzero" fill-opacity="1" d="M 27.5 7.53125 L 24.464844 4.542969 C 24.15625 4.238281 23.65625 4.238281 23.347656 4.542969 L 11.035156 16.667969 L 6.824219 12.523438 C 6.527344 12.230469 6 12.230469 5.703125 12.523438 L 2.640625 15.539062 C 2.332031 15.84375 2.332031 16.335938 2.640625 16.640625 L 10.445312 24.324219 C 10.59375 24.472656 10.796875 24.554688 11.007812 24.554688 C 11.214844 24.554688 11.417969 24.472656 11.566406 24.324219 L 27.5 8.632812 C 27.648438 8.488281 27.734375 8.289062 27.734375 8.082031 C 27.734375 7.875 27.648438 7.679688 27.5 7.53125 Z M 27.5 7.53125" fill="#664eff"></path></g></svg>Lorem Ipsum</li> 13 <li class="check-list-item"><svg version="1.0" preserveAspectRatio="xMidYMid meet" height="16" viewBox="0 0 30 30.000001" zoomAndPan="magnify" width="16" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" style="color: rgb(102, 78, 255);"><defs><clipPath id="id1"><path fill="#664eff" clip-rule="nonzero" d="M 2.328125 4.222656 L 27.734375 4.222656 L 27.734375 24.542969 L 2.328125 24.542969 Z M 2.328125 4.222656"></path></clipPath></defs><g clip-path="url(#id1)"><path fill-rule="nonzero" fill-opacity="1" d="M 27.5 7.53125 L 24.464844 4.542969 C 24.15625 4.238281 23.65625 4.238281 23.347656 4.542969 L 11.035156 16.667969 L 6.824219 12.523438 C 6.527344 12.230469 6 12.230469 5.703125 12.523438 L 2.640625 15.539062 C 2.332031 15.84375 2.332031 16.335938 2.640625 16.640625 L 10.445312 24.324219 C 10.59375 24.472656 10.796875 24.554688 11.007812 24.554688 C 11.214844 24.554688 11.417969 24.472656 11.566406 24.324219 L 27.5 8.632812 C 27.648438 8.488281 27.734375 8.289062 27.734375 8.082031 C 27.734375 7.875 27.648438 7.679688 27.5 7.53125 Z M 27.5 7.53125" fill="#664eff"></path></g></svg>Lorem Ipsum</li> 14 </ul> 15 </div></div>