Content Display

Brandmine's content display patterns provide consistent, flexible ways to present different types of information.

Content Display

Our content display patterns define how different types of information are presented across the Brandmine platform. These patterns ensure consistency while providing flexible options for various content needs.

Panel System

The panel system provides full-width content sections with consistent internal spacing:

Full-Width Panel

Panels extend edge-to-edge across the viewport with a centered content container. They provide consistent spacing and structure across the site.

html 
<div class="full-width-panel light-panel">
  <div class="panel-content">
    <h2>Section Title</h2>
    <p>Panel content with consistent spacing and structure.</p>
  </div>
</div>

Panel Variants

Different panel variants establish visual rhythm and content hierarchy:

Light Panel

Standard white background for primary content.

Problem Panel

Light orange background for highlighting challenges.

Solution Panel

Light teal background for highlighting solutions.

CTA Panel

Gradient background for high-emphasis sections.

html 
<!-- Standard content panel -->
<div class="full-width-panel light-panel">
  <div class="panel-content">
    <h2>Standard Content</h2>
    <p>Light background for general content.</p>
  </div>
</div>

<!-- Problem panel -->
<div class="full-width-panel problem-panel">
  <div class="panel-content">
    <h2>The Challenge</h2>
    <p>Problem panel highlights issues or challenges.</p>
  </div>
</div>

<!-- Solution panel -->
<div class="full-width-panel solution-panel">
  <div class="panel-content">
    <h2>Our Solution</h2>
    <p>Solution panel presents answers or benefits.</p>
  </div>
</div>

<!-- Call-to-action panel -->
<div class="full-width-panel cta-panel">
  <div class="panel-content centered">
    <h2>Ready to Get Started?</h2>
    <p class="lead-text">CTA panel prompts user action.</p>
    <a href="#" class="cta-button">Start Now</a>
  </div>
</div>

Grid System

The grid system provides a flexible foundation for arranging content:

Full Width
Half
Half
Third
Third
Third
Two-thirds
One-third
html 
<div class="grid-container grid-container--12">
  <!-- Full width -->
  <div class="col-span-12">Full width content</div>
  
  <!-- Two equal columns -->
  <div class="col-span-6">Left column</div>
  <div class="col-span-6">Right column</div>
  
  <!-- Three equal columns -->
  <div class="col-span-4">First column</div>
  <div class="col-span-4">Middle column</div>
  <div class="col-span-4">Last column</div>
  
  <!-- Mixed width columns -->
  <div class="col-span-8">Main content (2/3 width)</div>
  <div class="col-span-4">Sidebar content (1/3 width)</div>
</div>

Two-Column Layout

The panel with image layout creates a balanced two-column structure:

Content Area

This side contains text content, headings, and possibly buttons or other UI elements.

Image Area
html 
<div class="panel-with-image">
  <div class="content-area">
    <h2>Section Heading</h2>
    <p>Content description goes here...</p>
    <a href="#" class="btn-primary">Call to Action</a>
  </div>
  <div class="image-area">
    <img src="/path/to/image.jpg" alt="Description" class="panel-image">
  </div>
</div>

Card Components

Cards provide contained content elements with consistent styling:

Basic Card

Standard card for general content with subtle shadow and border.

White Content Card

Elevated card for featured content with deeper shadow.

html 
<!-- Basic card -->
<div class="card">
  <h3>Card Title</h3>
  <p>Card content here...</p>
</div>

<!-- White content card (for colored backgrounds) -->
<div class="white-content-card">
  <h3>Featured Content</h3>
  <p>White card with deeper shadow for emphasis...</p>
</div>

Feature and Solution Displays

Specialized layouts for presenting features and solutions:

✨

Feature Item

Feature items highlight key benefits with icons and brief descriptions.

1

Solution Item

Solution items present numbered steps or approaches to solving problems.

html 
<!-- Feature grid -->
<div class="feature-grid">
  <div class="feature-item">
    <div class="feature-icon">
      <svg><!-- Icon SVG --></svg>
    </div>
    <h3>Feature Title</h3>
    <p>Feature description text...</p>
  </div>
  <!-- Additional feature items -->
</div>

<!-- Solutions list -->
<div class="solutions-list">
  <div class="solution-item">
    <div class="solution-number">1</div>
    <div class="solution-content">
      <h3>Solution Title</h3>
      <p>Solution description text...</p>
    </div>
  </div>
  <!-- Additional solution items -->
</div>

Text Components

Specialized text components create hierarchical content flow:

Section Title

Lead text introduces a section with slightly larger font size and more generous line height, creating visual emphasis while maintaining readability.

Regular paragraph text follows with standard typography.

Additional content paragraphs continue the flow.

Conclusion text summarizes key points with a subtle divider for visual separation.

html 
<div class="panel-content">
  <h2>Section Title</h2>
  <p class="lead-text">Lead paragraph introducing the section content...</p>
  
  <p>Regular paragraph content...</p>
  <p>Additional content paragraphs...</p>
  
  <p class="conclusion-text">Conclusion text summarizing key points...</p>
</div>

Team Member Display

Specialized cards for presenting team members:

Team member

Team Member Name

Job Title

  • Area of expertise
  • Professional focus
  • Key responsibility
html 
<div class="team-section">
  <div class="team-member">
    <img src="/path/to/photo.jpg" alt="Team Member Name" class="team-photo">
    <h3>Team Member Name</h3>
    <p class="team-title">Job Title</p>
    <ul>
      <li>Area of expertise</li>
      <li>Professional focus</li>
      <li>Key responsibility</li>
    </ul>
    <div class="team-member-linkedin">
      <a href="https://linkedin.com/in/username">
        <i class="fab fa-linkedin"></i>
      </a>
    </div>
  </div>
</div>

Responsive Behavior

All content display patterns are fully responsive:

Column 1
Column 2
Desktop Layout
Column 1
Column 2
Tablet Layout
Column 1
Column 2
Mobile Layout
css 
/* Desktop layout */
.panel-with-image {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

/* Tablet behavior */
@media (max-width: 992px) {
  .panel-with-image {
    gap: var(--space-6);  /* Reduced spacing */
  }
  
  h2 {
    font-size: 1.75rem;  /* Smaller headings */
  }
}

/* Mobile behavior */
@media (max-width: 768px) {
  .panel-with-image {
    grid-template-columns: 1fr;  /* Stack vertically */
  }
  
  .feature-grid {
    grid-template-columns: 1fr;  /* Single column */
  }
  
  .feature-item {
    flex-direction: row;  /* Horizontal on mobile */
    text-align: left;
  }
}

Content Organization Patterns

Common content organization patterns across the site:

1. Problem → Solution Pattern

A problem panel followed by a solution panel creates a narrative flow that identifies challenges and presents solutions.

2. Feature Grid Pattern

A grid of feature items presents multiple benefits or capabilities in a visually balanced layout.

3. Alternating Panels Pattern

Alternating panel colors create visual rhythm and help users distinguish between different content sections.

4. Call-to-Action Finale Pattern

Content sections conclude with a CTA panel that prompts user action after building context and value.

Implementation Guidelines

Content Pattern Selection

  1. Match pattern to content type:
    • Use panels for primary content sections
    • Use grids for displaying multiple related items
    • Use cards for self-contained content units
    • Use specialized displays for specific content types (team, features, solutions)
  2. Create visual hierarchy:
    • Use panel variants to distinguish between content types
    • Use text components to establish content flow
    • Use cards and specialized displays to highlight important elements
    • Maintain consistent spacing within and between elements
  3. Consider reading flow:
    • Organize content in a logical sequence
    • Use sufficient spacing to separate distinct ideas
    • Group related content in meaningful ways
    • Provide clear visual cues for content relationships
  4. Ensure responsive behavior:
    • Test layouts at all breakpoints
    • Maintain readability on small screens
    • Preserve content hierarchy when stacking elements
    • Adjust spacing appropriately for different devices

Common Content Structures

html 
<!-- Problem → Solution pattern -->
<div class="full-width-panel problem-panel">
  <div class="panel-content">
    <h2>The Challenge</h2>
    <p class="lead-text">Description of the problem...</p>
    <div class="feature-grid">
      <!-- Problem points as feature items -->
    </div>
  </div>
</div>

<div class="full-width-panel solution-panel">
  <div class="panel-content">
    <h2>Our Solution</h2>
    <p class="lead-text">Description of the solution approach...</p>
    <div class="solutions-list">
      <!-- Solution steps as solution items -->
    </div>
  </div>
</div>

<!-- Call-to-action finale -->
<div class="full-width-panel cta-panel">
  <div class="panel-content centered">
    <h2>Ready to Get Started?</h2>
    <p class="lead-text">Compelling call to action message...</p>
    <a href="#" class="cta-button">Start Now</a>
  </div>
</div>