🚧 Under Construction

This component documentation is currently being developed. Some features may be incomplete.

Splash Card Header

View in Pattern Lab

HTML Markup

<header class="hoo-splashcard-header" role="presentation">
    <img src="" class="hoo-splashcard-img">
</header>

Overview

The Splash Card Header component provides the visual top section for Teams Splash Cards. It typically contains a prominent image that helps identify the feature or content being highlighted.

Features

  • Flex display for content alignment
  • Consistent 1rem padding
  • Contains the splash card image
  • Role=“presentation” for accessibility
  • Semantic header element

Usage

Use the Splash Card Header component for:

  • Feature or app logos
  • Illustrative images that represent a concept
  • Welcome graphics
  • Product or service imagery
  • Branded header elements

SCSS Imports

Main Component
@n8d/htwoo-core/components/cards