Creating Interactive Task Cards
Creating Interactive Task Cards
In our previous lesson, we transformed static column placeholders into dynamic, reusable Column components. Now that we have this flexible container structure in place, it's time to populate these columns with their core content: individual task cards.
Task cards are the building blocks of any Kanban system. Each card represents a single work item that can move between columns as work progresses. A well-designed task card should communicate key information at a glance while being interactive and accessible. In this lesson, we'll create cards that display a title and an optional description, with visual feedback when hovered over or focused.
Building The TaskCard Component
Let's create a new file called TaskCard.svelte in our components directory. This component will represent each individual task in our Kanban board.
Defining Component Props
We'll start by defining the component's props using Svelte 5's $props() function, which you'll remember from our work with the Column component. The key difference here is that we're making the description optional by providing a default empty string value:
Building The Component Template
The template portion needs to handle two scenarios: when a description exists and when it doesn't. We'll use Svelte's {#if} block for conditional rendering:
The {#if} block ensures the description paragraph only appears when a description is provided.
Notice we've included tabindex="0" to make the card keyboard-navigable. This is an important accessibility feature that allows users to interact with our cards using keyboard navigation.
Implementing Interactive Styling
For styling, we'll implement several important interaction states:
The transition property creates smooth animations when the card moves, while the :hover and :focus pseudo-classes provide clear visual feedback to users.
