- var page_Title = 'Typography';
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var animate               = true;
- var scrollbar             = true;
- var clipboard             = true;
- var prism                 = true;
- var customcard            = true;
- var height_equal          = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    //- include ../../components/loader
    //- include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3 
                    | Typography
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item 
                      a(href='index.html') 
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Ui Kits 
                    li.breadcrumb-item.active Typography 
          // Container-fluid starts  
          .container  
            .grid.grid-cols-12.card-gap
              div(class="col-span-6 xxl:col-span-12") 
                .card
                  .card-header 
                    h5.mb-0 Headings  
                    p.f-m-light.mt-1 
                      | All HTML headings,
                      code &lt;h1&gt; 
                      |  through  
                      code &lt;h6&gt; 
                      | , are available. 
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body
                    .overflow-x-auto.custom-scrollbar
                      table.table.mb-0.typography-table.w-full
                        thead
                          tr 
                            th(class="!pt-0") Code
                            th(class="!pt-0") Font-Size
                            th(class="!pt-0") Heading
                        tbody
                          tr 
                            td
                              code.whitespace-nowrap &lt;h1&gt;&lt;/h1&gt;
                            td
                              h1.mb-0 1.625rem
                            td
                              h1
                                span Heading 1 (MEGA)
                          tr
                            td
                              code.whitespace-nowrap &lt;h2&gt;&lt;/h2&gt;
                            td
                              h2.mb-0 1.5rem
                            td
                              h2
                                span Heading 2 (XL)
                          tr
                            td
                              code.whitespace-nowrap &lt;h3&gt;&lt;/h3&gt;
                            td
                              h3.mb-0 1.375rem
                            td
                              h3
                                span Heading 3 (LARGE)
                          tr
                            td
                              code.whitespace-nowrap &lt;h4&gt;&lt;/h4&gt;
                            td
                              h4.mb-0 1.25rem
                            td
                              h4
                                span Heading 4 (MEDIUM)
                          tr
                            td
                              code.whitespace-nowrap &lt;h5&gt;&lt;/h5&gt;
                            td
                              h5.mb-0 1.125rem
                            td
                              h5
                                span Heading 5 (SMALL)
                          tr
                            td.pb-0
                              code.whitespace-nowrap &lt;h6&gt;&lt;/h6&gt;
                            td.pb-0
                              h6.mb-0 1rem
                            td.pb-0
                              h6
                                span Heading 6
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#common-heading' title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#common-heading
                          |&lt;div class="overflow-x-auto custom-scrollbar"&gt;
                          |  &lt;table class="table mb-0 typography-table"&gt;
                          |    &lt;thead&gt;
                          |      &lt;tr&gt;
                          |        &lt;th class="pt-0"&gt;Code&lt;/th&gt;
                          |        &lt;th class="pt-0"&gt;Font-Size&lt;/th&gt;
                          |        &lt;th class="pt-0"&gt;Heading&lt;/th&gt;
                          |      &lt;/tr&gt;
                          |    &lt;/thead&gt;
                          |    &lt;tbody&gt;
                          |      &lt;tr&gt;
                          |        &lt;td&gt;
                          |          &lt;code&gt;&lt;h1&gt;&lt;/h1&gt;&lt;/code&gt;
                          |        &lt;/td&gt;
                          |        &lt;td&gt;
                          |          &lt;h1 class="mb-0"&gt;1.625rem&lt;/h1&gt;
                          |        &lt;/td&gt;
                          |        &lt;td&gt;
                          |          &lt;h1&gt;
                          |            &lt;span&gt;Heading 1 (MEGA)&lt;/span&gt;
                          |          &lt;/h1&gt;
                          |        &lt;/td&gt;
                          |      &lt;/tr&gt;
                          |      &lt;tr&gt;
                          |        &lt;td&gt;
                          |          &lt;code&gt;&lt;h2&gt;&lt;/h2&gt;&lt;/code&gt;
                          |        &lt;/td&gt;
                          |        &lt;td&gt;
                          |          &lt;h2 class="mb-0"&gt;1.5rem&lt;/h2&gt;
                          |        &lt;/td&gt;
                          |        &lt;td&gt;
                          |          &lt;h2&gt;
                          |            &lt;span&gt;Heading 2 (XL)&lt;/span&gt;
                          |          &lt;/h2&gt;
                          |        &lt;/td&gt;
                          |      &lt;/tr&gt;
                          |      &lt;tr&gt;
                          |        &lt;td&gt;
                          |          &lt;code&gt;&lt;h3&gt;&lt;/h3&gt;&lt;/code&gt;
                          |        &lt;/td&gt;
                          |        &lt;td&gt;
                          |          &lt;h3 class="mb-0"&gt;1.375rem&lt;/h3&gt;
                          |        &lt;/td&gt;
                          |        &lt;td&gt;
                          |          &lt;h3&gt;
                          |            &lt;span&gt;Heading 3 (LARGE)&lt;/span&gt;
                          |          &lt;/h3&gt;
                          |        &lt;/td&gt;
                          |      &lt;/tr&gt;
                          |      &lt;tr&gt;
                          |        &lt;td&gt;
                          |          &lt;code&gt;&lt;h4&gt;&lt;/h4&gt;&lt;/code&gt;
                          |        &lt;/td&gt;
                          |        &lt;td&gt;
                          |          &lt;h4 class="mb-0"&gt;1.25rem&lt;/h4&gt;
                          |        &lt;/td&gt;
                          |        &lt;td&gt;
                          |          &lt;h4&gt;
                          |            &lt;span&gt;Heading 4 (MEDIUM)&lt;/span&gt;
                          |          &lt;/h4&gt;
                          |        &lt;/td&gt;
                          |      &lt;/tr&gt;
                          |      &lt;tr&gt;
                          |        &lt;td&gt;
                          |          &lt;code&gt;&lt;h5&gt;&lt;/h5&gt;&lt;/code&gt;
                          |        &lt;/td&gt;
                          |        &lt;td&gt;
                          |          &lt;h5 class="mb-0"&gt;1.125rem&lt;/h5&gt;
                          |        &lt;/td&gt;
                          |        &lt;td&gt;
                          |          &lt;h5&gt;
                          |            &lt;span&gt;Heading 5 (SMALL)&lt;/span&gt;
                          |          &lt;/h5&gt;
                          |        &lt;/td&gt;
                          |      &lt;/tr&gt;
                          |      &lt;tr&gt;
                          |        &lt;td class="pb-0"&gt;
                          |          &lt;code&gt;&lt;h6&gt;&lt;/h6&gt;&lt;/code&gt;
                          |        &lt;/td&gt;
                          |        &lt;td class="pb-0"&gt;
                          |          &lt;h6 class="mb-0"&gt;1rem&lt;/h6&gt;
                          |        &lt;/td&gt;
                          |        &lt;td class="pb-0"&gt;
                          |          &lt;h6&gt;
                          |            &lt;span&gt;Heading 6&lt;/span&gt;
                          |          &lt;/h6&gt;
                          |        &lt;/td&gt;
                          |      &lt;/tr&gt;
                          |    &lt;/tbody&gt;
                          |  &lt;/table&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 xxl:col-span-12")
                .card
                  .card-header 
                    h5 Colored Headings
                    p.f-m-light.mt-1
                      | All HTML headings, 
                      code &lt;h1&gt;
                      |  through 
                      code &lt;h6&gt;
                      | , are available.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body
                    .overflow-x-auto.custom-scrollbar
                      table.table.mb-0.typography-table.w-full
                        thead
                          tr
                            th(class="!pt-0") Code
                            th(class="!pt-0") Heading
                        tbody
                          tr
                            td
                              code.whitespace-nowrap &lt;h1&gt;&lt;/h1&gt;
                            td
                              h1
                                span.txt-primary  Heading 1
                                |  Sub Heading
                          tr
                            td
                              code.whitespace-nowrap &lt;h2&gt;&lt;/h2&gt;
                            td
                              h2
                                span.txt-secondary  Heading 1
                                |  Sub Heading
                          tr
                            td
                              code.whitespace-nowrap &lt;h3&gt;&lt;/h3&gt;
                            td
                              h3
                                span.txt-success  Heading 1
                                |  Sub Heading
                          tr
                            td
                              code.whitespace-nowrap &lt;h4&gt;&lt;/h4&gt;
                            td
                              h4
                                span.txt-info  Heading 1
                                |  Sub Heading
                          tr
                            td
                              code.whitespace-nowrap &lt;h5&gt;&lt;/h5&gt;
                            td
                              h5
                                span.txt-warning  Heading 1
                                |  Sub Heading
                          tr
                            td.pb-0
                              code.whitespace-nowrap &lt;h6&gt;&lt;/h6&gt;
                            td.pb-0
                              h6
                                span.txt-danger  Heading 1
                                |  Sub Heading
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#color-heading' title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#color-heading
                          |&lt;div class="overflow-x-auto"&gt;
                          |  &lt;table class="table mb-0 typography-table"&gt;
                          |    &lt;thead&gt;
                          |      &lt;tr&gt;
                          |        &lt;th class="pt-0"&gt;Code&lt;/th&gt;
                          |        &lt;th class="pt-0"&gt;Heading&lt;/th&gt;
                          |      &lt;/tr&gt;
                          |    &lt;/thead&gt;
                          |    &lt;tbody&gt;
                          |      &lt;tr&gt;
                          |        &lt;td&gt;&lt;code&gt;&lt;h1&gt;&lt;/h1&gt;&lt;/code&gt;&lt;/td&gt;
                          |        &lt;td&gt;
                          |          &lt;h1&gt;&lt;span class="txt-primary"&gt;Heading 1&lt;/span&gt;Sub Heading&lt;/h1&gt;
                          |        &lt;/td&gt;
                          |      &lt;/tr&gt;
                          |      &lt;tr&gt;
                          |        &lt;td&gt;&lt;code&gt;&lt;h2&gt;&lt;/h2&gt;&lt;/code&gt;&lt;/td&gt;
                          |        &lt;td&gt;
                          |          &lt;h2&gt;&lt;span class="txt-secondary"&gt;Heading 1&lt;/span&gt;Sub Heading&lt;/h2&gt;
                          |        &lt;/td&gt;
                          |      &lt;/tr&gt;
                          |      &lt;tr&gt;
                          |        &lt;td&gt;&lt;code&gt;&lt;h3&gt;&lt;/h3&gt;&lt;/code&gt;&lt;/td&gt;
                          |        &lt;td&gt;
                          |          &lt;h3&gt;&lt;span class="txt-success"&gt;Heading 1&lt;/span&gt;Sub Heading&lt;/h3&gt;
                          |        &lt;/td&gt;
                          |      &lt;/tr&gt;
                          |      &lt;tr&gt;
                          |        &lt;td&gt;&lt;code&gt;&lt;h4&gt;&lt;/h4&gt;&lt;/code&gt;&lt;/td&gt;
                          |        &lt;td&gt;
                          |          &lt;h4&gt;&lt;span class="txt-info"&gt;Heading 1&lt;/span&gt;Sub Heading&lt;/h4&gt;
                          |        &lt;/td&gt;
                          |      &lt;/tr&gt;
                          |      &lt;tr&gt;
                          |        &lt;td&gt;&lt;code&gt;&lt;h5&gt;&lt;/h5&gt;&lt;/code&gt;&lt;/td&gt;
                          |        &lt;td&gt;
                          |          &lt;h5&gt;&lt;span class="txt-warning"&gt;Heading 1&lt;/span&gt;Sub Heading&lt;/h5&gt;
                          |        &lt;/td&gt;
                          |      &lt;/tr&gt;
                          |      &lt;tr&gt;
                          |        &lt;td class="pb-0"&gt;&lt;code&gt;&lt;h6&gt;&lt;/h6&gt;&lt;/code&gt;&lt;/td&gt;
                          |        &lt;td class="pb-0"&gt;
                          |          &lt;h6&gt;&lt;span class="txt-danger"&gt;Heading 1&lt;/span&gt;Sub Heading&lt;/h6&gt;
                          |        &lt;/td&gt;
                          |      &lt;/tr&gt;
                          |    &lt;/tbody&gt;
                          |  &lt;/table&gt;
                          |&lt;/div&gt;                         
              div(class="col-span-12")
                .card
                  .card-header
                    h5 Font Weight
                    p.f-m-light.mt-1
                      | Using 
                      code f-w-*
                      |  class, you can change the font weight.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body.flex.flex-col.gap-3
                    h1.font-black
                      | You can set bolder font weight Heading 1 using
                      code  font-black
                    h2.font-bold
                      | You can set bold font weight Heading 2 using
                      code  font-bold
                    h3.font-semibold
                      | You can set medium font weight Heading 3 using
                      code  font-semibold
                    h4.font-medium
                      | You can set normal font weight Heading 4 using
                      code  font-medium
                    h5.font-normal
                      | You can set light font weight Heading 5 using
                      code  font-normal
                    h6(class="font-[300]")
                      | You can set light font weight Heading 6 using
                      code  font-light
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#common-weight' title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#common-weight
                          |&lt;h1 class="font-black"&gt;You can set bolder font weight Heading 1 using&lt;code&gt;font-black&lt;/code&gt;&lt;/h1&gt;
                          |&lt;h2 class="font-bold"&gt;You can set bold font weight Heading 2 using&lt;code&gt;font-bold&lt;/code&gt;&lt;/h2&gt;
                          |&lt;h3 class="font-semibold"&gt;You can set medium font weight Heading 3 using&lt;code&gt;font-semibold&lt;/code&gt;&lt;/h3&gt;
                          |&lt;h4 class="font-medium"&gt;You can set normal font weight Heading 4 using&lt;code&gt;font-medium&lt;/code&gt;&lt;/h4&gt;
                          |&lt;h5 class="font-normal"&gt;You can set light font weight Heading 5 using&lt;code&gt;font-normal&lt;/code&gt;&lt;/h5&gt;
                          |&lt;h6 class="font-light"&gt;You can set light font weight Heading 6 using&lt;code&gt;font-light&lt;/code&gt;&lt;/h6&gt;
              div(class="col-span-12 listing")
                .card
                  .card-header
                    h5 Listing Typography
                    p.f-m-light.mt-1
                      | All typography list:- 
                      code &lt;ul&gt;
                      | ,
                      code &lt;ol&gt;
                      |  &amp; 
                      code &lt;dl&gt;
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body.typography-list
                    .grid.grid-cols-12.gap-3
                      div(class="col-span-3 xxl:col-span-6 md:col-span-12")
                        .card-wrapper.custom-border.rounded-3.h-full
                          h6.sub-title Un-order List
                          ul
                            li This is a list.
                            li It appears completely unstyled.
                            li Structurally, it&apos;s still a list.
                            li However, this style only applies to immediate child elements.
                            li
                              | Nested lists:
                              ul
                                li Are unaffected by this style
                                li Will still show a bullet
                                li And have appropriate left margin
                            li This may still come in handy in some situations.
                      div(class="col-span-3 xxl:col-span-6 md:col-span-12")
                        .card-wrapper.custom-border.rounded-3.h-full
                          h6.sub-title Order List
                          ol
                            li This is a list.
                            li It appears completely unstyled.
                            li Structurally, it&apos;s still a list.
                            li However, this style only applies to immediate child elements.
                            li
                              | Nested lists:
                              ol
                                li Are unaffected by this style
                                li Will still show a bullet
                                li And have appropriate left margin
                            li This may still come in handy in some situations.
                      div(class="col-span-6 xxl:col-span-12")
                        .card-wrapper.custom-border.rounded-3.h-full
                          h6.sub-title Description List
                          dl.grid.grid-cols-12.card-gap
                            div(class="col-span-3 sm:col-span-12")  
                              dt.text-truncate Description lists
                            div(class="col-span-9 sm:col-span-12")  
                              dd A description list is perfect for defining terms.
                            div(class="col-span-3 sm:col-span-12")  
                              dt Term
                            div(class="col-span-9 sm:col-span-12")  
                              dd
                                p Definition for the term.
                                p And some more placeholder definition text.
                            div(class="col-span-3 sm:col-span-12")  
                              dt Another term
                            div(class="col-span-9 sm:col-span-12")  
                              dd This definition is short, so no extra paragraphs or anything.
                            div(class="col-span-3 sm:col-span-12")  
                              dt.text-truncate Truncated term is truncated
                            div(class="col-span-9 sm:col-span-12")  
                              dd This can be useful when space is tight. Adds an ellipsis at the end.
                            div(class="col-span-3 sm:col-span-12")  
                              dt Nesting
                            div(class="col-span-9 sm:col-span-12")  
                              dd
                              dl.grid.grid-cols-12
                                div(class="col-span-4 sm:col-span-12")
                                  dt Nested definition list
                                div(class="col-span-8 sm:col-span-12")  
                                  dd
                                    | I heard you like definition lists. Let me put a definition list inside your definition list.
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#list-typography' title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#list-typography
                          |&lt;div class="card-body typography-list"&gt;
                          |  &lt;div class="grid grid-cols-12 gap-3"&gt;
                          |    &lt;div class="col-span-3 xxl:col-span-6 md:col-span-12"&gt;
                          |      &lt;div class="card-wrapper border rounded-3 h-full"&gt;
                          |        &lt;h6 class="sub-title"&gt;Un-order List&lt;/h6&gt;
                          |        &lt;ul&gt;
                          |          &lt;li&gt;This is a list.&lt;/li&gt;
                          |          &lt;li&gt;It appears completely unstyled.&lt;/li&gt;
                          |          &lt;li&gt;Structurally, it&apos;s still a list.&lt;/li&gt;
                          |          &lt;li&gt;However, this style only applies to immediate child elements.&lt;/li&gt;
                          |          &lt;li&gt;Nested lists:
                          |            &lt;ul&gt;
                          |              &lt;li&gt;Are unaffected by this style&lt;/li&gt;
                          |              &lt;li&gt;Will still show a bullet&lt;/li&gt;
                          |              &lt;li&gt;And have appropriate left margin&lt;/li&gt;
                          |            &lt;/ul&gt;
                          |          &lt;/li&gt;
                          |          &lt;li&gt;This may still come in handy in some situations.&lt;/li&gt;
                          |        &lt;/ul&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |    &lt;div class="col-span-3 xxl:col-span-6 md:col-span-12"&gt;
                          |      &lt;div class="card-wrapper border rounded-3 h-full"&gt;
                          |        &lt;h6 class="sub-title"&gt;Order List&lt;/h6&gt;
                          |        &lt;ol&gt;
                          |          &lt;li&gt;This is a list.&lt;/li&gt;
                          |          &lt;li&gt;It appears completely unstyled.&lt;/li&gt;
                          |          &lt;li&gt;Structurally, it&apos;s still a list.&lt;/li&gt;
                          |          &lt;li&gt;However, this style only applies to immediate child elements.&lt;/li&gt;
                          |          &lt;li&gt;Nested lists:
                          |            &lt;ol&gt;
                          |              &lt;li&gt;Are unaffected by this style&lt;/li&gt;
                          |              &lt;li&gt;Will still show a bullet&lt;/li&gt;
                          |              &lt;li&gt;And have appropriate left margin&lt;/li&gt;
                          |            &lt;/ol&gt;
                          |          &lt;/li&gt;
                          |          &lt;li&gt;This may still come in handy in some situations.&lt;/li&gt;
                          |        &lt;/ol&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |    &lt;div class="col-span-6 xxl:col-span-12"&gt;
                          |      &lt;div class="card-wrapper border rounded-3 h-full"&gt;
                          |        &lt;h6 class="sub-title"&gt;Description List&lt;/h6&gt;
                          |        &lt;dl class="grid grid-cols-12"&gt;
                          |          &lt;dt class="col-span-3 sm:col-span-12 text-truncate"&gt;Description lists&lt;/dt&gt;
                          |          &lt;dd class="col-span-9 sm:col-span-12"&gt;A description list is perfect for defining terms.&lt;/dd&gt;
                          |          &lt;dt class="col-span-3 sm:col-span-12"&gt;Term&lt;/dt&gt;
                          |          &lt;dd class="col-span-9 sm:col-span-12"&gt;
                          |            &lt;p&gt;Definition for the term.&lt;/p&gt;
                          |            &lt;p&gt;And some more placeholder definition text.&lt;/p&gt;
                          |          &lt;/dd&gt;
                          |          &lt;dt class="col-span-3 sm:col-span-12"&gt;Another term&lt;/dt&gt;
                          |          &lt;dd class="col-span-9 sm:col-span-12"&gt;This definition is short, so no extra paragraphs or anything.&lt;/dd&gt;
                          |          &lt;dt class="col-span-3 sm:col-span-12 text-truncate"&gt;Truncated term is truncated&lt;/dt&gt;
                          |          &lt;dd class="col-span-9 sm:col-span-12"&gt;This can be useful when space is tight. Adds an ellipsis at the end.&lt;/dd&gt;
                          |          &lt;dt class="col-span-3 sm:col-span-12"&gt;Nesting&lt;/dt&gt;
                          |          &lt;dd class="col-span-9 sm:col-span-12"&gt;
                          |            &lt;dl class="grid grid-12"&gt;
                          |              &lt;dt class="col-span-4 sm:col-span-12"&gt;Nested definition list&lt;/dt&gt;
                          |              &lt;dd class="col-span-8 sm:col-span-12"&gt;I heard you like definition lists. Let me put a definition list inside your definition list.&lt;/dd&gt;
                          |            &lt;/dl&gt;
                          |          &lt;/dd&gt;
                          |        &lt;/dl&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-12")
                  .card
                    .card-header
                      h5 Display Headings 
                      p.f-m-light.mt-1
                        | When you need a heading to stand out, consider using a
                        mark display heading
                        | &mdash;a
                        | larger, slightly more opinionated heading style.
                      .card-header-right
                        ul.list-unstyled.card-option
                          li
                            i.fa-solid.fa-gear.fa-spin
                          li
                            i.view-html.fa-solid.fa-code
                          li
                            i.icofont.icofont-maximize.full-card
                          li
                            i.icofont.icofont-minus.minimize-card
                          li
                            i.icofont.icofont-refresh.reload-card
                          li
                            i.icofont.icofont-error.close-card
                    .card-body.flex.flex-col.gap-3
                      h1.display-1 Display 1
                      h2.display-2 Display 2
                      h3.display-3 Display 3
                      h4.display-4 Display 4
                      h5.display-5 Display 5
                      h6.display-6 Display 6
                      .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#display-heading', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre.custom-scrollbar
                          code.language-html#display-heading
                            |&lt;h1 class="display-1"&gt;Display 1&lt;/h1&gt;
                            |&lt;h2 class="display-2"&gt;Display 2&lt;/h2&gt;
                            |&lt;h3 class="display-3"&gt;Display 3&lt;/h3&gt;
                            |&lt;h4 class="display-4"&gt;Display 4&lt;/h4&gt;
                            |&lt;h5 class="display-5"&gt;Display 5&lt;/h5&gt;
                            |&lt;h6 class="display-6"&gt;Display 6&lt;/h6&gt;
              div(class="col-span-6 xl:col-span-12")
                .card
                  .card-header
                    h4 Inline Text Elements
                    p.f-m-light.mt-1 Styling for common inline HTML5 elements.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body
                    .flex.flex-col.gap-2
                      p.mb-0
                        | You can use the mark tag to 
                        mark highlight
                        |  text.
                      p.mb-0
                        del This line of text is meant to be treated as deleted text.
                      p.mb-0
                        s This line of text is meant to be treated as no longer accurate.
                      p.mb-0
                        ins
                          | This line of text is meant to be treated as an addition to the
                          | document.
                      p.mb-0
                        u This line of text will render as underlined
                      p.mb-0
                        small This line of text is meant to be treated as fine print.
                      p.mb-0
                        strong This line rendered as bold text.
                      p.mb-0
                        em This line rendered as italicized text.
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#text-elements' title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#text-elements
                          |&lt;div class="flex flex-col gap-2"&gt;
                          |  &lt;p class="mb-0"&gt;You can use the mark tag to 
                          |    &lt;mark&gt;highlight&lt;/mark&gt; text.
                          |  &lt;/p&gt;
                          |  &lt;p class="mb-0"&gt;
                          |    &lt;del&gt;This line of text is meant to be treated as deleted text.&lt;/del&gt;
                          |  &lt;/p&gt;
                          |  &lt;p class="mb-0"&gt;
                          |    &lt;s&gt;This line of text is meant to be treated as no longer accurate.&lt;/s&gt;
                          |  &lt;/p&gt;
                          |  &lt;p class="mb-0"&gt;
                          |    &lt;ins&gt;This line of text is meant to be treated as an addition to the document.&lt;/ins&gt;
                          |  &lt;/p&gt;
                          |  &lt;p class="mb-0"&gt;
                          |    &lt;u&gt;This line of text will render as underlined&lt;/u&gt;
                          |  &lt;/p&gt;
                          |  &lt;p class="mb-0"&gt;
                          |    &lt;small&gt;This line of text is meant to be treated as fine print.&lt;/small&gt;
                          |  &lt;/p&gt;
                          |  &lt;p class="mb-0"&gt;
                          |    &lt;strong&gt;This line rendered as bold text.&lt;/strong&gt;
                          |  &lt;/p&gt;
                          |  &lt;p class="mb-0"&gt;
                          |    &lt;em&gt;This line rendered as italicized text.&lt;/em&gt;
                          |  &lt;/p&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 xl:col-span-12")
                .card
                  .card-header
                    h5 Text Colors
                    p.f-m-light.mt-1
                      | You give text color by using 
                      code txt-*
                      |  classes.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body
                    .flex.flex-col.gap-2
                      p.txt-primary.mb-0
                        | The 
                        code "txt-primary" 
                        | class can be used to create an text like this one.
                      p.txt-secondary.mb-0
                        | The 
                        code "txt-secondary" 
                        | class can be used to create an text like this one.
                      p.txt-success.mb-0
                        | The 
                        code "txt-success" 
                        | class can be used to create an text like this one.
                        |  class
                      p.txt-info.mb-0
                        | The 
                        code "txt-info" 
                        | class can be used to create an text like this one.
                        |  class
                      p.txt-warning.mb-0
                        | The 
                        code "txt-warning" 
                        | class can be used to create an text like this one.
                      p.txt-danger.mb-0
                        | The 
                        code "txt-danger" 
                        | class can be used to create an text like this one.
                      p.txt-dark.mb-0
                        | The 
                        code "txt-dark" 
                        | class can be used to create an text like this one.
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#text-colors' title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#text-colors
                          |&lt;div class="flex flex-col gap-2"&gt;
                          |  &lt;p class="txt-primary mb-0"&gt;The
                          |    &lt;code&gt;"txt-primary"&lt;/code&gt;class can be used to create an text like this one.
                          |  &lt;/p&gt;
                          |  &lt;p class="txt-secondary mb-0"&gt;The
                          |    &lt;code&gt;"txt-secondary"&lt;/code&gt;class can be used to create an text like this one.
                          |  &lt;/p&gt;
                          |  &lt;p class="txt-success mb-0"&gt;The
                          |    &lt;code&gt;"txt-success"&lt;/code&gt;class can be used to create an text like this one. class
                          |  &lt;/p&gt;
                          |  &lt;p class="txt-info mb-0"&gt;The
                          |    &lt;code&gt;"txt-info"&lt;/code&gt;class can be used to create an text like this one. class
                          |  &lt;/p&gt;
                          |  &lt;p class="txt-warning mb-0"&gt;The
                          |    &lt;code&gt;"txt-warning"&lt;/code&gt;class can be used to create an text like this one.
                          |  &lt;/p&gt;
                          |  &lt;p class="txt-danger mb-0"&gt;The
                          |    &lt;code&gt;"txt-danger"&lt;/code&gt;class can be used to create an text like this one.
                          |  &lt;/p&gt;
                          |  &lt;p class="txt-dark mb-0"&gt;The
                          |    &lt;code&gt;"txt-dark"&lt;/code&gt;class can be used to create an text like this one.
                          |  &lt;/p&gt;
                          |&lt;/div&gt;
              div(class="col-span-12") 
                .card.overflow-hidden
                  .card-header
                    h5 Blockquote
                    p.f-m-light.mt-1
                      | The 
                      code &lt;blockquote&gt;
                      |  tag specifies a section that is quoted from another source.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body
                    .figure.block.dark-blockquote
                      blockquote.blockquote.light-card(class="!mb-2")
                        p.mb-0
                          | The only impossible journey is the one you never begin.
                        span.blockquote-footer.pt-3
                          | Tony Robbins
                    .figure.text-center.block.dark-blockquote
                      blockquote.blockquote.light-card(class="!mb-2")
                        p.mb-0
                          | In this life we cannot do great things. We can only do small things with great love.
                        span.blockquote-footer.pt-3
                          | Mother Teresa
                    .figure.text-end.block.dark-blockquote
                      blockquote.blockquote.mb-0.light-card(class="!mb-2")
                        p.mb-0
                          | Live in the sunshine, swim the sea, drink the wild air.
                        span.blockquote-footer.pt-3
                          | Ralph Waldo Emerson
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#blockquote-heading' title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#blockquote-heading
                          |&lt;div class="figure block dark-blockquote"&gt;
                          |  &lt;blockquote class="blockquote light-card mb-2"&gt;
                          |    &lt;p class="mb-0"&gt;The only impossible journey is the one you never begin.&lt;/p&gt;
                          |    &lt;span class="blockquote-footer pt-3"&gt;Tony Robbins&lt;/span&gt;
                          |  &lt;/blockquote&gt;
                          |&lt;/div&gt;
                          |&lt;div class="figure text-center block dark-blockquote"&gt;
                          |  &lt;blockquote class="blockquote light-card mb-2"&gt;
                          |    &lt;p class="mb-0"&gt;In this life we cannot do great things. We can only do small things with great love.&lt;/p&gt;
                          |    &lt;span class="blockquote-footer pt-3"&gt;Mother Teresa&lt;/span&gt;
                          |  &lt;/blockquote&gt;
                          |&lt;/div&gt;
                          |&lt;div class="figure text-end block dark-blockquote"&gt;
                          |  &lt;blockquote class="blockquote mb-0 light-card mb-2"&gt;
                          |    &lt;p class="mb-0"&gt;Live in the sunshine, swim the sea, drink the wild air.&lt;/p&gt;
                          |    &lt;span class="blockquote-footer pt-3"&gt;Ralph Waldo Emerson&lt;/span&gt;
                          |  &lt;/blockquote&gt;
                          |&lt;/div&gt;
          // Container-fluid Ends 
        include ../../components/footer   
    include ../../components/footer-files