Skip to content
HyperUI for Flutter
HyperUI for Flutter requires the Style package — this site itself ships no pub package.

Blog Cards

Ported from HyperUI’s Blog Cards — see Attribution.

Bordered with image, date, title and excerpt, shadow on hover

Section titled “Bordered with image, date, title and excerpt, shadow on hover”

Includes a dark: variant — toggle the site theme (top right) to preview it.

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


  static const _photoUrl =
      'https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&q=80&w=1160';


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-md p-6',
      child: Style(
        'overflow-hidden rounded-lg shadow-sm transition hover:shadow-lg dark:shadow-gray-700/25',
        children: [
          Style(
            'h-56 w-full object-cover',
            child: Image.network(_photoUrl, fit: BoxFit.cover),
          ),
          Style(
            'bg-white p-4 sm:p-6 dark:bg-gray-900',
            children: const [
              Style(
                'block text-xs text-gray-500 dark:text-gray-400',
                child: Text('10th Oct 2022'),
              ),
              Style(
                'mt-0.5 text-lg text-gray-900 dark:text-white',
                child: Text('How to position your furniture for positivity'),
              ),
              Style(
                'mt-2 line-clamp-3 text-sm/relaxed text-gray-500 dark:text-gray-400',
                child: Text(
                  'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus '
                  'pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis '
                  'quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius '
                  'atque dignissimos. Molestias explicabo corporis voluptatem?',
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Floating image with title and excerpt

Section titled “Floating image with title and excerpt”

Includes a dark: variant — toggle the site theme (top right) to preview it.

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


  static const _photoUrl =
      'https://images.unsplash.com/photo-1631451095765-2c91616fc9e6?auto=format&fit=crop&q=80&w=1160';


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-md p-6',
      child: Style(
        'group',
        children: [
          Style(
            'h-56 w-full rounded-xl object-cover shadow-xl transition group-hover:grayscale-50 dark:shadow-gray-700/25',
            child: Image.network(_photoUrl, fit: BoxFit.cover),
          ),
          Style(
            'p-4',
            children: const [
              Style(
                'text-lg font-medium text-gray-900 dark:text-white',
                child: Text('Finding the Journey to Mordor'),
              ),
              Style(
                'mt-2 line-clamp-3 text-sm/relaxed text-gray-500 dark:text-gray-400',
                child: Text(
                  'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus '
                  'pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis '
                  'quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius '
                  'atque dignissimos. Molestias explicabo corporis voluptatem?',
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Bordered with image, title, excerpt and call to action

Section titled “Bordered with image, title, excerpt and call to action”

Includes a dark: variant — toggle the site theme (top right) to preview it.

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


  static const _photoUrl =
      'https://images.unsplash.com/photo-1600880292203-757bb62b4baf?auto=format&fit=crop&q=80&w=1160';


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-md p-6',
      child: Style(
        'overflow-hidden rounded-lg border border-gray-100 bg-white shadow-xs dark:border-gray-800 dark:bg-gray-900 dark:shadow-gray-700/25',
        children: [
          Style(
            'h-56 w-full object-cover',
            child: Image.network(_photoUrl, fit: BoxFit.cover),
          ),
          Style(
            'p-4 sm:p-6',
            children: [
              const Style(
                'text-lg font-medium text-gray-900 dark:text-white',
                child: Text('Lorem ipsum dolor sit amet consectetur adipisicing elit.'),
              ),
              const Style(
                'mt-2 line-clamp-3 text-sm/relaxed text-gray-500 dark:text-gray-400',
                child: Text(
                  'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus '
                  'pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis '
                  'quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius '
                  'atque dignissimos. Molestias explicabo corporis voluptatem?',
                ),
              ),
              Style(
                'group mt-4 inline-flex items-center gap-1 text-sm font-medium text-blue-600',
                cursor: SystemMouseCursors.click,
                children: const [
                  Text('Find out more'),
                  Style(
                    'block transition-all group-hover:ms-0.5 rtl:rotate-180',
                    child: Text('→'),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Bordered with date, title and tags

Section titled “Bordered with date, title and tags”

Includes a dark: variant — toggle the site theme (top right) to preview it.

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


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-md p-6',
      child: Style(
        'rounded-[10px] border border-gray-200 bg-white px-4 pt-12 pb-4 dark:border-gray-700 dark:bg-gray-900',
        children: [
          const Style(
            'block text-xs text-gray-500 dark:text-gray-400',
            child: Text('10th Oct 2022'),
          ),
          const Style(
            'mt-0.5 text-lg font-medium text-gray-900 dark:text-white',
            child: Text('How to center an element using JavaScript and jQuery'),
          ),
          Style(
            'mt-4 flex flex-wrap gap-1',
            children: const [
              Style(
                'rounded-full bg-purple-100 px-2.5 py-0.5 text-xs whitespace-nowrap text-purple-600 dark:bg-purple-600 dark:text-purple-100',
                display: DisplayType.inline,
                child: Text('Snippet'),
              ),
              Style(
                'rounded-full bg-purple-100 px-2.5 py-0.5 text-xs whitespace-nowrap text-purple-600 dark:bg-purple-600 dark:text-purple-100',
                display: DisplayType.inline,
                child: Text('JavaScript'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Bordered with icon, title, excerpt and call to action, shadow on hover

Section titled “Bordered with icon, title, excerpt and call to action, shadow on hover”

Includes a dark: variant — toggle the site theme (top right) to preview it.

class CurrentColorIcon extends StatelessWidget
    implements StyleReplacedElementWrapper {
  const CurrentColorIcon(this.svg, {super.key});


  final String svg;


  @override
  Widget build(BuildContext context) {
    final color = IconTheme.of(context).color ?? const Color(0xFF000000);
    return SvgPicture.string(svg, theme: SvgTheme(currentColor: color));
  }
}


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


  static const _academicCapSvg =
      '''<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M12 14l9-5-9-5-9 5 9 5z"/><path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"/></svg>''';


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-md p-6',
      child: Style(
        'rounded-lg border border-gray-100 bg-white p-4 shadow-xs transition hover:shadow-lg sm:p-6 dark:border-gray-800 dark:bg-gray-900 dark:shadow-gray-700/25',
        children: [
          Style(
            'inline-block rounded-sm bg-blue-600 p-2 text-white dark:bg-blue-700',
            child: Style('size-6', child: CurrentColorIcon(_academicCapSvg)),
          ),
          const Style(
            'mt-0.5 text-lg font-medium text-gray-900 dark:text-white',
            child: Text('Lorem ipsum dolor sit, amet consectetur adipisicing elit.'),
          ),
          const Style(
            'mt-2 line-clamp-3 text-sm/relaxed text-gray-500 dark:text-gray-400',
            child: Text(
              'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus '
              'pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis '
              'quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius '
              'atque dignissimos. Molestias explicabo corporis voluptatem?',
            ),
          ),
          Style(
            'group mt-4 inline-flex items-center gap-1 text-sm font-medium text-blue-600',
            cursor: SystemMouseCursors.click,
            children: const [
              Text('Find out more'),
              Style(
                'block transition-all group-hover:ms-0.5 rtl:rotate-180',
                child: Text('→'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Artistic with rotated date, image, title, excerpt and call to action, shadow on hover

Section titled “Artistic with rotated date, image, title, excerpt and call to action, shadow on hover”

Includes a dark: variant — toggle the site theme (top right) to preview it.

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


  static const _photoUrl =
      'https://images.unsplash.com/photo-1609557927087-f9cf8e88de18?auto=format&fit=crop&q=80&w=1160';


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-3xl p-6',
      child: Style(
        'flex bg-white transition hover:shadow-xl',
        children: [
          Style(
            'rotate-180 p-2 [writing-mode:vertical-lr]',
            child: Style(
              'flex items-center justify-between gap-4 text-xs font-bold text-gray-900 uppercase',
              children: const [
                Text('2022'),
                Style('w-px flex-1 bg-gray-900/10'),
                Text('Oct 10'),
              ],
            ),
          ),
          Style(
            'hidden sm:block sm:basis-56',
            child: Style(
              'aspect-square h-full w-full object-cover',
              child: Image.network(_photoUrl, fit: BoxFit.cover),
            ),
          ),
          Style(
            'flex flex-1 flex-col justify-between',
            children: [
              Style(
                'border-s border-gray-900/10 p-4 sm:border-l-transparent sm:p-6',
                children: const [
                  Style(
                    'font-bold text-gray-900 uppercase',
                    child: Text('Finding the right guitar for your style - 5 tips'),
                  ),
                  Style(
                    'mt-2 line-clamp-3 text-sm/relaxed text-gray-700',
                    child: Text(
                      'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus '
                      'pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis '
                      'quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius '
                      'atque dignissimos. Molestias explicabo corporis voluptatem?',
                    ),
                  ),
                ],
              ),
              Style(
                'sm:flex sm:items-end sm:justify-end',
                child: const Style(
                  'block bg-yellow-300 px-5 py-3 text-center text-xs font-bold text-gray-900 uppercase transition hover:bg-yellow-400',
                  cursor: SystemMouseCursors.click,
                  child: Text('Read Blog'),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Background image with overlay containing date, title and excerpt

Section titled “Background image with overlay containing date, title and excerpt”
class BlogCards7Example extends StatelessWidget {
  const BlogCards7Example({super.key});


  static const _photoUrl =
      'https://images.unsplash.com/photo-1661956602116-aa6865609028?auto=format&fit=crop&q=80&w=1160';


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-md p-6',
      child: Style(
        'relative overflow-hidden rounded-lg shadow-sm transition hover:shadow-lg',
        children: [
          Style(
            'absolute inset-0 h-full w-full object-cover',
            child: Image.network(_photoUrl, fit: BoxFit.cover),
          ),
          Style(
            'relative bg-linear-to-t from-gray-900/50 to-gray-900/25 pt-32 sm:pt-48 lg:pt-64',
            child: Style(
              'p-4 sm:p-6',
              children: const [
                Style(
                  'block text-xs text-white/90',
                  child: Text('10th Oct 2022'),
                ),
                Style(
                  'mt-0.5 text-lg text-white',
                  child: Text('How to position your furniture for positivity'),
                ),
                Style(
                  'mt-2 line-clamp-3 text-sm/relaxed text-white/95',
                  child: Text(
                    'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus '
                    'pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis '
                    'quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius '
                    'atque dignissimos. Molestias explicabo corporis voluptatem?',
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}