Headings

Can be used as titles to paragraphs or page main headings

Default

<div class="heading-sub">
  <h1 class="heading-main">H1 example heading text</h1>
  <p>Short sub-text to define the heading</p>
</div>

<div class="heading-sub">
  <h2 class="heading-main">H2 example heading text</h2>
  <p>Short sub-text to define the heading</p>
</div>

<div class="heading-sub">
  <h3 class="heading-main">H3 example heading text</h3>
  <p>Short sub-text to define the heading</p>
</div>

<div class="heading-sub">
  <h4 class="heading-main">H4 example heading text</h4>
  <p>Short sub-text to define the heading</p>
</div>

H1 example heading text

Short sub-text to define the heading

H2 example heading text

Short sub-text to define the heading

H3 example heading text

Short sub-text to define the heading

H4 example heading text

Short sub-text to define the heading

Centered

<div class="heading-sub text-center">
  <h1 class="heading-main">H1 example heading text</h1>
  <p>Short sub-text to define the heading</p>
</div>

<div class="heading-sub text-center">
  <h2 class="heading-main">H2 example heading text</h2>
  <p>Short sub-text to define the heading</p>
</div>

<div class="heading-sub text-center">
  <h3 class="heading-main">H3 example heading text</h3>
  <p>Short sub-text to define the heading</p>
</div>

<div class="heading-sub text-center">
  <h4 class="heading-main">H4 example heading text</h4>
  <p>Short sub-text to define the heading</p>
</div>

H1 example heading text

Short sub-text to define the heading

H2 example heading text

Short sub-text to define the heading

H3 example heading text

Short sub-text to define the heading

H4 example heading text

Short sub-text to define the heading

Right

<div class="heading-sub text-right">
  <h1 class="heading-main">H1 example heading text</h1>
  <p>Short sub-text to define the heading</p>
</div>

<div class="heading-sub text-right">
  <h2 class="heading-main">H2 example heading text</h2>
  <p>Short sub-text to define the heading</p>
</div>

<div class="heading-sub text-right">
  <h3 class="heading-main">H3 example heading text</h3>
  <p>Short sub-text to define the heading</p>
</div>

<div class="heading-sub text-right">
  <h4 class="heading-main">H4 example heading text</h4>
  <p>Short sub-text to define the heading</p>
</div>

H1 example heading text

Short sub-text to define the heading

H2 example heading text

Short sub-text to define the heading

H3 example heading text

Short sub-text to define the heading

H4 example heading text

Short sub-text to define the heading

Border

<div class="heading-border">
  <h1 class="heading-main">H1 example heading text</h1>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>

<div class="heading-border">
  <h2 class="heading-main">H2 example heading text</h2>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>

<div class="heading-border">
  <h3 class="heading-main">H3 example heading text</h3>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>

<div class="heading-border">
  <h4 class="heading-main">H4 example heading text</h4>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>

<div class="heading-border">
  <h5 class="heading-main">H5 example heading text</h5>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>

<div class="heading-border">
  <h6 class="heading-main">H6 example heading text</h6>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>

H1 example heading text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

H2 example heading text

H3 example heading text

H4 example heading text

H5 example heading text

H6 example heading text

Alternative Left

<div class="heading-alt">
  <h1 class="heading-main">H1 example heading text</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
</div>

<div class="heading-alt">
  <h2 class="heading-main">H2 example heading text</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
</div>

<div class="heading-alt">
  <h3 class="heading-main">H3 example heading text</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
</div>

<div class="heading-alt">
  <h4 class="heading-main">H4 example heading text</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
</div>

<div class="heading-alt">
  <h5 class="heading-main">H5 example heading text</h5>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
</div>

<div class="heading-alt">
  <h6 class="heading-main">H6 example heading text</h6>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
</div>

H1 example heading text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

H2 example heading text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

H3 example heading text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

H4 example heading text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

H5 example heading text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

H6 example heading text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

Alternative Center

<div class="heading-alt text-center">
  <h1 class="heading-main">H1 example heading text</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
</div>

<div class="heading-alt text-center">
  <h2 class="heading-main">H2 example heading text</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
</div>

<div class="heading-alt text-center">
  <h3 class="heading-main">H3 example heading text</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
</div>

<div class="heading-alt text-center">
  <h4 class="heading-main">H4 example heading text</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
</div>

<div class="heading-alt text-center">
  <h5 class="heading-main">H5 example heading text</h5>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
</div>

<div class="heading-alt text-center">
  <h6 class="heading-main">H6 example heading text</h6>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
</div>

H1 example heading text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

H2 example heading text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

H3 example heading text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

H4 example heading text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

H5 example heading text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

H6 example heading text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

Alternative Right

<div class="heading-alt text-right">
  <h1 class="heading-main">H1 example heading text</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
</div>

<div class="heading-alt text-right">
  <h2 class="heading-main">H2 example heading text</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
</div>

<div class="heading-alt text-right">
  <h3 class="heading-main">H3 example heading text</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
</div>

<div class="heading-alt text-right">
  <h4 class="heading-main">H4 example heading text</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
</div>

<div class="heading-alt text-right">
  <h5 class="heading-main">H5 example heading text</h5>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
</div>

<div class="heading-alt text-right">
  <h6 class="heading-main">H6 example heading text</h6>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit</p>
</div>

H1 example heading text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

H2 example heading text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

H3 example heading text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

H4 example heading text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

H5 example heading text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

H6 example heading text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit

Alternative 2 Left

<div class="heading-alt-2">
  <h1 class="heading-main">H1 example heading text</h1>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>

<div class="heading-alt-2">
  <h2 class="heading-main">H2 example heading text</h2>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>

<div class="heading-alt-2">
  <h3 class="heading-main">H3 example heading text</h3>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>

<div class="heading-alt-2">
  <h4 class="heading-main">H4 example heading text</h4>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>

<div class="heading-alt-2">
  <h5 class="heading-main">H5 example heading text</h5>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>

<div class="heading-alt-2">
  <h6 class="heading-main">H6 example heading text</h6>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>

H1 example heading text

H2 example heading text

H3 example heading text

H4 example heading text

H5 example heading text

H6 example heading text

Alternative 2 Center

<div class="heading-alt-2 text-center">
  <h1 class="heading-main">H1 example heading text</h1>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>

<div class="heading-alt-2 text-center">
  <h2 class="heading-main">H2 example heading text</h2>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>

<div class="heading-alt-2 text-center">
  <h3 class="heading-main">H3 example heading text</h3>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>

<div class="heading-alt-2 text-center">
  <h4 class="heading-main">H4 example heading text</h4>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>

<div class="heading-alt-2 text-center">
  <h5 class="heading-main">H5 example heading text</h5>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>

<div class="heading-alt-2 text-center">
  <h6 class="heading-main">H6 example heading text</h6>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>

H1 example heading text

H2 example heading text

H3 example heading text

H4 example heading text

H5 example heading text

H6 example heading text

Alternative 2 Right

<div class="heading-alt-2 text-right">
  <h1 class="heading-main">H1 example heading text</h1>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>

<div class="heading-alt-2 text-right">
  <h2 class="heading-main">H2 example heading text</h2>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>

<div class="heading-alt-2 text-right">
  <h3 class="heading-main">H3 example heading text</h3>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>

<div class="heading-alt-2 text-right">
  <h4 class="heading-main">H4 example heading text</h4>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>

<div class="heading-alt-2 text-right">
  <h5 class="heading-main">H5 example heading text</h5>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>

<div class="heading-alt-2 text-right">
  <h6 class="heading-main">H6 example heading text</h6>
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>

H1 example heading text

H2 example heading text

H3 example heading text

H4 example heading text

H5 example heading text

H6 example heading text

Line

<div class="heading-line text-center">
  <h1 class="heading-main">H1 example heading text</h1>
</div>

<div class="heading-line text-center">
  <h2 class="heading-main">H2 example heading text</h2>
</div>

<div class="heading-line text-center">
  <h3 class="heading-main">H3 example heading text</h3>
</div>

<div class="heading-line text-center">
  <h4 class="heading-main">H4 example heading text</h4>
</div>

<div class="heading-line text-center">
  <h5 class="heading-main">H5 example heading text</h5>
</div>

<div class="heading-line text-center">
  <h6 class="heading-main">H6 example heading text</h6>
</div>

H1 example heading text

H2 example heading text

H3 example heading text

H4 example heading text

H5 example heading text

H6 example heading text

Zig zag

<div class="heading-zig-zag text-center">
  <h1 class="heading-main">H1 example heading text</h1>
</div>

<div class="heading-zig-zag text-center">
  <h2 class="heading-main">H2 example heading text</h2>
</div>

<div class="heading-zig-zag text-center">
  <h3 class="heading-main">H3 example heading text</h3>
</div>

<div class="heading-zig-zag text-center">
  <h4 class="heading-main">H4 example heading text</h4>
</div>

<div class="heading-zig-zag text-center">
  <h5 class="heading-main">H5 example heading text</h5>
</div>

<div class="heading-zig-zag text-center">
  <h6 class="heading-main">H6 example heading text</h6>
</div>

H1 example heading text

H2 example heading text

H3 example heading text

H4 example heading text

H5 example heading text

H6 example heading text

Theme color

<div class="heading-line heading-line-theme text-center">
  <h1 class="heading-main">H1 example heading text</h1>
</div>

<div class="heading-line heading-line-theme text-center">
  <h2 class="heading-main">H2 example heading text</h2>
</div>

<div class="heading-line heading-line-theme text-center">
  <h3 class="heading-main">H3 example heading text</h3>
</div>

<div class="heading-line heading-line-theme text-center">
  <h4 class="heading-main">H4 example heading text</h4>
</div>

<div class="heading-line heading-line-theme text-center">
  <h5 class="heading-main">H5 example heading text</h5>
</div>

<div class="heading-line heading-line-theme text-center">
  <h6 class="heading-main">H6 example heading text</h6>
</div>

H1 example heading text

H2 example heading text

H3 example heading text

H4 example heading text

H5 example heading text

H6 example heading text

Fullwidth heading

Unstyled

<div class="fw-heading fw-heading-default block-tiny-even">
  <div class="fw-heading-content text-center">
    <h2 class="fw-heading-text h1">
      Kate is super customizable, responsive &amp; neat HTML5 theme
    </h2>
    <p>Short sub-text to define the heading</p>
  </div>
</div>

Kate is super customizable, responsive & neat HTML5 theme

Short sub-text to define the heading

Parallax

<div class="fw-heading fw-heading-bg block-small-even" data-parallax="scroll">
  <div class="fw-heading-content text-center">
    <h2 class="fw-heading-text h1">
      Kate is super customizable, responsive &amp; neat HTML5 theme
    </h2>
    <p>Short sub-text to define the heading</p>
  </div>
</div>

Kate is super customizable, responsive & neat HTML5 theme

Short sub-text to define the heading

Parllax stable

<div class="fw-heading fw-heading-bg block-small-even" data-parallax="scroll" data-speed="0">
  <div class="fw-heading-content text-center">
    <h2 class="fw-heading-text h1">
      Kate is super customizable, responsive &amp; neat HTML5 theme
    </h2>
    <p>Short sub-text to define the heading</p>
  </div>
</div>

Kate is super customizable, responsive & neat HTML5 theme

Short sub-text to define the heading

Theme color BG

<div class="fw-heading fw-heading-theme block-tiny-even">
  <div class="fw-heading-content text-center">
    <h2 class="fw-heading-text h1">
      Kate is super customizable, responsive &amp; neat HTML5 theme
    </h2>
    <p>Short sub-text to define the heading</p>
  </div>
</div>

Kate is super customizable, responsive & neat HTML5 theme

Short sub-text to define the heading

Grayscale

<div class="fw-heading fw-grayscale block-tiny-even">
  <div class="fw-heading-content text-center">
    <h2 class="fw-heading-text h1">
      Kate is super customizable, responsive &amp; neat HTML5 theme
    </h2>
    <p>Short sub-text to define the heading</p>
  </div>
</div>

Kate is super customizable, responsive & neat HTML5 theme

Short sub-text to define the heading

Background

<div class="fw-heading fw-heading-bg block-small-even">
  <div class="fw-heading-content text-center">
    <h2 class="fw-heading-text h1">
      Kate is super customizable, responsive &amp; neat HTML5 theme
    </h2>
    <p>Short sub-text to define the heading</p>
  </div>
</div>

Kate is super customizable, responsive & neat HTML5 theme

Short sub-text to define the heading

Fullwidth Button

Unstyled

<div class="spacer-medium fw-button text-center">
  <a href="#" class="fw-button-text h3"><span>Neat code, full responsiveness, retina-ready graphics. <span class='strong'>Find out more!</span></span> <i class='fa fa-angle-double-right'></i></a>
</div>

Neat code, full responsiveness, retina-ready graphics. Find out more!

Gray to Theme color

<div class="spacer-medium fw-button fw-button-gray-to-theme text-center">
  <a href="#" class="fw-button-text h3"><span>Neat code, full responsiveness, retina-ready graphics. <span class='strong'>Find out more!</span></span> <i class='fa fa-angle-double-right'></i></a>
</div>

Neat code, full responsiveness, retina-ready graphics. Find out more!

No animation

<div class="spacer-medium fw-button fw-button-gray-to-theme text-center">
  <a href="#" class="fw-button-text fw-button-no-anim h3"><span>Neat code, full responsiveness, retina-ready graphics. <span class='strong'>Find out more!</span></span> <i class='fa fa-angle-double-right'></i></a>
</div>

Neat code, full responsiveness, retina-ready graphics. Find out more!

Gray to Theme color alt

<div class="spacer-medium fw-button fw-button-gray-to-theme-alt text-center">
  <a href="#" class="fw-button-text h3"><span>Neat code, full responsiveness, retina-ready graphics. <span class='strong'>Find out more!</span></span> <i class='fa fa-angle-double-right'></i></a>
</div>

Neat code, full responsiveness, retina-ready graphics. Find out more!

Theme color BG

<div class="spacer-medium fw-button fw-button-theme text-center">
  <a href="#" class="fw-button-text h3"><span>Neat code, full responsiveness, retina-ready graphics. <span class='strong'>Find out more!</span></span> <i class='fa fa-angle-double-right'></i></a>
</div>

Neat code, full responsiveness, retina-ready graphics. Find out more!

Theme color BG alt

<div class="spacer-medium fw-button fw-button-theme fw-button-theme-alt text-center">
  <a href="#" class="fw-button-text h3"><span>Neat code, full responsiveness, retina-ready graphics. <span class='strong'>Find out more!</span></span> <i class='fa fa-angle-double-right'></i></a>
</div>

Neat code, full responsiveness, retina-ready graphics. Find out more!

Theme color BG inverse

<div class="spacer-medium fw-button fw-button-theme fw-button-theme-inverse text-center">
  <a href="#" class="fw-button-text h3"><span>Neat code, full responsiveness, retina-ready graphics. <span class='strong'>Find out more!</span></span> <i class='fa fa-angle-double-right'></i></a>
</div>

Neat code, full responsiveness, retina-ready graphics. Find out more!

Theme color BG inverse alt

<div class="spacer-medium fw-button fw-button-theme fw-button-theme-inverse-alt text-center">
  <a href="#" class="fw-button-text h3"><span>Neat code, full responsiveness, retina-ready graphics. <span class='strong'>Find out more!</span></span> <i class='fa fa-angle-double-right'></i></a>
</div>

Neat code, full responsiveness, retina-ready graphics. Find out more!

Background

<div class="spacer-tall fw-button fw-button-bg text-center">
  <a href="#" class="fw-button-text h3"><span>Neat code, full responsiveness, retina-ready graphics. <span class='strong'>Find out more!</span></span> <i class='fa fa-angle-double-right'></i></a>
</div>

Neat code, full responsiveness, retina-ready graphics. Find out more!

⌃

Open Kate Lab

Dark theme *
Theme color *
- Default colors:
- Google design guidelines colors:
- Custom color:
Boxed layout *
Scrollbar
- Browser Default Smooth scrolling
- Slim scrollbar Slim + Smooth
Button border radius
- Default Squared Pill
Shop
- Modal minicart
- Sync cart & modalcart
Form options
- Default form fields *
- Thick form field borders *
- Default Checkboxes
Default modal window*
Slab headings *
Disable parallax
Frame mode
Disable page transition

* without reload

Code pane