Build equal-height card grids with JSON configuration and automatic height equalization
This example demonstrates basic card layouts with footers containing buttons. Cards automatically equalize heights within each row, ensuring a uniform grid appearance. This matches the quality shown in the standard card examples.
const config = {
version: 2,
layoutId: "basic-card-grid",
breakpoints: { xs: 1, sm: 2, md: 3 },
items: [
{
id: "card-1",
content: {
type: "card",
title: "Feature Overview",
titleInHeader: true,
body: "Discover powerful features that make development faster and more efficient.",
tabCard: true,
buttons: [
{ text: "Learn More", variant: "btn-success" }
]
}
},
{
id: "card-2",
content: {
type: "card",
title: "Getting Started",
titleInHeader: true,
body: "Quick start guide to help you get up and running in minutes. Includes setup instructions and best practices for optimal performance.",
tabCard: true,
buttons: [
{ text: "Start Now", variant: "btn-primary" }
]
}
},
{
id: "card-3",
content: {
type: "card",
title: "Advanced Configuration",
titleInHeader: true,
body: "Customize every aspect to fit your needs.",
tabCard: true,
buttons: [
{ text: "Configure", variant: "btn-default" }
]
}
}
]
};
RSL.JSONLayout.renderLayout('#demo-output-1', config);Product showcase cards with images, pricing, and call-to-action buttons. This demonstrates how cards can display rich content including images, multiple content sections, and action buttons in the footer.
const config = {
version: 2,
layoutId: "product-card-grid",
breakpoints: { xs: 1, sm: 2, lg: 3 },
items: [
{
id: "product-1",
content: {
type: "card",
image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&h=400&fit=crop",
imageAlt: "Product 1",
title: "Premium Package",
body: "Everything you need to get started. Includes premium support and advanced features.",
price: "Price: $49.99/month",
buttons: [
{ text: "Buy Now", variant: "btn-success" },
{ text: "Details", variant: "btn-default" }
]
}
},
{
id: "product-2",
content: {
type: "card",
image: "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=600&h=400&fit=crop",
imageAlt: "Product 2",
title: "Professional Suite",
body: "Complete professional toolkit.",
price: "Price: $99.99/month",
buttons: [
{ text: "Buy Now", variant: "btn-success" },
{ text: "Details", variant: "btn-default" }
]
}
},
{
id: "product-3",
content: {
type: "card",
image: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=600&h=400&fit=crop",
imageAlt: "Product 3",
title: "Enterprise Edition",
body: "Full enterprise solution with dedicated support, custom integrations, and SLA guarantees.",
price: "Price: $299.99/month",
buttons: [
{ text: "Contact Sales", variant: "btn-success" },
{ text: "Details", variant: "btn-default" }
]
}
}
]
};
RSL.JSONLayout.renderLayout('#demo-output-2', config);Team member profile cards featuring images, bios, and multiple action buttons. This example shows how to create rich profile cards with various user interaction options.
const config = {
version: 2,
layoutId: "profile-card-grid",
breakpoints: { xs: 1, sm: 2, lg: 3 },
items: [
{
id: "profile-1",
content: {
type: "card",
image: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=600&h=400&fit=crop",
imageAlt: "Sarah Chen",
title: "Sarah Chen",
subtitle: "Lead Developer",
body: "Full-stack expert specializing in React and Node.js.",
tabCard: true,
buttons: [
{ text: "View Profile", variant: "btn-primary" },
{ text: "Message", variant: "btn-default" }
]
}
},
{
id: "profile-2",
content: {
type: "card",
image: "https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=600&h=400&fit=crop",
imageAlt: "Marcus Johnson",
title: "Marcus Johnson",
subtitle: "UX Designer",
body: "Creative designer with 10+ years of experience crafting beautiful, user-centered interfaces.",
tabCard: true,
buttons: [
{ text: "View Profile", variant: "btn-primary" },
{ text: "Message", variant: "btn-default" }
]
}
},
{
id: "profile-3",
content: {
type: "card",
image: "https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=600&h=400&fit=crop",
imageAlt: "Emma Rodriguez",
title: "Emma Rodriguez",
subtitle: "Product Manager",
body: "Strategic thinker focused on delivering value.",
tabCard: true,
buttons: [
{ text: "View Profile", variant: "btn-primary" },
{ text: "Message", variant: "btn-default" }
]
}
},
{
id: "profile-4",
content: {
type: "card",
image: "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=600&h=400&fit=crop",
imageAlt: "David Kim",
title: "David Kim",
subtitle: "DevOps Engineer",
body: "Infrastructure specialist ensuring 99.99% uptime with cutting-edge cloud architecture and automation.",
tabCard: true,
buttons: [
{ text: "View Profile", variant: "btn-primary" },
{ text: "Message", variant: "btn-default" }
]
}
}
]
};
RSL.JSONLayout.renderLayout('#demo-output-3', config);Simple feature highlight cards without images, demonstrating text-based cards with varying content lengths. Perfect for showcasing features, benefits, or services with clear calls-to-action.
const config = {
version: 2,
layoutId: "feature-card-grid",
breakpoints: { xs: 1, sm: 2, md: 3 },
items: [
{
id: "feature-1",
content: {
type: "card",
title: "Lightning Fast",
titleIcon: "fas fa-rocket",
titleInHeader: true,
body: "Optimized for performance with minimal overhead. Experience blazing-fast load times and smooth interactions.",
tabCard: true,
buttons: [
{ text: "Learn More", variant: "btn-success" }
]
}
},
{
id: "feature-2",
content: {
type: "card",
title: "Fully Responsive",
titleIcon: "fas fa-mobile-alt",
titleInHeader: true,
body: "Works seamlessly across all devices and screen sizes. Mobile-first design ensures great UX everywhere.",
tabCard: true,
buttons: [
{ text: "Learn More", variant: "btn-success" }
]
}
},
{
id: "feature-3",
content: {
type: "card",
title: "Accessible",
titleIcon: "fas fa-universal-access",
titleInHeader: true,
body: "Built with WCAG 2.1 AA compliance. Keyboard navigation, screen reader support, and semantic HTML ensure accessibility for all users.",
tabCard: true,
buttons: [
{ text: "Learn More", variant: "btn-success" }
]
}
}
]
};
RSL.JSONLayout.renderLayout('#demo-output-4', config);