Cards with Filters 01
Filterable card grid powered by CMS—includes image, tag, and title. Ideal for showcasing blogs, projects, or portfolios with category filters.
Desktop
Tablet
Mobile
Section Details:
Variables:
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 0 3.636 C 0 1.628 1.628 0 3.636 0 L 16.364 0 C 18.372 0 20 1.628 20 3.636 L 20 16.364 C 20 18.372 18.372 20 16.364 20 L 3.636 20 C 1.628 20 0 18.372 0 16.364 Z M 5.091 6.182 C 5.091 5.579 5.579 5.091 6.182 5.091 L 13.818 5.091 C 14.421 5.091 14.909 5.579 14.909 6.182 C 14.909 6.784 14.421 7.273 13.818 7.273 L 11.091 7.273 L 11.091 13.818 C 11.091 14.421 10.602 14.909 10 14.909 C 9.398 14.909 8.909 14.421 8.909 13.818 L 8.909 7.273 L 6.182 7.273 C 5.579 7.273 5.091 6.784 5.091 6.182 Z" fill="transparent" height="20px" id="bx5ZpYXbX" transform="translate(2 2)" width="20px"><path d="M 0 3.636 C 0 1.628 1.628 0 3.636 0 L 16.364 0 C 18.372 0 20 1.628 20 3.636 L 20 16.364 C 20 18.372 18.372 20 16.364 20 L 3.636 20 C 1.628 20 0 18.372 0 16.364 Z" fill="rgb(0, 0, 0)" height="20px" id="IZSi1coWj" width="20px"/><path d="M 0 1.091 C 0 0.488 0.488 0 1.091 0 L 8.727 0 C 9.33 0 9.818 0.488 9.818 1.091 C 9.818 1.693 9.33 2.182 8.727 2.182 L 6 2.182 L 6 8.727 C 6 9.33 5.512 9.818 4.909 9.818 C 4.307 9.818 3.818 9.33 3.818 8.727 L 3.818 2.182 L 1.091 2.182 C 0.488 2.182 0 1.693 0 1.091 Z" fill="rgb(255, 255, 255)" height="9.818181818181817px" id="zORJGudlH" transform="translate(5.091 5.091)" width="9.818181818181817px"/></g></svg>)
Section Heading
Post Category
Post Title
Button Text
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 0 3.636 C 0 1.628 1.628 0 3.636 0 L 16.364 0 C 18.372 0 20 1.628 20 3.636 L 20 16.364 C 20 18.372 18.372 20 16.364 20 L 3.636 20 C 1.628 20 0 18.372 0 16.364 Z M 9.995 8.135 C 9.794 7.825 9.45 7.639 9.081 7.639 C 8.712 7.639 8.368 7.825 8.167 8.135 L 3.085 15.951 C 2.867 16.287 2.85 16.715 3.041 17.067 C 3.232 17.418 3.6 17.637 4.001 17.637 L 14.161 17.637 C 14.562 17.637 14.93 17.418 15.121 17.067 C 15.312 16.715 15.295 16.287 15.077 15.951 Z M 15.626 2.364 C 16.417 2.346 17.156 2.758 17.557 3.44 C 17.958 4.122 17.958 4.968 17.557 5.65 C 17.157 6.332 16.418 6.744 15.628 6.727 C 14.442 6.701 13.494 5.732 13.494 4.546 C 13.494 3.36 14.441 2.391 15.626 2.364 Z" fill="transparent" height="20px" id="G7TRTxaJe" transform="translate(2 2)" width="20px"><path d="M 0 3.636 C 0 1.628 1.628 0 3.636 0 L 16.364 0 C 18.372 0 20 1.628 20 3.636 L 20 16.364 C 20 18.372 18.372 20 16.364 20 L 3.636 20 C 1.628 20 0 18.372 0 16.364 Z" fill="rgb(0, 0, 0)" height="20px" id="ed3x511C4" width="20px"/><path d="M 7.086 5.771 C 6.885 5.462 6.541 5.275 6.172 5.275 C 5.803 5.275 5.459 5.462 5.258 5.771 L 0.176 13.588 C -0.042 13.923 -0.059 14.351 0.132 14.703 C 0.323 15.055 0.691 15.274 1.092 15.273 L 11.252 15.273 C 11.652 15.274 12.021 15.055 12.212 14.703 C 12.403 14.351 12.386 13.923 12.168 13.588 Z M 12.717 0.001 C 13.508 -0.017 14.247 0.394 14.648 1.076 C 15.049 1.758 15.049 2.604 14.648 3.286 C 14.248 3.969 13.509 4.381 12.718 4.363 C 11.533 4.337 10.585 3.368 10.585 2.182 C 10.585 0.996 11.532 0.027 12.717 0.001 Z" fill="rgb(255, 255, 255)" height="15.273287207114528px" id="SRXjv3eCI" transform="translate(2.909 2.364)" width="14.948488583764094px"/></g></svg>)
Image 1
Image 2
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 0 3.636 C 0 1.628 1.628 0 3.636 0 L 16.364 0 C 18.372 0 20 1.628 20 3.636 L 20 16.364 C 20 18.372 18.372 20 16.364 20 L 3.636 20 C 1.628 20 0 18.372 0 16.364 Z M 5.675 8.948 L 5.675 8.948 C 4.169 10.454 4.169 12.896 5.675 14.402 L 5.675 14.402 C 7.182 15.908 9.623 15.908 11.129 14.402 L 11.129 14.402 M 14.402 11.129 L 14.402 11.129 C 15.908 9.623 15.908 7.182 14.402 5.675 L 14.402 5.675 C 12.896 4.169 10.454 4.169 8.948 5.675 L 8.948 5.675 M 8.948 11.129 L 11.129 8.948" fill="transparent" height="20px" id="xrk9Ggeq1" transform="translate(2 2)" width="20px"><path d="M 0 3.636 C 0 1.628 1.628 0 3.636 0 L 16.364 0 C 18.372 0 20 1.628 20 3.636 L 20 16.364 C 20 18.372 18.372 20 16.364 20 L 3.636 20 C 1.628 20 0 18.372 0 16.364 Z" fill="rgb(0, 0, 0)" height="20px" id="SvZYH4UZd" width="20px"/><path d="M 1.129 4.402 L 1.129 4.402 C -0.376 5.909 -0.376 8.35 1.129 9.857 L 1.129 9.857 C 2.636 11.362 5.077 11.362 6.584 9.857 L 6.584 9.857 M 9.857 6.584 L 9.857 6.584 C 11.362 5.077 11.362 2.636 9.857 1.129 L 9.857 1.129 C 8.35 -0.376 5.909 -0.376 4.402 1.129 L 4.402 1.129 M 4.402 6.584 L 6.584 4.402" fill="transparent" height="10.985746523688663px" id="dg4rjh4O_" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.18" stroke="rgb(255, 255, 255)" transform="translate(4.545 4.545)" width="10.985746523688631px"/></g></svg>)
Post Link
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 0 3.636 C 0 1.628 1.628 0 3.636 0 L 16.364 0 C 18.372 0 20 1.628 20 3.636 L 20 16.364 C 20 18.372 18.372 20 16.364 20 L 3.636 20 C 1.628 20 0 18.372 0 16.364 Z M 6.136 7.273 C 5.874 7.273 5.635 7.423 5.522 7.66 C 5.408 7.896 5.44 8.176 5.604 8.381 L 9.64 13.425 C 9.769 13.587 9.965 13.681 10.172 13.681 C 10.38 13.681 10.576 13.587 10.705 13.425 L 14.741 8.381 C 14.905 8.176 14.937 7.896 14.823 7.66 C 14.71 7.423 14.471 7.273 14.209 7.273 Z" fill="transparent" height="20px" id="l4IG6MWJ1" transform="translate(2 2)" width="20px"><path d="M 0 3.636 C 0 1.628 1.628 0 3.636 0 L 16.364 0 C 18.372 0 20 1.628 20 3.636 L 20 16.364 C 20 18.372 18.372 20 16.364 20 L 3.636 20 C 1.628 20 0 18.372 0 16.364 Z" fill="rgb(0, 0, 0)" height="20px" id="GBj2pLjlL" width="20px"/><path d="M 0.682 0 C 0.419 0 0.181 0.15 0.067 0.387 C -0.046 0.623 -0.014 0.904 0.15 1.108 L 4.185 6.153 C 4.315 6.314 4.511 6.408 4.718 6.408 C 4.925 6.408 5.121 6.314 5.251 6.153 L 9.286 1.108 C 9.45 0.904 9.482 0.623 9.369 0.387 C 9.255 0.15 9.016 0 8.754 0 Z" fill="rgb(255, 255, 255)" height="6.408467213302666px" id="uHZ2tyktf" transform="translate(5.455 7.273)" width="9.435888829775624px"/></g></svg>)
Variant
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 0 3.636 C 0 1.628 1.628 0 3.636 0 L 16.364 0 C 18.372 0 20 1.628 20 3.636 L 20 16.364 C 20 18.372 18.372 20 16.364 20 L 3.636 20 C 1.628 20 0 18.372 0 16.364 Z M 13.86 7.678 C 14.046 7.732 14.19 7.879 14.238 8.066 C 14.286 8.253 14.232 8.452 14.096 8.588 L 11.91 10.774 L 13.977 12.84 C 14.282 13.155 14.278 13.657 13.967 13.967 C 13.657 14.278 13.155 14.282 12.84 13.977 L 10.774 11.91 L 8.588 14.096 C 8.452 14.232 8.253 14.286 8.066 14.238 C 7.879 14.19 7.732 14.046 7.678 13.86 L 5.476 6.15 C 5.421 5.96 5.474 5.754 5.614 5.614 C 5.754 5.474 5.96 5.421 6.15 5.476 Z" fill="transparent" height="20px" id="tOwjbU8hL" transform="translate(2 2)" width="20px"><path d="M 0 3.636 C 0 1.628 1.628 0 3.636 0 L 16.364 0 C 18.372 0 20 1.628 20 3.636 L 20 16.364 C 20 18.372 18.372 20 16.364 20 L 3.636 20 C 1.628 20 0 18.372 0 16.364 Z" fill="rgb(0, 0, 0)" height="20px" id="lkVk7Auv8" width="20px"/><path d="M 8.406 2.224 C 8.591 2.277 8.735 2.425 8.783 2.612 C 8.832 2.799 8.778 2.997 8.641 3.134 L 6.456 5.319 L 8.522 7.386 C 8.827 7.701 8.823 8.203 8.513 8.513 C 8.203 8.823 7.701 8.827 7.386 8.522 L 5.319 6.456 L 3.134 8.641 C 2.997 8.778 2.799 8.832 2.612 8.783 C 2.425 8.735 2.277 8.591 2.224 8.406 L 0.021 0.696 C -0.033 0.505 0.02 0.3 0.16 0.16 C 0.3 0.02 0.505 -0.033 0.696 0.021 Z" fill="rgb(255, 255, 255)" height="8.80082534774511px" id="yrnAQRrZR" transform="translate(5.455 5.455)" width="8.800825347745043px"/></g></svg>)
Cursor
Icons:
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 8.689 0.756 C 8.96 0.288 9.459 0 10 0 C 10.541 0 11.04 0.288 11.311 0.756 L 19.796 15.411 C 20.067 15.88 20.068 16.458 19.798 16.928 C 19.527 17.397 19.026 17.686 18.484 17.686 L 1.516 17.686 C 0.974 17.686 0.473 17.397 0.202 16.928 C -0.068 16.458 -0.067 15.88 0.204 15.411 Z" fill="transparent" height="17.686396206080605px" id="BeGLeZ2eq" transform="translate(2 3.39)" width="20px"><path d="M 8.689 0.756 C 8.96 0.288 9.459 0 10 0 C 10.541 0 11.04 0.288 11.311 0.756 L 19.796 15.411 C 20.067 15.88 20.068 16.458 19.798 16.928 C 19.527 17.397 19.026 17.686 18.484 17.686 L 1.516 17.686 C 0.974 17.686 0.473 17.397 0.202 16.928 C -0.068 16.458 -0.067 15.88 0.204 15.411 Z" fill="rgb(0, 0, 0)" height="17.686396206080605px" id="YGKnJyVyV" width="20px"/></g></svg>)
Linke Open
Effects:
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 4.372 8.198 C 6.303 7.812 7.812 6.303 8.198 4.372 L 8.891 0.909 C 9.133 -0.303 10.867 -0.303 11.109 0.909 L 11.802 4.372 C 12.188 6.303 13.697 7.812 15.628 8.198 L 19.091 8.891 C 20.303 9.133 20.303 10.867 19.091 11.109 L 15.628 11.802 C 13.697 12.188 12.188 13.697 11.802 15.628 L 11.109 19.091 C 10.867 20.303 9.133 20.303 8.891 19.091 L 8.198 15.628 C 7.812 13.697 6.303 12.188 4.372 11.802 L 0.909 11.109 C -0.303 10.867 -0.303 9.133 0.909 8.891 Z" fill="transparent" height="20px" id="MkEHBXhs0" transform="translate(2 2)" width="20px"><path d="M 4.372 8.198 C 6.303 7.812 7.812 6.303 8.198 4.372 L 8.891 0.909 C 9.133 -0.303 10.867 -0.303 11.109 0.909 L 11.802 4.372 C 12.188 6.303 13.697 7.812 15.628 8.198 L 19.091 8.891 C 20.303 9.133 20.303 10.867 19.091 11.109 L 15.628 11.802 C 13.697 12.188 12.188 13.697 11.802 15.628 L 11.109 19.091 C 10.867 20.303 9.133 20.303 8.891 19.091 L 8.198 15.628 C 7.812 13.697 6.303 12.188 4.372 11.802 L 0.909 11.109 C -0.303 10.867 -0.303 9.133 0.909 8.891 Z" fill="rgb(0, 0, 0)" height="20px" id="TD1Mkd6rR" width="20px"/></g></svg>)
Scroll
How to use:
Click the Copy button on any Section card or preview page.
Paste it anywhere in your Framer project where you need the layout.
Adjust Text, Images, and Variants using built-in Variables.
Unlink the section for full control and deeper customization.