Elements

These modular elements can be readily used and customized across pages and in different blocks.

    
      <!-- default left aligned -->
      <div class="heading-custom heading-v1 mb-3 bg-white bg-gray">
        <h2 class="heading-title-xl">Lorem ipsum.</h2>
      </div>
      
      <!-- Align center -->
      <div class="heading-custom heading-v1 text-center mb-3 mt-5 bg-white bg-gray">
        <h2 class="heading-title-xl">Lorem ipsum.</h2>
      </div>
      
      <!-- Align right -->
      <div class="heading-custom heading-v1 text-right mb-3 mt-5 bg-white bg-gray">
        <h2 class="heading-title-xl">Lorem ipsum.</h2>
      </div>
how to use
  • Use the same classnames as shown in the avobe code example. If you want to customize, you can add your own class and override the properties

Example

Lorem ipsum.

Lorem ipsum.

Lorem ipsum.

    
      <!-- default left aligned -->
      <div class="heading-custom heading-v1 mb-3 bg-white bg-gray">
        <h2 class="heading-title-lg with-line">Lorem ipsum.</h2>
      </div>
      
      <!-- Align center -->
      <div class="heading-custom heading-v1 text-center mb-3 mt-5 bg-white bg-gray">
        <h2 class="heading-title-lg with-line">Lorem ipsum.</h2>
      </div>
      
      <!-- Align right -->
      <div class="heading-custom heading-v1 text-right mb-3 mt-5 bg-white bg-gray">
        <h2 class="heading-title-lg with-line">Lorem ipsum.</h2>
      </div>
how to use
  • Use the same classnames as shown in the avobe code example. If you want to customize, you can add your own class and override the properties

Example

Lorem ipsum.

Lorem ipsum.

Lorem ipsum.

    
      <!-- default left aligned -->
      <div class="heading-custom heading-v1 mb-3 bg-white bg-gray">
        <h2 class="heading-title-md with-line">Lorem ipsum.</h2>
      </div>
      
      <!-- Align center -->
      <div class="heading-custom heading-v1 text-center mb-3 mt-5 bg-white bg-gray">
        <h2 class="heading-title-md with-line">Lorem ipsum.</h2>
      </div>
      
      <!-- Align right -->
      <div class="heading-custom heading-v1 text-right mb-3 mt-5 bg-white bg-gray">
        <h2 class="heading-title-md with-line">Lorem ipsum.</h2>
      </div>
how to use
  • Use the same classnames as shown in the avobe code example. If you want to customize, you can add your own class and override the properties

Example

Lorem ipsum.

Lorem ipsum.

Lorem ipsum.