Hero Panel Style Guide

A comprehensive guide to Brandmine's hero panel system including variants, combinations, and usage guidelines.

Hero Panel Style Guide

This page demonstrates all available hero panel variants and combinations for the Brandmine design system.

Contents

Color Variants

Hero panels can use different background colors while maintaining consistent typography.

Default (Primary Dark)

Default Hero Panel

Uses primary-700 background with secondary-100 heading

html 
<div class="full-width-panel hero-panel">
  <div class="panel-content centered">
    <h1>Default Hero Panel</h1>
    <p class="hero-subtitle">Uses primary-700 background with secondary-100 heading</p>
  </div>
</div>

Primary

Primary Hero Panel

Uses a radial gradient from primary-500 to primary-700

html 
<div class="full-width-panel hero-panel hero-panel--primary">
  <div class="panel-content centered">
    <h1>Primary Hero Panel</h1>
    <p class="hero-subtitle">Uses a radial gradient from primary-500 to primary-700</p>
  </div>
</div>

Primary Light

Primary Light Hero Panel

Uses primary-500 background

html 
<div class="full-width-panel hero-panel hero-panel--primary-light">
  <div class="panel-content centered">
    <h1>Primary Light Hero Panel</h1>
    <p class="hero-subtitle">Uses primary-500 background</p>
  </div>
</div>

Primary Dark

Primary Dark Hero Panel

Uses primary-800 background

html 
<div class="full-width-panel hero-panel hero-panel--primary-dark">
  <div class="panel-content centered">
    <h1>Primary Dark Hero Panel</h1>
    <p class="hero-subtitle">Uses primary-800 background</p>
  </div>
</div>

Secondary (Orange)

Secondary Hero Panel

Uses a radial gradient from secondary-500 to secondary-700

html 
<div class="full-width-panel hero-panel hero-panel--secondary">
  <div class="panel-content centered">
    <h1>Secondary Hero Panel</h1>
    <p class="hero-subtitle">Uses a radial gradient from secondary-500 to secondary-700</p>
  </div>
</div>

Accent (Indigo)

Accent Hero Panel

Uses a radial gradient from accent-500 to accent-700

html 
<div class="full-width-panel hero-panel hero-panel--accent">
  <div class="panel-content centered">
    <h1>Accent Hero Panel</h1>
    <p class="hero-subtitle">Uses a radial gradient from accent-500 to accent-700</p>
  </div>
</div>

Light

Light Hero Panel

Uses neutral-100 background with dark text

html 
<div class="full-width-panel hero-panel hero-panel--light">
  <div class="panel-content centered">
    <h1>Light Hero Panel</h1>
    <p class="hero-subtitle">Uses neutral-100 background with dark text</p>
  </div>
</div>

Layout Variants

Control the alignment of content within hero panels.

Centered (Default)

Centered Hero Panel

Content is centered (default)

html 
<div class="full-width-panel hero-panel hero-panel--centered">
  <div class="panel-content">
    <h1>Centered Hero Panel</h1>
    <p class="hero-subtitle">Content is centered (default)</p>
  </div>
</div>

Left-Aligned

Left-Aligned Hero Panel

Content is aligned to the left

html 
<div class="full-width-panel hero-panel hero-panel--left">
  <div class="panel-content">
    <h1>Left-Aligned Hero Panel</h1>
    <p class="hero-subtitle">Content is aligned to the left</p>
  </div>
</div>

Right-Aligned

Right-Aligned Hero Panel

Content is aligned to the right

html 
<div class="full-width-panel hero-panel hero-panel--right">
  <div class="panel-content">
    <h1>Right-Aligned Hero Panel</h1>
    <p class="hero-subtitle">Content is aligned to the right</p>
  </div>
</div>

Size Variants

Control the height and padding of hero panels.

Default Size

Default Size Hero Panel

Uses standard padding and height

html 
<div class="full-width-panel hero-panel">
  <div class="panel-content centered">
    <h1>Default Size Hero Panel</h1>
    <p class="hero-subtitle">Uses standard padding and height</p>
  </div>
</div>

Large Size

Large Hero Panel

Taller with more padding

html 
<div class="full-width-panel hero-panel hero-panel--large">
  <div class="panel-content centered">
    <h1>Large Hero Panel</h1>
    <p class="hero-subtitle">Taller with more padding</p>
  </div>
</div>

Small Size

Small Hero Panel

Shorter with less padding

html 
<div class="full-width-panel hero-panel hero-panel--small">
  <div class="panel-content centered">
    <h1>Small Hero Panel</h1>
    <p class="hero-subtitle">Shorter with less padding</p>
  </div>
</div>

Effect Variants

Add visual effects to hero panels.

Pattern Overlay

Pattern Hero Panel

Has a subtle dot pattern overlay

html 
<div class="full-width-panel hero-panel hero-panel--pattern">
  <div class="panel-content centered">
    <h1>Pattern Hero Panel</h1>
    <p class="hero-subtitle">Has a subtle dot pattern overlay</p>
  </div>
</div>

Gradient

Gradient Hero Panel

Uses a linear gradient from primary-700 to primary-900

html 
<div class="full-width-panel hero-panel hero-panel--gradient">
  <div class="panel-content centered">
    <h1>Gradient Hero Panel</h1>
    <p class="hero-subtitle">Uses a linear gradient from primary-700 to primary-900</p>
  </div>
</div>

Impact Statements

Add large, attention-grabbing display text to hero panels.

Basic Display Text

IMPACT STATEMENT

With Supporting Heading

And additional subtitle text

html 
<div class="full-width-panel hero-panel hero-panel--display">
  <div class="panel-content centered">
    <p class="display-text">IMPACT STATEMENT</p>
    <h1>With Supporting Heading</h1>
    <p class="hero-subtitle">And additional subtitle text</p>
  </div>
</div>

Display Text on Secondary Background

BUILD CONNECTIONS

Supporting text that explains the statement

html 
<div class="full-width-panel hero-panel hero-panel--secondary hero-panel--display">
  <div class="panel-content centered">
    <p class="display-text">BUILD CONNECTIONS</p>
    <p class="hero-subtitle">Supporting text that explains the statement</p>
  </div>
</div>

High-Contrast Display

BOLD STATEMENT

Supporting text that explains the statement

html 
<div class="full-width-panel hero-panel hero-panel--secondary hero-panel--display hero-panel--display-contrast">
  <div class="panel-content centered">
    <p class="display-text">BOLD STATEMENT</p>
    <p class="hero-subtitle">Supporting text that explains the statement</p>
  </div>
</div>

Combined Examples

Mix and match variants to create different looks for specific purposes.

Featured Page Example

Featured Content

Important page with enhanced visual presence

html 
<div class="full-width-panel hero-panel hero-panel--accent hero-panel--large hero-panel--pattern">
  <div class="panel-content centered">
    <h1>Featured Content</h1>
    <p class="hero-subtitle">Important page with enhanced visual presence</p>
  </div>
</div>

Call-to-Action Example

TAKE ACTION

Compelling reason to take the next step

html 
<div class="full-width-panel hero-panel hero-panel--secondary hero-panel--display hero-panel--gradient">
  <div class="panel-content centered">
    <p class="display-text">TAKE ACTION</p>
    <p class="hero-subtitle">Compelling reason to take the next step</p>
  </div>
</div>

Subtle Information Page Example

Information Page

Details about a specific topic with left-aligned content

html 
<div class="full-width-panel hero-panel hero-panel--light hero-panel--small hero-panel--left">
  <div class="panel-content">
    <h1>Information Page</h1>
    <p class="hero-subtitle">Details about a specific topic with left-aligned content</p>
  </div>
</div>

Consecutive Hero Panels

Techniques for placing hero panels directly after each other without white space between them.

Using No-Top-Margin Class

First Panel

This is the first of two consecutive panels

Second Panel

This panel uses the hero-panel--no-top-margin class

html 
<div class="full-width-panel hero-panel hero-panel--primary">
  <div class="panel-content centered">
    <h1>First Panel</h1>
    <p class="hero-subtitle">This is the first of two consecutive panels</p>
  </div>
</div>
<div class="full-width-panel hero-panel hero-panel--secondary hero-panel--no-top-margin">
  <div class="panel-content centered">
    <h1>Second Panel</h1>
    <p class="hero-subtitle">This panel uses the hero-panel--no-top-margin class</p>
  </div>
</div>

Using Automatic Adjacent Sibling Selector

The CSS automatically removes margins between consecutive hero panels using the adjacent sibling selector.

css 
/* This is handled automatically in hero-panels.css */
.hero-image-panel + .hero-panel,
.hero-panel + .hero-panel {
  margin-top: 0 !important;
}