Title and Subtitle

<h1 class="title">Title</h1>
<h2 class="subtitle">Subtitle</h2>

<h1 class="title is-1">Title 1</h1>
<h2 class="title is-2">Title 2</h2>
<h3 class="title is-3">Title 3</h3>
<h4 class="title is-4">Title 4</h4>
<h5 class="title is-5">Title 5</h5>
<h6 class="title is-6">Title 6</h6>

<h1 class="subtitle is-1">Subtitle 1</h1>
<h2 class="subtitle is-2">Subtitle 2</h2>
<h3 class="subtitle is-3">Subtitle 3</h3>
<h4 class="subtitle is-4">Subtitle 4</h4>
<h5 class="subtitle is-5">Subtitle 5</h5>
<h6 class="subtitle is-6">Subtitle 6</h6>

<h1 class="title">Welcome to My Website</h1>
<h2 class="subtitle">A place to discover amazing content</h2>

<h1 class="title">Main Heading</h1>
<h2 class="subtitle">Supporting text that's nicely spaced</h2>

<h1 class="title is-1">Large Title</h1>
<p class="subtitle is-3">Medium Subtitle</p>

<h2 class="title is-3">Section Title</h2>
<p class="subtitle is-5">Section description</p>

<h3 class="title is-4">Card Title</h3>
<p class="subtitle is-6">Card subtitle</p>

<h1 class="title is-spaced">Title with Spacing</h1>
<h2 class="subtitle">This subtitle has normal spacing before it</h2>

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

<section class="section">
  <div class="container">
    <h1 class="title is-1">About Us</h1>
    <h2 class="subtitle is-4">Learn more about our company and mission</h2>
  </div>
</section>

<div class="card">
  <div class="card-content">
    <p class="title is-4">Card Title</p>
    <p class="subtitle is-6">Card subtitle goes here</p>
    <div class="content">
      Card content with additional information.
    </div>
  </div>
</div>

<article>
  <h1 class="title is-2">How to Build a Website</h1>
  <p class="subtitle is-5">A comprehensive guide for beginners</p>
  <p class="has-text-grey">Published on March 4, 2026</p>
</article>

<section class="section">
  <h2 class="title is-3">Our Services</h2>
  <p class="subtitle is-5">What we can do for you</p>
  <!-- Content -->
</section>

<section class="section">
  <h2 class="title is-3">Contact Us</h2>
  <p class="subtitle is-5">Get in touch with our team</p>
  <!-- Content -->
</section>

<h1 class="title">
  Project Name
  <span class="tag is-success">v2.0</span>
</h1>

<h2 class="title">
  <span class="icon-text">
    <span class="icon has-text-primary">
      <i class="fas fa-star"></i>
    </span>
    <span>Featured Content</span>
  </span>
</h2>

<h1 class="title">
  Welcome to <strong>Our Platform</strong>
</h1>

<h2 class="subtitle">
  The <em>best</em> place to get things done
</h2>

<h1 class="title">
  Formula: E=mc<sup>2</sup>
</h1>

<h2 class="subtitle">
  Water: H<sub>2</sub>O
</h2>

<h1 class="title is-1-desktop is-2-tablet is-3-mobile">
  Responsive Title
</h1>

<h1 class="title has-text-primary">Primary Title</h1>
<h2 class="subtitle has-text-grey">Grey Subtitle</h2>

<h1 class="title has-text-success">Success Title</h1>
<h2 class="subtitle has-text-danger">Danger Subtitle</h2>

<h1 class="title has-text-centered">Centered Title</h1>
<h2 class="subtitle has-text-centered">Centered Subtitle</h2>

<h1 class="title has-text-right">Right-Aligned Title</h1>
<h2 class="subtitle has-text-right">Right-Aligned Subtitle</h2>

.custom-title {
  --bulma-title-color: hsl(348, 100%, 61%);
  --bulma-title-weight: 900;
}

.custom-subtitle {
  --bulma-subtitle-color: hsl(0, 0%, 48%);
  font-style: italic;
}

<h1 class="title custom-title">Custom Styled Title</h1>
<h2 class="subtitle custom-subtitle">Custom styled subtitle</h2>