Title and Subtitle

Simple headings to add depth to your page

There are 2 types of heading:

  • title
  • subtitle

Title

Subtitle

HTML 

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

Sizes

There are 6 sizes available:

Title 1

Title 2

Title 3 (default size)

Title 4

Title 5

Title 6

HTML 

<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>

Subtitle 1

Subtitle 2

Subtitle 3

Subtitle 4

Subtitle 5 (default size)

Subtitle 6

HTML 

<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>

Example Tiny

Tiny 1

Tiny 2

Tiny 3

Tiny 4

Tiny 5

Tiny 6

Example Jumbo

Jumbo 1

Jumbo 2

Jumbo 3

Jumbo 4

Jumbo 5

Jumbo 6

HTML 

<h1 class="title is-1 is-tiny">Title 1</h1>
                        <h1 class="title is-1 is-jumbo">Title 1</h1>

                        <h2 class="title is-2 is-tiny">Title 2</h2>
                        <h2 class="title is-2 is-jumbo">Title 2</h2>

                        <h3 class="title is-3 is-tiny">Title 3</h3>
                        <h3 class="title is-3 is-jumbo">Title 3</h3>

                        <h4 class="title is-4 is-tiny">Title 4</h4>
                        <h4 class="title is-4 is-jumbo">Title 4</h4>

                        <h5 class="title is-5 is-tiny">Title 5</h5>
                        <h5 class="title is-5 is-jumbo">Title 5</h5>
                        
                        <h6 class="title is-6 is-tiny">Title 6</h6>
                        <h6 class="title is-6 is-jumbo">Title 6</h6>

Example Tiny

Tiny 1

Tiny 2

Tiny 3

Tiny 4

Tiny 5

Tiny 6

Example Jumbo

Jumbo 1

Jumbo 2

Jumbo 3

Jumbo 4

Jumbo 5

Jumbo 6

HTML 

<h1 class="subtitle is-1 is-tiny">Subtitle 1</h1>
                        <h1 class="subtitle is-1 is-jumbo">Subtitle 1</h1>

                        <h2 class="subtitle is-2 is-tiny">Subtitle 2</h2>
                        <h2 class="subtitle is-2 is-jumbo">Subtitle 2</h2>

                        <h3 class="subtitle is-3 is-tiny">Subtitle 3</h3>
                        <h3 class="subtitle is-3 is-jumbo">Subtitle 3</h3>

                        <h4 class="subtitle is-4 is-tiny">Subtitle 4</h4>
                        <h4 class="subtitle is-4 is-jumbo">Subtitle 4</h4>

                        <h5 class="subtitle is-5 is-tiny">Subtitle 5</h5>
                        <h5 class="subtitle is-5 is-jumbo">Subtitle 5</h5>
                        
                        <h6 class="subtitle is-6 is-tiny">Subtitle 6</h6>
                        <h6 class="subtitle is-6 is-jumbo">Subtitle 6</h6>