TopicCard

TopicCards are used to display a collection of topics or categories that users can explore. Each card contains an icon, title, description, and an action button to start exploring the topic. By default, TopicCards are not responsive. However, you can use the TopicCard.Container component to wrap multiple TopicCard components and apply a responsive layout to them.

Result

Loading...

Live Editor

function Example() { return ( <TopicCard renderIcon={() => ( <TopicCard.Icon> <span className="icon-placeholder" /> </TopicCard.Icon> )} topicTitle="Title" topicDescription="Description" actionLabel="Action Label" /> ); }

function Example() {
    return (
        <TopicCard
            renderIcon={() => (
                <TopicCard.Icon>
                    <span className="icon-placeholder" />
                </TopicCard.Icon>
            )}
            topicTitle="Title"
            topicDescription="Description"
            actionLabel="Action Label"
        />
    );
}

Within a TopicCardContainer

The TopicCard.Container component is used to wrap multiple TopicCard components and apply a responsive layout to them. The TopicCardContainer will apply columns based on the lg and md breakpoints. By default, the lg breakpoint is set to 4 columns and the md breakpoint is set to 3 columns. Once the size of the viewport is smaller than the md breakpoint, the cards will be displayed in a single column.

Result

Loading...

Live Editor

function Example() { return ( <TopicCard.Container> <TopicCard renderIcon={() => ( <TopicCard.Icon> <span className="icon-car-01" /> </TopicCard.Icon> )} topicTitle="Buy A Car" topicDescription="Purchase a new car or upgrade the car you own. Calculate what you need to finance or purchase a car." actionLabel="Start Exploration" /> <TopicCard renderIcon={() => ( <TopicCard.Icon> <span className="icon-plane" /> </TopicCard.Icon> )} topicTitle="Vacation Planner" topicDescription="Explore possibilities for a vacation to see whats achievable or what is available based off your plan." actionLabel="Start Exploration" /> <TopicCard renderIcon={() => ( <TopicCard.Icon> <span className="icon-hearts" /> </TopicCard.Icon> )} topicTitle="Getting Married" topicDescription="Plan for a wedding and all the things that are a part of the next step in that chapter of life." actionLabel="Start Exploration" /> <TopicCard renderIcon={() => ( <TopicCard.Icon> <span className="icon-shopping-cart-01" /> </TopicCard.Icon> )} topicTitle="Large Purchase" topicDescription="Calculate a large purchase with inflation adjustment" actionLabel="Start Exploration" /> </TopicCard.Container> ); }

function Example() {
    return (
        <TopicCard.Container>
            <TopicCard
                renderIcon={() => (
                    <TopicCard.Icon>
                        <span className="icon-car-01" />
                    </TopicCard.Icon>
                )}
                topicTitle="Buy A Car"
                topicDescription="Purchase a new car or upgrade the car you own. Calculate what you need to finance or purchase a car."
                actionLabel="Start Exploration"
            />

            <TopicCard
                renderIcon={() => (
                    <TopicCard.Icon>
                        <span className="icon-plane" />
                    </TopicCard.Icon>
                )}
                topicTitle="Vacation Planner"
                topicDescription="Explore possibilities for a vacation to see whats achievable or what is available based off your plan."
                actionLabel="Start Exploration"
            />

            <TopicCard
                renderIcon={() => (
                    <TopicCard.Icon>
                        <span className="icon-hearts" />
                    </TopicCard.Icon>
                )}
                topicTitle="Getting Married"
                topicDescription="Plan for a wedding and all the things that are a part of the next step in that chapter of life."
                actionLabel="Start Exploration"
            />

            <TopicCard
                renderIcon={() => (
                    <TopicCard.Icon>
                        <span className="icon-shopping-cart-01" />
                    </TopicCard.Icon>
                )}
                topicTitle="Large Purchase"
                topicDescription="Calculate a large purchase with inflation adjustment"
                actionLabel="Start Exploration"
            />
        </TopicCard.Container>
    );
}

Custom mobile breakpoints

You can set custom breakpoints for the TopicCard.Container component by passing a string to the mdBreakpoint or smBreakpoints props.

Result

Loading...

Live Editor

function Example() { return ( <TopicCard.Container smBreakpoint="(max-width: 500px)"> <TopicCard renderIcon={() => ( <TopicCard.Icon> <span className="icon-placeholder" /> </TopicCard.Icon> )} topicTitle="Title" topicDescription="Description" actionLabel="Action Label" /> <TopicCard renderIcon={() => ( <TopicCard.Icon> <span className="icon-placeholder" /> </TopicCard.Icon> )} topicTitle="Title" topicDescription="Description" actionLabel="Action Label" /> </TopicCard.Container> ); }

function Example() {
    return (
        <TopicCard.Container smBreakpoint="(max-width: 500px)">
            <TopicCard
                renderIcon={() => (
                    <TopicCard.Icon>
                        <span className="icon-placeholder" />
                    </TopicCard.Icon>
                )}
                topicTitle="Title"
                topicDescription="Description"
                actionLabel="Action Label"
            />

            <TopicCard
                renderIcon={() => (
                    <TopicCard.Icon>
                        <span className="icon-placeholder" />
                    </TopicCard.Icon>
                )}
                topicTitle="Title"
                topicDescription="Description"
                actionLabel="Action Label"
            />
        </TopicCard.Container>
    );
}

Props

TopicCard

TopicCardIcon

TopicCardContainer