Stack(
  style: [Size.h(20), Size.w(32)],
  [
    Container(
      [text('1')],
      style: [BgUtil.primary, TextUtil.primaryContent, Layout.grid, Alignment.placeContentCenter, Effects.roundedBox],
    ),
    Container(
      [text('2')],
      style: [BgUtil.accent, TextUtil.accentContent, Layout.grid, Alignment.placeContentCenter, Effects.roundedBox],
    ),
    Container(
      [text('3')],
      style: [BgUtil.secondary, TextUtil.secondaryContent, Layout.grid, Alignment.placeContentCenter, Effects.roundedBox],
    ),
  ],
)

Stack(
  style: [Size.w(48)],
  [
    // Use Jaspr's primitive `img()` component.
    // Apply styling via `classes` with the `.toClasses()` extension.
    img(src: '...', alt: '...', classes: [Effects.roundedBox].toClasses()),
    img(src: '...', alt: '...', classes: [Effects.roundedBox].toClasses()),
    img(src: '...', alt: '...', classes: [Effects.roundedBox].toClasses()),
  ],
)

Stack(
  style: [const Size('size-28')], // Custom size utility
  [
    Card(
      style: [BorderUtil.border, BorderUtil.baseContent, BgUtil.base100, TextUtil.center],
      [CardBody([text('A')])],
    ),
    Card(
      style: [BorderUtil.border, BorderUtil.baseContent, BgUtil.base100, TextUtil.center],
      [CardBody([text('B')])],
    ),
    Card(
      style: [BorderUtil.border, BorderUtil.baseContent, BgUtil.base100, TextUtil.center],
      [CardBody([text('C')])],
    ),
  ],
)

Stack(
  style: [const Size('size-28'), Stack.top],
  [ /* ... Card components ... */ ],
)

Stack(
  style: [const Size('size-28'), Stack.start],
  [ /* ... Card components ... */ ],
)

Stack(
  style: [const Size('size-28'), Stack.end],
  [ /* ... Card components ... */ ],
)

Stack(
  [
    Card(
      style: [BgUtil.base200, Effects.shadowMd, TextUtil.center],
      [CardBody([text('A')])],
    ),
    Card(
      style: [BgUtil.base200, Effects.shadow, TextUtil.center],
      [CardBody([text('B')])],
    ),
    Card(
      style: [BgUtil.base200, Effects.shadowSm, TextUtil.center],
      [CardBody([text('C')])],
    ),
  ],
)

Stack(
  [
    Card(
      style: [Effects.shadowMd, BgUtil.base100],
      [
        CardBody([
          CardTitle([text('Notification 1')]),
          p([text('You have 3 unread messages. Tap here to see.')]),
        ]),
      ],
    ),
    // ... more notification cards
  ],
)