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.
function Example() { return ( <div data-testid="pw-topiccard"> <TopicCard renderIcon={() => ( <TopicCard.Icon> <span className="icon-placeholder" /> </TopicCard.Icon> )} topicTitle="Title" topicDescription="Description" actionLabel="Action Label" /> </div> ); }
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.
function Example() { return ( <div data-testid="pw-topiccard-container"> <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> </div> ); }
Custom mobile breakpoints
You can set custom breakpoints for the TopicCard.Container
component by passing a string to the mdBreakpoint
or smBreakpoints
props.
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> ); }