oa/documentation/elements/content/content-titles-documentation.md

Titles

To create a title, you can add the title class to any html element. Title sizes can be controlled with numbered modifiers using the patter is-* where * represents a number between 3 and 6. Titles can also be thinner using the is-thin, bold using the is-bold or bolder using the is-bolder modifier classes.

<template>
  <div class="columns is-multiline">
    <div class="column is-3">
      <h1 class="title is-3 is-narrow toc-ignore">
        This is a title
      </h1>
      <p>This is a huge title</p>
    </div>
    <div class="column is-3">
      <h2 class="title is-4 is-narrow toc-ignore">
        This is a title
      </h2>
      <p>This is a big title</p>
    </div>
    <div class="column is-3">
      <h2 class="title is-5 is-narrow toc-ignore">
        This is a title
      </h2>
      <p>This is a medium title</p>
    </div>
    <div class="column is-3">
      <h2 class="title is-6 is-narrow toc-ignore">
        This is a title
      </h2>
      <p>This is a smaller title</p>
    </div>
    <div class="column is-3">
      <h1 class="title is-3 is-narrow toc-ignore is-bold">
        This is a title
      </h1>
      <p>This is a huge bold title</p>
    </div>
    <div class="column is-3">
      <h2 class="title is-4 is-narrow toc-ignore is-bold">
        This is a title
      </h2>
      <p>This is a big bold title</p>
    </div>
    <div class="column is-3">
      <h2 class="title is-5 is-narrow toc-ignore is-bold">
        This is a title
      </h2>
      <p>This is a medium bold title</p>
    </div>
    <div class="column is-3">
      <h2 class="title is-6 is-narrow toc-ignore is-bold">
        This is a title
      </h2>
      <p>This is a smaller bold title</p>
    </div>
    <div class="column is-3">
      <h1 class="title is-3 is-narrow toc-ignore is-bolder">
        This is a title
      </h1>
      <p>This is a huge bolder title</p>
    </div>
    <div class="column is-3">
      <h2 class="title is-4 is-narrow toc-ignore is-bolder">
        This is a title
      </h2>
      <p>This is a big bolder title</p>
    </div>
    <div class="column is-3">
      <h2 class="title is-5 is-narrow toc-ignore is-bolder">
        This is a title
      </h2>
      <p>This is a medium bolder title</p>
    </div>
    <div class="column is-3">
      <h2 class="title is-6 is-narrow toc-ignore is-bolder">
        This is a title
      </h2>
      <p>This is a smaller bolder title</p>
    </div>
    <div class="column is-3">
      <h1 class="title is-3 is-narrow toc-ignore is-thin">
        This is a title
      </h1>
      <p>This is a huge thin title</p>
    </div>
    <div class="column is-3">
      <h2 class="title is-4 is-narrow toc-ignore is-thin">
        This is a title
      </h2>
      <p>This is a big thin title</p>
    </div>
    <div class="column is-3">
      <h2 class="title is-5 is-narrow toc-ignore is-thin">
        This is a title
      </h2>
      <p>This is a medium thin title</p>
    </div>
    <div class="column is-3">
      <h2 class="title is-6 is-narrow toc-ignore is-thin">
        This is a title
      </h2>
      <p>This is a smaller thin title</p>
    </div>
  </div>
</template>

This is a title

This is a huge title

This is a title

This is a big title

This is a title

This is a medium title

This is a title

This is a smaller title

This is a title

This is a huge bold title

This is a title

This is a big bold title

This is a title

This is a medium bold title

This is a title

This is a smaller bold title

This is a title

This is a huge bolder title

This is a title

This is a big bolder title

This is a title

This is a medium bolder title

This is a title

This is a smaller bolder title

This is a title

This is a huge thin title

This is a title

This is a big thin title

This is a title

This is a medium thin title

This is a title

This is a smaller thin title