screens/TaskCard

TaskCard

screens
since 0.1.0

Pattern: a task card composed from DSCard, DSCheckbox, DSStatusLabel and DSAvatarGroup. There is no DSTaskCard type.

iOS 17+macOS 14+watchOS 10+tvOS 17+visionOS 1+

Purpose

Show how SwiftDS primitives combine into a typical task/kanban card.

Interactive Reference

Live showroom

Need the full visual surface?

Screenshots do not scale well across every component, state, and variant. For the real interactive reference, import the package and launch DSShowcaseRoot().

Best for exploring:

variants, states, categories, and real app examples in one place.

Examples

Task card

Copy into your app and adapt to your model.

swift
struct TaskCard: View {
    @Binding var task: Task

    var body: some View {
        DSCard(variant: .outlined) {
            VStack(alignment: .leading, spacing: DSSpacing.sm) {
                HStack {
                    DSCheckbox(task.title, isChecked: $task.isDone)
                    Spacer()
                    DSStatusLabel(task.isDone ? "Done" : "In progress",
                                  style: task.isDone ? .success : .info)
                }
                if let note = task.note {
                    DSText(note, style: .bodyMuted)
                }
                HStack {
                    DSAvatarGroup(items: task.assignees.map { (initials: $0.initials, tint: $0.color) })
                    Spacer()
                    DSBadge(task.dueLabel, variant: .outline, size: .sm)
                }
            }
        }
    }
}

Related Components

CardCheckboxStatusLabelAvatarGroup