PBCard {
  Text("Card Content").pbFont(.body)
 }

VStack(alignment: .leading, spacing: Spacing.small) {
  PBCard {
    Text(text).pbFont(.body)
  }

  PBCard(backgroundColor: .background(.light)) {
    Text("Light").pbFont(.body, color: .text(.light))
  }

  PBCard(backgroundColor: .background(.dark)) {
    Text("Dark").pbFont(.body, color: .text(.light))
  }

  PBCard(backgroundColor: .product(.product1, category: .background)) {
    Text("Product 1 Background").pbFont(.body, color: .white)
  }

  PBCard(backgroundColor: .product(.product7, category: .highlight)) {
    Text("Product 7 Highlight").pbFont(.body, color: .white)
  }

  PBCard(backgroundColor: .product(.product2, category: .highlight)) {
    Text("Product 2 Highlight").pbFont(.body, color: .white)
  }
 }

VStack(spacing: Spacing.small) {
  PBCard(highlight: .side(.product(.product6, category: .highlight))) {
    Text("Side Position & Product 6 Highlight Color").pbFont(.body)
  }

  PBCard(highlight: .top(.status(.warning))) {
    Text("Top Position & Warning Color").pbFont(.body)
  }

  PBCard(highlight: .side(.category(.category2))) {
    Text("Side Position & Category 2 Color").pbFont(.body)
  }
 }

Stack(spacing: Spacing.small) {
  PBCard(padding: Spacing.none) {
    PBCardHeader(color: .category(.category1)) {
      Text("Category 1").pbFont(.body, color: .white).padding(Spacing.small)
    }
      Text("Body").pbFont(.body, color: .text(.default)).padding(Spacing.small)
  }

  PBCard(padding: Spacing.none) {
    PBCardHeader(color: .category(.category3)) {
      Text("Category 3").pbFont(.body, color: .black).padding(Spacing.small)
    }
    Text("Body").pbFont(.body, color: .text(.default)).padding(Spacing.small)
  }

  PBCard(padding: Spacing.none) {
    PBCardHeader(color: .product(.product2, category: .background)) {
      Text("Product 2 Background").pbFont(.body, color: .white).padding(Spacing.small)
    }
      Text("Body").pbFont(.body, color: .text(.default)).padding(Spacing.small)
  }

  PBCard(padding: Spacing.none) {
    PBCardHeader(color: .product(.product6, category: .background)) {
      Text("Product 6 Background").pbFont(.body, color: .white).padding(Spacing.small)
    }
      Text("Body").pbFont(.body, color: .text(.default)).padding(Spacing.small)
  }
}

VStack(spacing: Spacing.small) {
  PBCard(padding: Spacing.none) {
    Text("None").pbFont(.body)
  }

  PBCard(padding: Spacing.xxSmall) {
    Text("XX Small").pbFont(.body)
  }

  PBCard(padding: Spacing.xSmall) {
    Text("X Small").pbFont(.body)
  }

  PBCard(padding: Spacing.small) {
    Text("Small").pbFont(.body)
  }

  PBCard(padding: Spacing.medium) {
    Text("Medium").pbFont(.body)
  }

  PBCard(padding: Spacing.large) {
    Text("Large").pbFont(.body)
  }

  PBCard(padding: Spacing.xLarge) {
    Text("X Large").pbFont(.body)
  }
 }

VStack(spacing: Spacing.small) {
  PBCard(shadow: Shadow.deep) {
    Text("Deep").pbFont(.body)
  }

  PBCard(shadow: Shadow.deeper) {
    Text("Deeper").pbFont(.body)
  }

  PBCard(shadow: Shadow.deepest) {
    Text("Deepest").pbFont(.body)
  }

  PBCard(shadow: Shadow.none) {
    Text("None").pbFont(.body)
  }
 }

PBCard(padding: Spacing.none) {
  Text("Header").pbFont(.body).padding(Spacing.small)
  PBSectionSeparator()
  Text(loremIpsum).pbFont(.body).padding(Spacing.small)
  PBSectionSeparator()
  Text("Footer").pbFont(.body).padding(Spacing.small)
 }

PBCard(border: false) {
  Text(text).pbFont(.body)
 }

VStack(spacing: Spacing.small) {
  PBCard(borderRadius: BorderRadius.none) {
    Text("None").pbFont(.body)
  }

  PBCard(borderRadius: BorderRadius.xSmall) {
    Text("X Small").pbFont(.body)
  }

  PBCard(borderRadius: BorderRadius.small) {
    Text("Small").pbFont(.body)
  }

  PBCard(borderRadius: BorderRadius.medium) {
    Text("Medium").pbFont(.body)
  }

  PBCard(borderRadius: BorderRadius.large) {
    Text("Large").pbFont(.body)
  }

   PBCard(borderRadius: BorderRadius.xLarge) {
    Text("X Large").pbFont(.body)
  }

   PBCard(borderRadius: BorderRadius.rounded) {
    Text("Rounded").pbFont(.body)
  }
 }

VStack(alignment: .leading, spacing: Spacing.small) {
  PBCard {
    Text("Card Context").pbFont(.body)
  }

  PBCard(style: .selected()) {
    Text("Card Context").pbFont(.body)
  }

  PBCard(style: .error) {
    Text("Card Context").pbFont(.body)
  }
 }

Props