CardImage | CoUI
LogoCoUI

CardImage

Interactive card with an image thumbnail and optional title / subtitle / leading / trailing slots.

CardImage#

CardImage pairs an image thumbnail with a text slot (title, subtitle, leading, trailing) in a clickable card. Hovering scales the image from normalScale to hoverScale; the [direction] parameter switches between a vertical (image on top) and horizontal (image beside text) layout.

Web
Mountain View
Captured at sunrise
Flutter
Loading Flutter... 
class CardImageDefaultExample extends StatelessComponent {
  const CardImageDefaultExample({super.key});

  @override
  Component build(BuildContext context) {
    return div(
      [
        CardImage(
          image: img(
            src: 'https://picsum.photos/seed/coui/240/160',
            classes: 'block object-cover',
            styles: Styles(
              raw: const {
                'width': '240px',
                'height': '160px',
                'margin': '0',
              },
            ),
          ),
          title: Component.text('Mountain View'),
          subtitle: Component.text('Captured at sunrise'),
          onPressed: () {},
        ),
      ],
      styles: Styles(raw: const {'width': '240px'}),
    );
  }
}

class CardImageDefaultExample extends StatelessWidget {
  const CardImageDefaultExample({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 240,
      child: CardImage(
        image: Image.network(
          'https://picsum.photos/seed/coui/240/160',
          width: 240,
          height: 160,
          fit: BoxFit.cover,
        ),
        title: const Text('Mountain View'),
        subtitle: const Text('Captured at sunrise'),
        onPressed: () {},
      ),
    );
  }
}

Import#

import 'package:coui_flutter/coui_flutter.dart';

import 'package:coui_web/coui_web.dart';
import 'package:jaspr/jaspr.dart';

Basic usage#

CardImage(
  image: Image.network('https://picsum.photos/240/160'),
  title: const Text('Mountain View'),
  subtitle: const Text('Captured at sunrise'),
  onPressed: () {},
)

Props#

PropTypeDefaultDescription
image Widget / Component (required) — Primary thumbnail.
title Widget? / Component? null Title slot.
subtitle Widget? / Component? null Subtitle below title.
leading Widget? / Component? null Leading slot (e.g. icon).
trailing Widget? / Component? null Trailing slot.
onPressed VoidCallback? null Click / tap callback.
enabled bool? null Force-enables/disables the click area.
cardImageStyle CoreCardImageStyle? null Chrome / dimensional override slot. See CoreCardImageStyle fields below.

CoreCardImageStyle fields#

FieldTypeDefaultDescription
direction CoreAxis? CoreCardImageStyle.defaultDirection (vertical) Layout direction.
hoverScale double? CoreCardImageStyle.defaultHoverScale (1.05) Image scale on hover.
normalScale double? CoreCardImageStyle.defaultNormalScale (1.0) Idle image scale.
backgroundColor CoreColor? null (transparent) Image container background.
borderColor CoreColor? null (transparent) Image container border.
imageContentGapStyle CoreGapStyle? CoreCardImageStyle.defaultImageContentGapStyle (size: 12) Nested gap slot for the image → text spacer. Forwarded to Gap(gapStyle: …).

Theme#

Override defaults through CoreCardImageTheme:

const CoreComponentTheme(
  cardImage: CoreCardImageTheme(
    style: CoreCardImageStyle(
      direction: CoreAxis.horizontal,
      hoverScale: 1.1,
      imageContentGapStyle: CoreGapStyle(size: 16),
    ),
  ),
);