diff --git a/community/developer-funding.page.tsx b/community/developer-funding.page.tsx
index 1d7a0208b..fc82ad600 100644
--- a/community/developer-funding.page.tsx
+++ b/community/developer-funding.page.tsx
@@ -25,7 +25,6 @@ export default function Funding() {
const carouselSlides: PanelStackPanel[] = [
{
id: "xrpl-grants-accelerator",
- heading: translate("Explore XRPL Funding and Builders Programs"),
features: [
{
title: translate("XRPL Grants & XRPL Accelerator"),
@@ -61,7 +60,6 @@ export default function Funding() {
},
{
id: "xrpl-student-builder-residency",
- heading: translate("Explore XRPL Funding and Builders Programs"),
features: [
{
title: translate("XRPL Student Builder Residency"),
@@ -96,7 +94,6 @@ export default function Funding() {
},
{
id: "xrpl-commons",
- heading: translate("Explore XRPL Funding and Builders Programs"),
features: [
{
title: translate("XRPL Commons"),
@@ -156,7 +153,11 @@ export default function Funding() {
}}
/>
-
+
{
+ /** Optional heading for this specific panel. If omitted, only the component-level heading is shown. */
+ heading?: string;
+}
/**
* Background color options for PanelStack.
@@ -25,11 +29,15 @@ export type PanelStackBackground = CarouselFeaturedBackground;
* Props for the PanelStack pattern component.
* Matches CarouselFeatured, minus carousel-only behavior.
*/
-export interface PanelStackProps extends CarouselFeaturedProps {
- /** Array of panels to display. Same shape as CarouselFeatured slides. */
- slides: readonly CarouselSlide[];
+export interface PanelStackProps extends Omit {
+ /** Array of panels to display. Heading is optional for each panel. */
+ slides: readonly PanelStackPanel[];
/** Background color variant. Defaults to 'grey'. */
background?: PanelStackBackground;
+ /** Optional heading text displayed above all panels */
+ heading?: string;
+ /** Optional description text displayed below the heading */
+ description?: string;
}
/**
@@ -64,7 +72,7 @@ export interface PanelStackProps extends CarouselFeaturedProps {
*/
export const PanelStack = React.forwardRef(
(props, ref) => {
- const { slides, background = "grey", className, children, ...rest } = props;
+ const { slides, background = "grey", heading, description, className, children, ...rest } = props;
if (slides.length === 0) {
console.warn("PanelStack: No slides provided");
@@ -77,6 +85,18 @@ export const PanelStack = React.forwardRef(
className={clsx("bds-panel-stack", className)}
{...rest}
>
+ {heading && (
+
+
+
+
+
{heading}
+ {description &&
{description}
}
+
+
+
+
+ )}
{slides.map((slide, index) => (
(
className="bds-carousel-featured__content-col order-1 order-lg-2"
>
-
-
- {slide.heading}
-
-
+ {slide.heading && (
+
+
+ {slide.heading}
+
+
+ )}
@@ -105,7 +127,6 @@ export const PanelStack = React.forwardRef(
key={featureIndex}
className="bds-carousel-featured__feature"
>
-
{feature.title}