Layout

ccm-hero

Props

NameTypeDefaultDescription

browStringBrowSmall text above the main title

titleStringHeroMain heading text

taglineStringTaglineSubtitle or descriptive text

sizeStringlControls padding using design tokens (xs, s, m, l, xl, 2xl, 3xl)

backgroundColorStringtransparentCSS custom property name for background color

variantStringdefaultLayout variant ('default' has 16/7 aspect ratio, 'minimal' removes aspect ratio)

hideTopBoolean-Hide the top topbar section

hideBottomBooleantrueHide the bottom footer section

Slots

default

Main hero content (replaces default hgroup if provided)

footer

Bottom section content

Examples

Default Hero

<ccm-hero 
  brow="Welcome"
  title="Component Library" 
  tagline="Building consistent, scalable interfaces"
/>

Minimal Variant

<ccm-hero 
  variant="minimal"
  size="m"
  background-color="color-primary-tint-95"
  title="Compact Hero"
  tagline="No aspect ratio constraints"
/>

Custom Content

<ccm-hero>
  <div class="custom-hero-content">
    <h1>Custom Layout</h1>
    <p>Use the default slot for complete control over hero content.</p>
    <button>Call to Action</button>
  </div>
</ccm-hero>