Fahad Murtaza

Don’t take our word for it, try CardCrafter live. <a href="https://tastewp.com/plugins/cardcrafter-data-grids" rel="nofollow ugc">Full-featured demo</a> on a real WordPress site. No signup, no download, no risk.
CardCrafter is the #1 WordPress plugin for displaying data as beautiful card grids. Transform your WordPress posts, JSON data, and custom content into professional, responsive card layouts. No coding required.
🆕 NEW in v1.12.0: Native WordPress Posts integration! Display your blog posts, pages, or custom post types as stunning card grids with featured images, excerpts, and automatic formatting.
Perfect for: 
• Team Directories – Display staff members with photos and bios 
• Product Showcases – Feature products with images, prices, and descriptions 
• Portfolio Galleries – Present your work in elegant grid layouts 
• Blog Post Grids – Convert WordPress posts into visual card displays 
• Service Listings – Highlight your services with card-based layouts
Trusted by 10,000+ WordPress sites for enterprise-grade data visualization with instant setup and professional results.
Why CardCrafter?
<ul>
<li>🎨 Beautiful by Default: Modern, clean card designs that look professional out of the box.</li>
<li>📱 Fully Responsive: Cards automatically adapt to any screen size.</li>
<li>⚡ Lightweight: Pure JavaScript, no jQuery. Fast and efficient.</li>
<li>🔍 Interactive: Built-in search and sorting for easy data navigation.</li>
<li>📊 Data Export: Export displayed data as CSV, JSON, or PDF for business use.</li>
<li>🔧 Flexible Layouts: Choose between Grid, Masonry, or List view.</li>
</ul>
<h3>🚀 Key Features</h3>
<ul>
<li>🧱 Gutenberg Block: Native WordPress block editor support with visual configuration.</li>
<li>📝 WordPress Posts Grid: Transform your blog posts into beautiful card layouts with one click.</li>
<li>Instant Search & Sort: Users can filter and sort cards instantly (Client-side).</li>
<li>Multiple Layouts: Grid, Masonry, and List views to suit your content.</li>
<li>Customizable Columns: Display 2, 3, or 4 cards per row.</li>
<li>Smart Field Mapping: Automatically detects image, title, subtitle, description, and link fields.</li>
<li>Professional Data Export: Export as CSV for spreadsheets, JSON for system integration, or PDF for reports.</li>
<li>Live Admin Preview: Test your JSON sources before publishing.</li>
<li>Dark Mode Support: Cards automatically adapt to dark color schemes.</li>
</ul>
<h3>💡 Perfect For</h3>
<ul>
<li>Team Directories: Showcase your team members with photos and bios.</li>
<li>Product Catalogs: Display products with images, prices, and descriptions.</li>
<li>Portfolio Galleries: Present your work in an elegant grid layout.</li>
<li>Service Listings: Highlight your services with card-based layouts.</li>
<li>Testimonials: Display customer reviews in beautiful cards.</li>
</ul>
<h3>Usage</h3>
Display WordPress Posts 
Display your blog posts, pages, or custom post types as beautiful cards.
<pre><code>[cardcrafter-data-grids post_type="post"]
</code></pre>
Show WooCommerce Products 
Display your products in a grid layout.
<pre><code>[cardcrafter-data-grids post_type="product"]
</code></pre>
Team Directory (Sorted) 
Display team members sorted alphabetically by title.
<pre><code>[cardcrafter-data-grids post_type="team" wp_query="orderby=title&order=ASC"]
</code></pre>
News Category 
Show only posts from the ‘news’ category.
<pre><code>[cardcrafter-data-grids post_type="post" wp_query="category_name=news&posts_per_page=6"]
</code></pre>
Featured Products 
Display products that have a ‘featured’ meta key set to ‘yes’.
<pre><code>[cardcrafter-data-grids post_type="product" wp_query="meta_key=featured&meta_value=yes"]
</code></pre>
Team by Author 
Show team members created by a specific author (ID 5).
<pre><code>[cardcrafter-data-grids post_type="team" wp_query="author=5&orderby=menu_order"]
</code></pre>
Portfolio with Custom Fields (ACF) 
Map your custom fields to card elements automatically.
<pre><code>[cardcrafter-data-grids post_type="portfolio" image_field="project_image" subtitle_field="client_name"]
</code></pre>
Product with Descriptions 
Use custom fields for price and features.
<pre><code>[cardcrafter-data-grids post_type="product" subtitle_field="price" description_field="product_features"]
</code></pre>
Instant Demo 
Automatically loads team demo data with professional banner.
<pre><code>[cardcrafter-data-grids]
</code></pre>
Gutenberg Block (Recommended) 
1. Add the “CardCrafter” block to any post/page 
2. Configure your data source in the sidebar settings 
3. Choose layout, columns, and interactive features 
4. Preview updates live in the editor
Load from JSON URL 
Load data from an external JSON source.
<pre><code>[cardcrafter-data-grids source="https://example.com/team.json"]
</code></pre>
Masonry Layout 
Display cards in a Pinterest-style masonry layout.
<pre><code>[cardcrafter-data-grids source="https://example.com/products.json" layout="masonry" columns="4"]
</code></pre>
Shortcode Attributes
<ul>
<li><code>source</code> (optional) – URL of your JSON data. Omit for instant demo mode.</li>
<li><code>post_type</code> (NEW!) – WordPress post type to display (post, page, product, etc.)</li>
<li><code>wp_query</code> (NEW!) – Custom WordPress query parameters (category=news&author=5)</li>
<li><code>posts_per_page</code> (NEW!) – Number of WordPress posts to display (default: 12)</li>
<li><code>layout</code> – “grid”, “masonry”, or “list” (default: grid)</li>
<li><code>columns</code> – 2, 3, or 4 (default: 3)</li>
<li><code>items_per_page</code> – 6, 12, 24, 50, or 100 (default: 12)</li>
<li><code>image_field</code> – JSON field for image (default: image)</li>
<li><code>title_field</code> – JSON field for title (default: title)</li>
<li><code>subtitle_field</code> – JSON field for subtitle (default: subtitle)</li>
<li><code>description_field</code> – JSON field for description (default: description)</li>
<li><code>link_field</code> – JSON field for link (default: link)</li>
</ul>

CardCrafter – Data-Driven Card Grids

Transform JSON data and WordPress posts into beautiful card grids. Perfect for teams, products, portfolios, and blogs.

Freemius

Abu Hayat

bPlugins

shehabulislam

btechnologies

MD.SHIHAB SHAMIM

NF Tushar

<a href="https://bplugins.com/products/info-cards" rel="nofollow ugc">Info Cards</a> | <a href="https://bplugins.com/products/info-cards/#demos" rel="nofollow ugc">Demos</a> | <a href="https://bplugins.com/products/info-cards/pricing/" rel="nofollow ugc">Pricing</a>
The Info Cards Block Plugin for WordPress allows you to create beautifully designed and informative cards within your content . With this plugin, you can present your content interactively and engagingly, making it easier for your audience to consume and understand your message.
The plugin is a Gutenberg block, which means you can easily add it to your content using the Gutenberg editor. Once you’ve added the Info Card block, you can customize it with a variety of content types, including images, text, and links. You can also choose from a range of pre-designed templates or create your own custom layout to fit your unique branding.
The Info Cards Block Plugin is designed to be user-friendly, even for those with limited technical knowledge. You don’t need to write any code or install any additional software to use it. Additionally, the plugin is fully responsive, ensuring that your Info Cards look great and function perfectly across all devices and screen sizes.
With the Info Cards Block Plugin, you can create engaging and visually appealing content that will help you stand out in a crowded digital landscape. Whether you’re creating product cards, team member profiles, or informational cards, this plugin is an essential tool for your WordPress site.
In conclusion, the Info Cards Block Plugin is an excellent choice for anyone looking to create beautiful, informative cards within their WordPress content. Download the plugin today and start creating engaging content that will captivate your audience!
<h4>Free Features</h4>
<ul>
<li>Fully customizable.</li>
<li>Set custom color.</li>
<li>Build-in templates.</li>
<li>Set Columns, column gap and row gap .</li>
<li>Use an image in the card.</li>
<li>Support links.</li>
<li>Typography .</li>
<li>Responsive layout.</li>
<li>Easy to use.</li>
</ul>
<h4>Pro Features</h4>
<ul>
<li>Universal Shortcodes: Compatible with all page builders.</li>
<li>All Free features.</li>
<li>12+ ready-made themes.</li>
<li>Advanced templates & layouts.</li>
<li>More typography controls (font family, weight, spacing).</li>
<li>Hover & animation effects.</li>
<li>Gradient & advanced color options.</li>
<li>Border, padding, margin full control.</li>
<li>Card shadows & depth effects.</li>
<li>Priority updates & support.</li>
</ul>
<h4>How to use info cards</h4>
<ul>
<li>Install the info cards plugin.</li>
<li>Go to the page/posts where you want to embed the info cards.</li>
<li>Search Info Cards by clicking on the + button on the Gutenberg block editor. </li>
<li>Select Info Cards block</li>
<li>Create and customize the cards. </li>
<li>
Enjoy!
</li>
<li>
For installation help click on Installation Tab
</li>
</ul>
<h4>Feedback</h4>
<ul>
<li>Liked that plugin? Hate it? Want a new feature? <a href="mailto:support@bplugins.com" title="Send feedback" rel="nofollow ugc">Send me some feedback</a></li>
</ul>
<h4>⭐ Check out the Parent Plugin of this plugin-</h4>
🔥 <a href="https://bblockswp.com/" rel="nofollow ugc">bBlocks</a> – Best gutenberg blocks collections for WordPress.
<h4>⭐ Check out our other WordPress Plugins-</h4>
🔥 <a href="https://bplugins.com/products/html5-audio-player" rel="nofollow ugc">Html5 Audio Player</a> – Best audio player plugin for WordPress.
🔥 <a href="https://bplugins.com/products/html5-video-player" rel="nofollow ugc">Html5 Video Player</a> – Best video player plugin for WordPress.
🔥 <a href="https://bplugins.com/products/pdf-poster" rel="nofollow ugc">PDF Poster</a> – A fully-featured PDF Viewer Plugin for WordPress.
🔥 <a href="https://bplugins.com/products/streamcast-radio-player" rel="nofollow ugc">StreamCast</a> – A fully-featured Radio Player Plugin for WordPress.
🔥 <a href="https://bplugins.com/products/3d-viewer" rel="nofollow ugc">3D Viewer</a> – Display interactive 3D models on the webs.

Info Cards – Add Text and Media in Card Layouts

Simple and easy way to create and display information cards  anywhere.

CardCrafter – Data-Driven Card Grids vs Info Cards – Add Text and Media in Card Layouts