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

CTAs

Ported from HyperUI’s CTAs — see Attribution.

Base with content and call to action on the left, image on the right

Section titled “Base with content and call to action on the left, image on the right”

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

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


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


  @override
  Widget build(BuildContext context) {
    return Style(
      'overflow-hidden bg-gray-50 sm:grid sm:grid-cols-2 dark:bg-gray-900',
      children: [
        Style(
          'p-8 md:p-12 lg:px-16 lg:py-24',
          child: Style(
            'mx-auto max-w-xl text-center ltr:sm:text-left rtl:sm:text-right',
            children: const [
              Style(
                'text-2xl font-bold text-gray-900 md:text-3xl dark:text-white',
                child: Text(
                  'Lorem, ipsum dolor sit amet consectetur adipisicing elit',
                ),
              ),
              Style(
                'hidden text-gray-500 md:mt-4 md:block dark:text-gray-300',
                child: Text(
                  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '
                  'Et, egestas tempus tellus etiam sed. Quam a scelerisque '
                  'amet ullamcorper eu enim et fermentum, augue. Aliquet '
                  'amet volutpat quisque ut interdum tincidunt duis.',
                ),
              ),
              Style(
                'mt-4 md:mt-8',
                child: Style(
                  'inline-block rounded-sm bg-emerald-600 px-12 py-3 text-sm font-medium text-white transition hover:bg-emerald-700 focus:ring-2 focus:ring-yellow-400 focus:outline-hidden',
                  cursor: SystemMouseCursors.click,
                  child: Text('Get Started Today'),
                ),
              ),
            ],
          ),
        ),
        Style(
          'h-56 w-full object-cover sm:h-full',
          child: Image.network(_photoUrl, fit: BoxFit.cover),
        ),
      ],
    );
  }
}

Newsletter sign up form with centered content and form

Section titled “Newsletter sign up form with centered content and form”
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 _signUpArrowSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>''';


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


  @override
  Widget build(BuildContext context) {
    final baseStyle = Theme.of(context).textTheme.bodyLarge ?? const TextStyle();


    return Style(
      'bg-gray-50',
      child: Style(
        'p-8 md:p-12 lg:px-16 lg:py-24',
        children: [
          Style(
            'mx-auto max-w-lg text-center',
            children: const [
              Style(
                'text-2xl font-bold text-gray-900 md:text-3xl',
                child: Text(
                  'Lorem, ipsum dolor sit amet consectetur adipisicing elit',
                ),
              ),
              Style(
                'hidden text-gray-500 sm:mt-4 sm:block',
                child: Text(
                  'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae '
                  'dolor officia blanditiis repellat in, vero, aperiam porro ipsum '
                  'laboriosam consequuntur exercitationem incidunt tempora nisi?',
                ),
              ),
            ],
          ),
          Style(
            'mx-auto mt-8 max-w-xl',
            child: Style(
              'sm:flex sm:gap-4',
              children: [
                Style(
                  'sm:flex-1',
                  children: [
                    const Style('sr-only', child: Text('Email')),
                    Style(
                      'w-full rounded-md border-gray-200 bg-white p-3 text-gray-700 shadow-xs transition focus:border-white focus:ring-2 focus:ring-yellow-400 focus:outline-hidden',
                      child: TextFormField(
                        decoration: const InputDecoration(
                          hintText: 'Email address',
                        ),
                        style: baseStyle.copyWith(
                          fontSize: 16,
                          height: 24 / 16,
                          color: const Color(0xFF374151),
                        ),
                      ),
                    ),
                  ],
                ),
                Style(
                  'group mt-4 flex w-full items-center justify-center gap-2 rounded-md bg-rose-600 px-5 py-3 text-white transition focus:ring-2 focus:ring-yellow-400 focus:outline-hidden sm:mt-0 sm:w-auto',
                  children: [
                    const Style(
                      'text-sm font-medium',
                      display: DisplayType.inline,
                      child: Text('Sign Up'),
                    ),
                    Style(
                      'size-5 shadow-sm rtl:rotate-180',
                      child: CurrentColorIcon(_signUpArrowSvg),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Base with content can call to action on the left, offset image on the right

Section titled “Base with content can call to action on the left, offset image on the right”

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

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


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


  @override
  Widget build(BuildContext context) {
    return Style(
      'overflow-hidden bg-gray-50 sm:grid sm:grid-cols-2 sm:items-center dark:bg-gray-900',
      children: [
        Style(
          'p-8 md:p-12 lg:px-16 lg:py-24',
          child: Style(
            'mx-auto max-w-xl text-center ltr:sm:text-left rtl:sm:text-right',
            children: const [
              Style(
                'text-2xl font-bold text-gray-900 md:text-3xl dark:text-white',
                child: Text(
                  'Lorem, ipsum dolor sit amet consectetur adipisicing elit',
                ),
              ),
              Style(
                'hidden text-gray-500 md:mt-4 md:block dark:text-gray-400',
                child: Text(
                  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '
                  'Et, egestas tempus tellus etiam sed. Quam a scelerisque '
                  'amet ullamcorper eu enim et fermentum, augue. Aliquet '
                  'amet volutpat quisque ut interdum tincidunt duis.',
                ),
              ),
              Style(
                'mt-4 md:mt-8',
                child: Style(
                  'inline-block rounded-sm bg-emerald-600 px-12 py-3 text-sm font-medium text-white transition hover:bg-emerald-700 focus:ring-2 focus:ring-yellow-400 focus:outline-hidden',
                  cursor: SystemMouseCursors.click,
                  child: Text('Get Started Today'),
                ),
              ),
            ],
          ),
        ),
        Style(
          'h-full w-full object-cover sm:h-[calc(100%-2rem)] sm:self-end sm:rounded-ss-[30px] md:h-[calc(100%-4rem)] md:rounded-ss-[60px]',
          child: Image.network(_photoUrl, fit: BoxFit.cover),
        ),
      ],
    );
  }
}

Content and call to action in block color on the left, grid of images on the right

Section titled “Content and call to action in block color on the left, grid of images on the right”

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

const _photoUrl1 =
    'https://images.unsplash.com/photo-1621274790572-7c32596bc67f?auto=format&fit=crop&q=80&w=1160';
const _photoUrl2 =
    'https://images.unsplash.com/photo-1567168544813-cc03465b4fa8?auto=format&fit=crop&q=80&w=1160';


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


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-screen-2xl px-4 py-8 sm:px-6 lg:px-8',
      child: Style(
        'grid grid-cols-1 gap-4 md:grid-cols-2',
        children: [
          Style(
            'bg-gray-100 p-8 md:p-12 lg:px-16 lg:py-24 dark:bg-gray-800',
            child: Style(
              'mx-auto max-w-xl text-center',
              children: const [
                Style(
                  'text-2xl font-bold text-gray-900 md:text-3xl dark:text-white',
                  child: Text(
                    'Lorem, ipsum dolor sit amet consectetur adipisicing elit',
                  ),
                ),
                Style(
                  'hidden text-gray-700 sm:mt-4 sm:block dark:text-gray-200',
                  child: Text(
                    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '
                    'Et, egestas tempus tellus etiam sed. Quam a scelerisque '
                    'amet ullamcorper eu enim et fermentum, augue. Aliquet '
                    'amet volutpat quisque ut interdum tincidunt duis.',
                  ),
                ),
                Style(
                  'mt-4 md:mt-8',
                  child: Style(
                    'inline-block rounded-sm border border-blue-600 bg-blue-600 px-12 py-3 text-sm font-medium text-white transition-colors hover:bg-transparent hover:text-blue-600 dark:border-blue-300 dark:bg-blue-300 dark:text-gray-900 dark:hover:text-blue-300',
                    cursor: SystemMouseCursors.click,
                    child: Text('Get Started Today'),
                  ),
                ),
              ],
            ),
          ),
          Style(
            'grid grid-cols-2 gap-4 md:grid-cols-1 lg:grid-cols-2',
            children: [
              Style(
                'h-40 w-full object-cover sm:h-56 md:h-full',
                child: Image.network(_photoUrl1, fit: BoxFit.cover),
              ),
              Style(
                'h-40 w-full object-cover sm:h-56 md:h-full',
                child: Image.network(_photoUrl2, fit: BoxFit.cover),
              ),
            ],
          ),
        ],
      ),
    );
  }
}