پیشنمایش زنده
کد HTML
<div class="card">
<div class="pricing-block-content">
<p class="pricing-plan">Starter</p>
<div class="price-value" data-currency="$ USD" data-currency-simple="USD">
<p class="price-number">$<span class="price-integer">0</span></p>
<div id="priceDiscountCent">/mo</div>
</div>
<div class="pricing-note">free forever</div>
<ul class="check-list" role="list">
<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>
<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>
<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>
<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>
</ul>
</div>
</div>
کد CSS
/*Neo Brutalism pricing card*/
.card {
width: 190px;
background: #00ffa0;
padding: 1rem;
border-radius: 1rem;
border: 0.5vmin solid #05060f;
box-shadow: 0.4rem 0.4rem #05060f;
overflow: hidden;
color: black;
}
/*Card content*/
.pricing-block-content {
display: flex;
height: 100%;
flex-direction: column;
gap: 0.5rem;
}
.pricing-plan {
color: #05060f;
font-size: 1.3rem;
line-height: 1.25;
font-weight: 700;
}
.price-value {
display: flex;
color: #05060f;
font-size: 1.8rem;
line-height: 1.25;
font-weight: 700;
}
.pricing-note {
opacity: 0.8;
}
/*Checklist*/
.check-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 0.5rem;
}
.check-list-item {
display: flex;
align-items: center;
gap: 4px;
}