Bulma Title

The Title component in Bulma provides a consistent way to create headings with proper spacing, sizing, and responsiveness. It's designed to work seamlessly with the Subtitle component to create well-structured content hierarchies.

Basic Titles

Titles range from .is-1 (largest) to .is-7 (smallest):

<!-- Title sizes -->
<p class="title is-1">Title 1</p>
<p class="title is-2">Title 2</p>
<p class="title is-3">Title 3</p>
<p class="title is-4">Title 4</p>
<p class="title is-5">Title 5</p>
<p class="title is-6">Title 6</p>
<p class="title is-7">Title 7</p>

<!-- Using semantic HTML -->
<h1 class="title is-1">Page Title</h1>
<h2 class="title is-2">Section Title</h2>
<h3 class="title is-3">Subsection Title</h3>

Title with Subtitles

Combine titles with subtitles for better content hierarchy:

<!-- Title with subtitle -->
<div class="block">
  <h1 class="title">Main Title</h1>
  <h2 class="subtitle">Supporting subtitle text</h2>
</div>

<!-- Inline title and subtitle -->
<h1 class="title">Dashboard
  <span class="subtitle is-4">Welcome back, John!</span>
</h1>

<!-- With spacing -->
<div class="mb-6">
  <p class="title is-2">Product Name</p>
  <p class="subtitle is-4">Product description goes here</p>
</div>

Title Colors

Apply color helpers to titles:

<!-- Primary title -->
<p class="title is-1 has-text-primary">Primary Title</p>

<!-- Success title -->
<p class="title is-2 has-text-success">Success Title</p>

<!-- Danger title -->
<p class="title is-3 has-text-danger">Danger Title</p>

<!-- Warning title -->
<p class="title is-4 has-text-warning">Warning Title</p>

<!-- Info title -->
<p class="title is-5 has-text-info">Info Title</p>

<!-- Dark title -->
<p class="title is-6 has-text-dark">Dark Title</p>

<!-- Light title on dark background -->
<div class="has-background-dark p-3">
  <p class="title has-text-light">Light Title</p>
</div>

Title Alignment

<!-- Centered title -->
<p class="title has-text-centered">Centered Title</p>

<!-- Right-aligned title -->
<p class="title has-text-right">Right Title</p>

<!-- Left-aligned title (default) -->
<p class="title has-text-left">Left Title</p>

<!-- Justified title -->
<p class="title has-text-justified">Justified Title Text</p>

Title with Icons

<!-- Title with left icon -->
<p class="title">
  <span class="icon">
    <i class="fas fa-chart-bar"></i>
  </span>
  <span>Dashboard</span>
</p>

<!-- Title with right icon -->
<p class="title">
  <span>Settings</span>
  <span class="icon">
    <i class="fas fa-cog"></i>
  </span>
</p>

<!-- Title with multiple icons -->
<p class="title">
  <span class="icon has-text-success">
    <i class="fas fa-check-circle"></i>
  </span>
  <span>Completed Tasks</span>
  <span class="icon has-text-info ml-2">
    <i class="fas fa-info-circle"></i>
  </span>
</p>

Responsive Titles

Adjust title sizes based on screen width:

<!-- Responsive size modifiers -->
<p class="title is-1-mobile is-3-tablet is-2-desktop">
  Responsive Title
</p>

<!-- Hide/show on different screens -->
<p class="title is-hidden-mobile">Visible on Tablet+</p>
<p class="title is-hidden-tablet-only">Hidden only on Tablet</p>
<p class="title is-hidden-desktop">Visible only on Mobile</p>

<!-- Different alignments on different screens -->
<p class="title has-text-centered-mobile has-text-left-tablet">
  Responsive Alignment
</p>

Title Spacing

<!-- Titles with margin utilities -->
<p class="title is-1 mb-0">No bottom margin</p>
<p class="title is-2 mb-1">Small bottom margin</p>
<p class="title is-3 mb-2">Medium bottom margin</p>
<p class="title is-4 mb-3">Large bottom margin</p>
<p class="title is-5 mb-4">Extra large bottom margin</p>
<p class="title is-6 mb-5">XXL bottom margin</p>
<p class="title is-7 mb-6">XXXL bottom margin</p>

<!-- Titles with padding -->
<p class="title is-3 p-3 has-background-light">Title with padding</p>
<p class="title is-4 px-4 has-background-light">Title with horizontal padding</p>
<p class="title is-5 py-5 has-background-light">Title with vertical padding</p>

Title in Cards and Boxes

<!-- Title in card header -->
<div class="card">
  <header class="card-header">
    <p class="card-header-title title is-4">Card Title</p>
  </header>
  <div class="card-content">
    <p>Card content goes here.</p>
  </div>
</div>

<!-- Title in box -->
<div class="box">
  <p class="title is-3">Box Title</p>
  <p class="subtitle is-5">Box subtitle description</p>
  <p>Box content goes here.</p>
</div>

<!-- Title in hero section -->
<section class="hero is-primary">
  <div class="hero-body">
    <p class="title">Hero Title</p>
    <p class="subtitle">Hero subtitle text</p>
  </div>
</section>

<!-- Title in notification -->
<div class="notification is-info">
  <p class="title is-4">Important Notice</p>
  <p>Notification content goes here.</p>
</div>

Title with Badges and Tags

<!-- Title with tag -->
<p class="title">
  Notifications
  <span class="tag is-primary ml-2">5</span>
</p>

<!-- Title with multiple tags -->
<p class="title">
  Projects
  <span class="tag is-success ml-2">Active: 12</span>
  <span class="tag is-warning ml-1">Pending: 3</span>
  <span class="tag is-danger ml-1">Overdue: 2</span>
</p>

<!-- Title with badge -->
<p class="title">
  Messages
  <span class="badge is-primary ml-2">New</span>
</p>

Title Transformations

<!-- Uppercase title -->
<p class="title is-uppercase">UPPERCASE TITLE</p>

<!-- Lowercase title -->
<p class="title is-lowercase">lowercase title</p>

<!-- Capitalized title -->
<p class="title is-capitalized">Capitalized Title</p>

<!-- Italic title -->
<p class="title is-italic">Italic Title</p>

<!-- Underlined title -->
<p class="title is-underlined">Underlined Title</p>

<!-- Title with weight modifiers -->
<p class="title has-text-weight-light">Light Weight</p>
<p class="title has-text-weight-normal">Normal Weight</p>
<p class="title has-text-weight-medium">Medium Weight</p>
<p class="title has-text-weight-semibold">Semibold Weight</p>
<p class="title has-text-weight-bold">Bold Weight</p>

Title Groups and Lists

<!-- Group of titles -->
<div class="titles">
  <p class="title is-3">Section 1</p>
  <p class="title is-4">Subsection 1.1</p>
  <p class="title is-5">Details</p>
</div>

<!-- Title list -->
<ul class="title-list">
  <li class="title is-4">First Item</li>
  <li class="title is-4">Second Item</li>
  <li class="title is-4">Third Item</li>
</ul>

<!-- Title with description list -->
<dl class="title-dl">
  <dt class="title is-5">Feature 1</dt>
  <dd>Description of feature 1</dd>
  <dt class="title is-5">Feature 2</dt>
  <dd>Description of feature 2</dd>
</dl>

Use Cases

1. Page Header

<div class="mb-6">
  <nav class="breadcrumb" aria-label="breadcrumbs">
    <ul>
      <li><a href="#">Dashboard</a></li>
      <li><a href="#">Analytics</a></li>
      <li class="is-active"><a href="#">Reports</a></li>
    </ul>
  </nav>
  
  <div class="level">
    <div class="level-left">
      <div class="level-item">
        <p class="title is-2">Analytics Reports</p>
      </div>
      <div class="level-item">
        <span class="tag is-primary is-medium">Q4 2023</span>
      </div>
    </div>
    <div class="level-right">
      <div class="level-item">
        <button class="button is-primary">
          <span class="icon">
            <i class="fas fa-download"></i>
          </span>
          <span>Export</span>
        </button>
      </div>
    </div>
  </div>
  
  <p class="subtitle is-5">
    Detailed analysis of user engagement and platform performance metrics
  </p>
</div>

2. Dashboard Section

<div class="columns">
  <div class="column">
    <div class="box">
      <p class="title is-4 has-text-centered">
        <span class="icon has-text-success">
          <i class="fas fa-users"></i>
        </span>
        <span>Total Users</span>
      </p>
      <p class="title is-1 has-text-centered">1,254</p>
      <p class="subtitle is-6 has-text-centered has-text-success">
        <span class="icon">
          <i class="fas fa-arrow-up"></i>
        </span>
        <span>12.5% increase</span>
      </p>
    </div>
  </div>
  
  <div class="column">
    <div class="box">
      <p class="title is-4 has-text-centered">
        <span class="icon has-text-info">
          <i class="fas fa-shopping-cart"></i>
        </span>
        <span>Revenue</span>
      </p>
      <p class="title is-1 has-text-centered">$24,580</p>
      <p class="subtitle is-6 has-text-centered has-text-info">
        This month
      </p>
    </div>
  </div>
</div>

3. Product Detail Page

<div class="mb-6">
  <div class="level">
    <div class="level-left">
      <div>
        <p class="title is-1">MacBook Pro 16"</p>
        <p class="subtitle is-4">Apple M2 Max, 32GB RAM, 1TB SSD</p>
      </div>
    </div>
    <div class="level-right">
      <p class="title is-2 has-text-primary">$2,499</p>
    </div>
  </div>
  
  <div class="tags">
    <span class="tag is-success is-medium">In Stock</span>
    <span class="tag is-info is-medium">Free Shipping</span>
    <span class="tag is-warning is-medium">Limited Time Offer</span>
  </div>
</div>

4. Form Section Titles

<form>
  <!-- Personal Information Section -->
  <div class="mb-5">
    <p class="title is-4 has-border-bottom pb-2">
      <span class="icon">
        <i class="fas fa-user"></i>
      </span>
      <span>Personal Information</span>
    </p>
    
    <div class="field">
      <label class="label">Full Name</label>
      <div class="control">
        <input class="input" type="text" placeholder="Enter your name">
      </div>
    </div>
    
    <!-- More fields... -->
  </div>
  
  <!-- Contact Information Section -->
  <div class="mb-5">
    <p class="title is-4 has-border-bottom pb-2">
      <span class="icon">
        <i class="fas fa-address-book"></i>
      </span>
      <span>Contact Information</span>
    </p>
    
    <!-- Contact fields... -->
  </div>
</form>

5. Documentation Section

<div class="content">
  <h1 class="title is-1">API Documentation</h1>
  <p class="subtitle is-4">Complete guide to using our REST API</p>
  
  <div class="toc mb-5">
    <p class="title is-5">Table of Contents</p>
    <ul>
      <li><a href="#authentication">Authentication</a></li>
      <li><a href="#endpoints">Endpoints</a></li>
      <li><a href="#errors">Error Handling</a></li>
    </ul>
  </div>
  
  <section id="authentication" class="mb-6">
    <h2 class="title is-2">Authentication</h2>
    <p>All API requests require authentication...</p>
  </section>
  
  <section id="endpoints" class="mb-6">
    <h2 class="title is-2">Endpoints</h2>
    
    <article class="mb-4">
      <h3 class="title is-4">GET /users</h3>
      <p>Retrieve a list of users...</p>
    </article>
  </section>
</div>

Customization

/* Custom title styles */
.title {
  /* Custom font family */
  font-family: 'Montserrat', sans-serif;
  
  /* Custom letter spacing */
  letter-spacing: -0.5px;
  
  /* Custom line height */
  line-height: 1.2;
}

/* Custom title sizes */
.title.is-0 {
  font-size: 4rem;
  line-height: 1.1;
}

.title.is-8 {
  font-size: 0.875rem;
  font-weight: 600;
}

/* Custom title with gradient text */
.title.is-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Title with border */
.title.has-border-bottom {
  border-bottom: 3px solid #3273dc;
  padding-bottom: 0.5rem;
}

.title.has-border-left {
  border-left: 4px solid #00d1b2;
  padding-left: 1rem;
}

/* Animated title */
.title.is-animated {
  animation: fadeInUp 0.6s ease;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Title with shadow */
.title.has-text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Custom title colors */
.title.is-accent {
  color: #ff3860;
}

.title.is-muted {
  color: #7a7a7a;
  opacity: 0.9;
}

Accessibility

<!-- Use semantic HTML elements -->
<h1 class="title is-1" id="main-title">Page Title</h1>

<!-- Proper heading hierarchy -->
<div role="region" aria-labelledby="section-title">
  <h2 class="title is-2" id="section-title">Section Title</h2>
  <p>Section content...</p>
</div>

<!-- Screen reader only titles -->
<h2 class="title is-3">
  <span aria-hidden="true">Statistics</span>
  <span class="sr-only">Dashboard Statistics for Current Quarter</span>
</h2>

<!-- Titles with ARIA labels -->
<p class="title is-4" aria-label="Current user count: 1,254 users">
  <span class="icon">
    <i class="fas fa-users"></i>
  </span>
  <span>1,254 Users</span>
</p>

<!-- Responsive titles with proper semantics -->
<h1 class="title is-2-mobile is-1-desktop">Responsive Page Title</h1>

Best Practices

• Use semantic HTML elements (h1-h6) with title classes
• Maintain proper heading hierarchy (h1 → h2 → h3)
• Use consistent title sizes throughout your application
• Combine titles with subtitles for better context
• Ensure sufficient contrast for accessibility
• Use responsive size modifiers for mobile optimization
• Keep titles concise and descriptive
• Use icons sparingly to enhance, not distract
• Test title readability on different screen sizes
• Consider using color to indicate importance or status
• Use spacing utilities to create visual hierarchy
• Avoid using titles for non-heading text

Up next: Bulma Tag Component