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

Team Sections

Ported from HyperUI’s Team Sections — see Attribution.

Base

Section titled “Base”

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));
  }
}


const _linkedInSvg =
    '''<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z" clip-rule="evenodd"/></svg>''';


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


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


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8',
      child: Style(
        'grid grid-cols-1 gap-8 md:grid-cols-3',
        children: [
          Style.empty(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Style(
                  'aspect-video rounded-lg object-cover',
                  child: Image.network(_photoUrl, fit: BoxFit.cover),
                ),
                Style(
                  'mt-4 flex items-center justify-between gap-4',
                  children: [
                    Style.empty(
                      children: const [
                        Style(
                          'text-lg/tight font-semibold text-gray-900 dark:text-white',
                          child: Text('Eric Johnson'),
                        ),
                        Style(
                          'mt-0.5 text-sm text-gray-700 dark:text-gray-200',
                          child: Text('Product Designer'),
                        ),
                      ],
                    ),
                    Style(
                      'text-[#0072b1] transition-opacity hover:opacity-90 dark:text-white',
                      cursor: SystemMouseCursors.click,
                      children: [
                        Style('sr-only', child: Text('LinkedIn')),
                        Style(
                          'size-7',
                          child: CurrentColorIcon(_linkedInSvg),
                        ),
                      ],
                    ),
                  ],
                ),
              ],
            ),
          ),
          Style.empty(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Style(
                  'aspect-video rounded-lg object-cover',
                  child: Image.network(_photoUrl, fit: BoxFit.cover),
                ),
                Style(
                  'mt-4 flex items-center justify-between gap-4',
                  children: [
                    Style.empty(
                      children: const [
                        Style(
                          'text-lg/tight font-semibold text-gray-900 dark:text-white',
                          child: Text('Eric Johnson'),
                        ),
                        Style(
                          'mt-0.5 text-sm text-gray-700 dark:text-gray-200',
                          child: Text('Product Designer'),
                        ),
                      ],
                    ),
                    Style(
                      'text-[#0072b1] transition-opacity hover:opacity-90 dark:text-white',
                      cursor: SystemMouseCursors.click,
                      children: [
                        Style('sr-only', child: Text('LinkedIn')),
                        Style(
                          'size-7',
                          child: CurrentColorIcon(_linkedInSvg),
                        ),
                      ],
                    ),
                  ],
                ),
              ],
            ),
          ),
          Style.empty(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Style(
                  'aspect-video rounded-lg object-cover',
                  child: Image.network(_photoUrl, fit: BoxFit.cover),
                ),
                Style(
                  'mt-4 flex items-center justify-between gap-4',
                  children: [
                    Style.empty(
                      children: const [
                        Style(
                          'text-lg/tight font-semibold text-gray-900 dark:text-white',
                          child: Text('Eric Johnson'),
                        ),
                        Style(
                          'mt-0.5 text-sm text-gray-700 dark:text-gray-200',
                          child: Text('Product Designer'),
                        ),
                      ],
                    ),
                    Style(
                      'text-[#0072b1] transition-opacity hover:opacity-90 dark:text-white',
                      cursor: SystemMouseCursors.click,
                      children: [
                        Style('sr-only', child: Text('LinkedIn')),
                        Style(
                          'size-7',
                          child: CurrentColorIcon(_linkedInSvg),
                        ),
                      ],
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Base with description

Section titled “Base with description”

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));
  }
}


const _linkedInSvg =
    '''<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z" clip-rule="evenodd"/></svg>''';


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


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


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8',
      child: Style(
        'grid grid-cols-1 gap-8 md:grid-cols-3',
        children: [
          Style.empty(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Style(
                  'aspect-video rounded-lg object-cover',
                  child: Image.network(_photoUrl, fit: BoxFit.cover),
                ),
                Style(
                  'mt-4',
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      Style(
                        'flex items-center justify-between gap-4',
                        children: [
                          Style.empty(
                            children: const [
                              Style(
                                'text-lg/tight font-semibold text-gray-900 dark:text-white',
                                child: Text('Eric Johnson'),
                              ),
                              Style(
                                'mt-0.5 text-sm text-gray-700 dark:text-gray-200',
                                child: Text('Product Designer'),
                              ),
                            ],
                          ),
                          Style(
                            'text-[#0072b1] transition-opacity hover:opacity-90 dark:text-white',
                            cursor: SystemMouseCursors.click,
                            children: [
                              Style('sr-only', child: Text('LinkedIn')),
                              Style(
                                'size-7',
                                child: CurrentColorIcon(_linkedInSvg),
                              ),
                            ],
                          ),
                        ],
                      ),
                      const Style(
                        'mt-2 text-pretty text-gray-700 dark:text-gray-200',
                        child: Text(
                          'Lorem ipsum dolor sit amet consectetur adipisicing elit. '
                          'Impedit, placeat facere? Iste nostrum odio magnam?',
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Style.empty(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Style(
                  'aspect-video rounded-lg object-cover',
                  child: Image.network(_photoUrl, fit: BoxFit.cover),
                ),
                Style(
                  'mt-4',
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      Style(
                        'flex items-center justify-between gap-4',
                        children: [
                          Style.empty(
                            children: const [
                              Style(
                                'text-lg/tight font-semibold text-gray-900 dark:text-white',
                                child: Text('Eric Johnson'),
                              ),
                              Style(
                                'mt-0.5 text-sm text-gray-700 dark:text-gray-200',
                                child: Text('Product Designer'),
                              ),
                            ],
                          ),
                          Style(
                            'text-[#0072b1] transition-opacity hover:opacity-90 dark:text-white',
                            cursor: SystemMouseCursors.click,
                            children: [
                              Style('sr-only', child: Text('LinkedIn')),
                              Style(
                                'size-7',
                                child: CurrentColorIcon(_linkedInSvg),
                              ),
                            ],
                          ),
                        ],
                      ),
                      const Style(
                        'mt-2 text-pretty text-gray-700 dark:text-gray-200',
                        child: Text(
                          'Lorem ipsum dolor sit amet consectetur adipisicing elit. '
                          'Impedit, placeat facere? Iste nostrum odio magnam?',
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Style.empty(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Style(
                  'aspect-video rounded-lg object-cover',
                  child: Image.network(_photoUrl, fit: BoxFit.cover),
                ),
                Style(
                  'mt-4',
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      Style(
                        'flex items-center justify-between gap-4',
                        children: [
                          Style.empty(
                            children: const [
                              Style(
                                'text-lg/tight font-semibold text-gray-900 dark:text-white',
                                child: Text('Eric Johnson'),
                              ),
                              Style(
                                'mt-0.5 text-sm text-gray-700 dark:text-gray-200',
                                child: Text('Product Designer'),
                              ),
                            ],
                          ),
                          Style(
                            'text-[#0072b1] transition-opacity hover:opacity-90 dark:text-white',
                            cursor: SystemMouseCursors.click,
                            children: [
                              Style('sr-only', child: Text('LinkedIn')),
                              Style(
                                'size-7',
                                child: CurrentColorIcon(_linkedInSvg),
                              ),
                            ],
                          ),
                        ],
                      ),
                      const Style(
                        'mt-2 text-pretty text-gray-700 dark:text-gray-200',
                        child: Text(
                          'Lorem ipsum dolor sit amet consectetur adipisicing elit. '
                          'Impedit, placeat facere? Iste nostrum odio magnam?',
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Small

Section titled “Small”

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

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


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


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8',
      child: Style(
        'grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-6',
        children: [
          Style.empty(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Style(
                  'aspect-square rounded-full object-cover',
                  child: Image.network(_photoUrl, fit: BoxFit.cover),
                ),
                Style(
                  'mt-4 text-center',
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: const [
                      Style(
                        'text-lg/tight font-semibold text-gray-900 dark:text-white',
                        child: Text('Eric Johnson'),
                      ),
                      Style(
                        'mt-0.5 text-sm text-gray-700 dark:text-gray-200',
                        child: Text('Product Designer'),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Style.empty(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Style(
                  'aspect-square rounded-full object-cover',
                  child: Image.network(_photoUrl, fit: BoxFit.cover),
                ),
                Style(
                  'mt-4 text-center',
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: const [
                      Style(
                        'text-lg/tight font-semibold text-gray-900 dark:text-white',
                        child: Text('Eric Johnson'),
                      ),
                      Style(
                        'mt-0.5 text-sm text-gray-700 dark:text-gray-200',
                        child: Text('Product Designer'),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Style.empty(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Style(
                  'aspect-square rounded-full object-cover',
                  child: Image.network(_photoUrl, fit: BoxFit.cover),
                ),
                Style(
                  'mt-4 text-center',
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: const [
                      Style(
                        'text-lg/tight font-semibold text-gray-900 dark:text-white',
                        child: Text('Eric Johnson'),
                      ),
                      Style(
                        'mt-0.5 text-sm text-gray-700 dark:text-gray-200',
                        child: Text('Product Designer'),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Style.empty(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Style(
                  'aspect-square rounded-full object-cover',
                  child: Image.network(_photoUrl, fit: BoxFit.cover),
                ),
                Style(
                  'mt-4 text-center',
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: const [
                      Style(
                        'text-lg/tight font-semibold text-gray-900 dark:text-white',
                        child: Text('Eric Johnson'),
                      ),
                      Style(
                        'mt-0.5 text-sm text-gray-700 dark:text-gray-200',
                        child: Text('Product Designer'),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Style.empty(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Style(
                  'aspect-square rounded-full object-cover',
                  child: Image.network(_photoUrl, fit: BoxFit.cover),
                ),
                Style(
                  'mt-4 text-center',
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: const [
                      Style(
                        'text-lg/tight font-semibold text-gray-900 dark:text-white',
                        child: Text('Eric Johnson'),
                      ),
                      Style(
                        'mt-0.5 text-sm text-gray-700 dark:text-gray-200',
                        child: Text('Product Designer'),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Style.empty(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Style(
                  'aspect-square rounded-full object-cover',
                  child: Image.network(_photoUrl, fit: BoxFit.cover),
                ),
                Style(
                  'mt-4 text-center',
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: const [
                      Style(
                        'text-lg/tight font-semibold text-gray-900 dark:text-white',
                        child: Text('Eric Johnson'),
                      ),
                      Style(
                        'mt-0.5 text-sm text-gray-700 dark:text-gray-200',
                        child: Text('Product Designer'),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}