Text Components

Brandmine's specialized text components for creating emphasis and flow in content.

Text Components Overview

Our text components provide specialized typography treatments beyond basic HTML elements. These components create visual hierarchy, guide readers through content, and emphasize important information across the site.

Hero Subtitle

The hero subtitle provides secondary messaging within hero sections, with lighter weight and generous spacing:

Main Hero Heading

The hero subtitle expands on the main heading with additional context, creating a clear hierarchy while maintaining visual connection.

Call to Action
html 
<div class="hero-panel">
  <div class="panel-content">
    <h1>Main Hero Heading</h1>
    <p class="hero-subtitle">The hero subtitle expands on the main heading with additional context, creating a clear hierarchy while maintaining visual connection.</p>
    <a href="#" class="btn-primary">Call to Action</a>
  </div>
</div>

Lead Text

Lead text provides an introduction or summary at the beginning of a section, using larger font size and improved spacing:

Section Title

Lead text introduces a section with slightly larger font size and more generous line height, creating visual emphasis while maintaining readability. It's perfect for summarizing content that follows.

Regular paragraph text follows the lead text, creating a clear hierarchy between the introductory content and the detailed information that follows.

Additional paragraphs continue the content with standard typography.

html 
<div class="panel-content">
  <h2>Section Title</h2>
  <p class="lead-text">Lead text introduces a section with slightly larger font size and more generous line height, creating visual emphasis while maintaining readability. It's perfect for summarizing content that follows.</p>
  <p>Regular paragraph text follows the lead text, creating a clear hierarchy between the introductory content and the detailed information that follows.</p>
  <p>Additional paragraphs continue the content with standard typography.</p>
</div>

Panel Lead Text

Within panels, lead text receives special treatment with a slightly larger size:

Panel Section Title

Panel lead text uses slightly larger sizing than standard lead text, creating greater emphasis within panel contexts. It helps establish the panel's focus and guides users through complex content sections.

Regular paragraph text follows with standard sizing and spacing.

html 
<div class="full-width-panel light-panel">
  <div class="panel-content">
    <h2>Panel Section Title</h2>
    <p class="lead-text">Panel lead text uses slightly larger sizing than standard lead text, creating greater emphasis within panel contexts. It helps establish the panel's focus and guides users through complex content sections.</p>
    <p>Regular paragraph text follows with standard sizing and spacing.</p>
  </div>
</div>

Conclusion Text

Conclusion text provides visual separation for summary content with a subtle top border:

Regular paragraph content precedes the conclusion text.

Several paragraphs may provide detailed information.

Conclusion text summarizes key points or provides a final thought, separated from the main content with a subtle divider. This visual distinction helps readers identify summary information and next steps.

html 
<div class="panel-content">
  <p>Regular paragraph content precedes the conclusion text.</p>
  <p>Several paragraphs may provide detailed information.</p>
  <div class="conclusion-text">
    <p>Conclusion text summarizes key points or provides a final thought, separated from the main content with a subtle divider. This visual distinction helps readers identify summary information and next steps.</p>
  </div>
</div>

Responsive Behavior

All text components are responsive, adapting to different screen sizes:

Desktop

Hero Subtitle

Lead Text

Panel Lead Text

Desktop View
1200px+

Tablet

Hero Subtitle

Lead Text

Panel Lead Text

Tablet View
768px - 992px

Mobile

Hero Subtitle

Lead Text

Panel Lead Text

Mobile View
< 768px
css 
/* Base text component styles */
.hero-subtitle {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.4;
}

.lead-text {
  font-size: 1.125rem;
  line-height: 1.6;
}

.panel-lead-text {
  font-size: 1.2rem;
  line-height: 1.6;
}

/* Tablet styles */
@media (max-width: 992px) {
  .hero-subtitle {
    font-size: 1.4rem;
  }
  
  .lead-text {
    font-size: 1.1rem;
  }
  
  .panel-lead-text {
    font-size: 1.15rem;
  }
}

/* Mobile styles */
@media (max-width: 768px) {
  .hero-subtitle {
    font-size: 1.25rem;
  }
  
  .lead-text {
    font-size: 1rem;
  }
  
  .panel-lead-text {
    font-size: 1.1rem;
  }
}

Implementation Guidelines

Text Component Usage

  1. Hero Subtitle - Use only in hero sections, directly following the main h1 heading
  2. Lead Text - Use at the beginning of content sections to introduce the topic
  3. Panel Lead Text - Use in panels where additional emphasis is needed
  4. Conclusion Text - Use at the end of a content section to summarize or transition

Best Practices

  1. Maintain hierarchy - Ensure proper heading (h1-h6) usage before specialized text components
  2. Respect maximum widths - Text components have max-width settings for optimal readability
  3. Use sparingly - Reserve these components for their intended purpose to maintain impact
  4. Keep content concise - These components work best with focused, direct messaging
  5. Preserve visual space - Maintain the specified margins to create proper rhythm

Example Section Structure

Complete Section Example

This lead text introduces the complete section, providing context for what follows. It uses proper line height and spacing to create emphasis.

Subsection Heading

Regular paragraph text provides the main content details. Multiple paragraphs can be used to fully explain concepts.

Additional paragraphs expand on the content as needed using standard typography.

Another Subsection

More regular content continues the information flow with appropriate spacing.

This conclusion text provides a summary of the section and directs users to related content or next steps.

html 
<div class="panel-content">
  <h2>Complete Section Example</h2>
  <p class="lead-text">This lead text introduces the complete section, providing context for what follows. It uses proper line height and spacing to create emphasis.</p>
  
  <h3>Subsection Heading</h3>
  <p>Regular paragraph text provides the main content details. Multiple paragraphs can be used to fully explain concepts.</p>
  <p>Additional paragraphs expand on the content as needed using standard typography.</p>
  
  <h3>Another Subsection</h3>
  <p>More regular content continues the information flow with appropriate spacing.</p>
  
  <div class="conclusion-text">
    <p>This conclusion text provides a summary of the section and directs users to related content or next steps.</p>
  </div>
</div>