CardImage | CoUI
LogoCoUI

CardImage

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

CardImage#

CoCardImage 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(
      [
        CoCardImage(
          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: CoCardImage(
        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#

CoCardImage(
  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.
direction CoreAxis? vertical Layout direction.
hoverScale double? 1.05 Image scale on hover.
normalScale double? 1.0 Idle image scale.
backgroundColor Color? / String? transparent Image container background.
borderColor Color? / String? transparent Image container border.
gap double? 12 Gap between image and text slot (logical px).

Theme#

Override defaults through CoreCardImageTheme:

const CoreComponentTheme(
  cardImage: CoreCardImageTheme(
    direction: CoreAxis.horizontal,
    hoverScale: 1.1,
    gap: 16,
  ),
);