Skip to main content

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 (
		<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.

Result
Loading...
Live Editor
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.

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>
	);
}

Props​

TopicCard​

TopicCardIcon​

TopicCardContainer​