HeroSection | CoUI
LogoCoUI

HeroSection

배경 이미지·오버레이·중앙 정렬 콘텐츠를 가진 랜딩 페이지 히어로 영역

HeroSection#

랜딩 페이지 최상단의 대형 히어로 블록입니다. 배경색 + 배경 이미지 + 반투명 오버레이 + 중앙 정렬 콘텐츠의 조합을 하나의 컴포넌트로 제공합니다.

Live Preview#

Web
Welcome to CoUI
Cross-platform design system for Flutter and Jaspr.
Flutter
Loading Flutter... 
class HeroSectionDefaultExample extends StatelessComponent {
  const HeroSectionDefaultExample({super.key});

  @override
  Component build(BuildContext context) {
    final cs = context.theme.colorScheme;
    final ts = context.theme.typography;
    return div(
      [
        CoHeroSection(
          minHeight: 280,
          child: div(
            [
              div(
                [Component.text('Welcome to CoUI')],
                classes:
                    'text-${ts.titleLarge} font-${CoreFontWeight.scale.semibold} text-${cs.onSurface}',
              ),
              div(
                [
                  Component.text(
                    'Cross-platform design system for Flutter and Jaspr.',
                  ),
                ],
                classes:
                    'text-${ts.bodyMedium} text-${cs.onSurfaceVariant} text-center',
                styles: const Styles(raw: {'margin-top': '12px'}),
              ),
            ],
            classes: 'flex flex-col items-center',
          ),
        ),
      ],
      styles: const Styles(raw: {'height': '280px', 'width': '100%'}),
    );
  }
}
class HeroSectionDefaultExample extends StatelessWidget {
  const HeroSectionDefaultExample({super.key});

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return SizedBox(
      height: 280,
      child: CoHeroSection(
        minHeight: 280,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              'Welcome to CoUI',
              style: theme.typography.titleLarge.copyWith(
                color: theme.colorScheme.onSurface,
                fontWeight: FontWeight.w600,
              ),
            ),
            SizedBox(height: CoreSpace.space12),
            Text(
              'Cross-platform design system for Flutter and Jaspr.',
              textAlign: TextAlign.center,
              style: theme.typography.bodyMedium.copyWith(
                color: theme.colorScheme.onSurfaceVariant,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

사용 시기 (When to Use)#

이 컴포넌트를 사용하세요:

  • 랜딩 페이지 상단의 대형 배너/히어로 영역
  • 배경 이미지 위에 제목·설명·CTA를 중앙 정렬로 배치하고 싶을 때

대신 다른 컴포넌트를 사용하세요:

  • Banner: 짧은 공지/알림 바
  • Card: 작은 콘텐츠 블록

기본 사용법 (Basic Usage)#

CoHeroSection(
  imageUrl: 'https://example.com/bg.jpg',
  overlayColor: Color(0x99000000),
  minHeight: 400,
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Text('Welcome to CoUI', style: titleStyle),
      Text('Cross-platform design system.', style: bodyStyle),
    ],
  ),
)

Props / Parameters#

CoHeroSection#

속성타입기본값설명
childW필수중앙에 배치되는 콘텐츠 위젯/컴포넌트
backgroundColor Color? / String? surfaceContainer 배경색 override
imageUrl String? null 배경 이미지 URL (cover/center 렌더)
overlayColor Color? / String? null 이미지 위에 그려질 반투명 오버레이
minHeightdouble?400최소 높이
padding EdgeInsetsGeometry? / double? 32 내부 패딩
semanticLabel String? null 스크린리더 region label

크로스 플랫폼 차이점 (Platform Differences)#

항목FlutterWeb
클래스명CoHeroSectionCoHeroSection
child 타입WidgetComponent
padding EdgeInsetsGeometry? double? (symmetric all)
배경 이미지 DecorationImage(NetworkImage) + BoxFit.cover CSS background-image: url(...) + background-size: cover; background-position: center
overlay Positioned.fill + ColoredBox <div class="absolute inset-0">
중앙 정렬 Stack + Center + Padding flex items-center justify-center

관련 컴포넌트 (Related Components)#

  • Card: 작은 콘텐츠 블록
  • Banner: 공지/알림 바