Block Title

HTML
Pug

<!-- Block Title Sizes via h1-h6 tags -->
<h2 class="block-title">H2. Block title</h2>
<h3 class="block-title">H3. Block title</h3>
<h4 class="block-title">H4. Block title</h4>
<h5 class="block-title">H5. Block title</h5>
<h6 class="block-title">H6. Block title</h6>

//- Block Title Sizes via h1-h6 tags
h2.block-title H2. Block title
h3.block-title H3. Block title
h4.block-title H4. Block title
h5.block-title H5. Block title
h6.block-title H6. Block title

HTML
Pug

<!-- Block Title with Subtitle -->
<h2 class="block-title">H2. Block title</h2>
<h3 class="block-title">H3. Block title</h3>
<h4 class="block-title">H4. Block title</h4>
<h5 class="block-title">H5. Block title</h5>
<h6 class="block-title">H6. Block title</h6>

//- Block Title with Subtitle
h4.block-title
  | Block title with subtitle
  small Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
h5.block-title
  | Block title with subtitle
  small Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
h6.block-title
  | Block title with subtitle
  small Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

HTML
Pug

<!-- Block Title Alignment -->
<h3 class="block-title text-left">Left aligned</h3>
<h3 class="block-title text-center">Center aligned</h3>
<h3 class="block-title text-right">Right aligned</h3>

//- Block Title Alignment
h3.block-title.text-left Left aligned
h3.block-title.text-center Center aligned
h3.block-title.text-right Right aligned

HTML
Pug

<!-- Square Icon + Subtitle -->
<h4 class="block-title">
  <span class="block-title-icon">
    <i class="fe-icon-bell"></i>
  </span>
  Title with subtitle
  <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
</h4>

<!-- Circle Icon + Subtitle -->
<h4 class="block-title">
  <span class="block-title-icon rounded-circle">
    <i class="fe-icon-clock"></i>
  </span>
  Title with subtitle
  <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
</h4>

//- Square Icon + Subtitle
h4.block-title
  span.block-title-icon: i.fe-icon-bell
  | Title with subtitle
  small Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

//- Circle Icon + Subtitle
h4.block-title
  span.block-title-icon.rounded-circle: i.fe-icon-clock
  | Title with subtitle
  small Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Block Title

Sizes

H2. Block title

H3. Block title

H4. Block title

H5. Block title

H6. Block title

Title & Subtitle

Block title with subtitleLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Block title with subtitleLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Block title with subtitleLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Alignment

Left aligned

Center aligned

Right aligned

Title with subtitleLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title with subtitleLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title with subtitleLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

With icons

Left aligned

Center aligned

Right aligned

Title with subtitleLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title with subtitleLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title with subtitleLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Block Title

Code

Code

Code

Code

Sizes

H2. Block title

H3. Block title

H4. Block title

H5. Block title

H6. Block title

Title & Subtitle

Block title with subtitleLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Block title with subtitleLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Block title with subtitleLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Alignment

Left aligned

Center aligned

Right aligned

Title with subtitleLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title with subtitleLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title with subtitleLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

With icons

Left aligned

Center aligned

Right aligned

Title with subtitleLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title with subtitleLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title with subtitleLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.