mixin TypographyFontFamilyDescription
  p&attributes(attributes) You have three 
    code font-family 
    |  helper classes available to use.

mixin TypographyFontFamilyDemo
  .font-sans-serif Poppins
  = '\n'
  .font-base Open Sans
  = '\n'
  code.text-monospace Monospace

mixin TypographyHeadingDescription
  p&attributes(attributes) All HTML headings, 
    code h1
    | through 
    code h6
    | , are available.

mixin TypographyHeadingDemo
  h1 h1. Heading
  h2 h2. Heading
  h3 h3. Heading
  h4 h4. Heading
  h5 h5. Heading
  h6 h6. Heading

mixin TypographyHeadingClassDescription
  p&attributes(attributes)
    code .h1
    |  through 
    code .h6
    |  classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

mixin TypographyHeadingClassDemo
  p.h1 h1. Heading
  p.h2 h2. Heading
  p.h3 h3. Heading
  p.h4 h4. Heading
  p.h5 h5. Heading
  p.h6 h6. Heading

mixin TypographyCustomizeHeadingDescription
  p&attributes(attributes) Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.

mixin TypographyCustomizeHeadingDemo  
  h3 Fancy display heading
    small.text-500.dark__text-500  With faded secondary text

mixin TypographyFontWeightsDemo
  //- .fw-thin Font weight 100
  //- .fw-lighter Font weight 200
  .fw-light Font weight 300
  .fw-normal Font weight 400
  .fw-medium Font weight 500
  .fw-semi-bold Font weight 600
  .fw-bold Font weight 700
  .fw-bolder Font weight 800
  .fw-black Font weight 900

mixin TypographyDisplayHeadingDescription
  p&attributes(attributes) Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a 
    strong display heading
    | —a larger, slightly more opinionated heading style.

mixin TypographyDisplayHeadingDemo
  h1.display-1.mb-3 Display 1
  h1.display-2.mb-3 Display 2
  h1.display-3.mb-3 Display 3
  h1.display-4.mb-3 Display 4
  h1.display-5.mb-3 Display 5
  h1.display-6.mb-3 Display 6

mixin TypographyColorsDescription
  p&attributes(attributes) Use the following colors to change the text color

mixin TypographyColorsDemo
  h4 Theme Colors:
  h5.text-primary .text-primary
  h5.text-info .text-info
  h5.text-success .text-success
  h5.text-warning .text-warning
  h5.text-danger .text-danger
  h5.text-dark .text-dark
  h5.text-light
    span.bg-1000 .text-light

  h4.mt-4 Grays:
  h5.text-black .text-black
  h5.text-1000 .text-1000
  h5.text-900 .text-900
  h5.text-800 .text-800
  h5.text-700 .text-700
  h5.text-600 .text-600
  h5.text-500 .text-500
  h5.text-400 .text-400
  h5.text-300
    span.bg-black .text-300
  h5.text-200
    span.bg-dark .text-200
  h5.text-white
    span.bg-900 .text-white

  h4.mt-4 Emphasis Colors: 
  h5.text-primary-emphasis .text-primary-emphasis
  h5.text-info-emphasis .text-info-emphasis
  h5.text-success-emphasis .text-success-emphasis
  h5.text-warning-emphasis .text-warning-emphasis
  h5.text-danger-emphasis .text-danger-emphasis
  h5.text-body-emphasis .text-body-emphasis
  h5.text-dark-emphasis .text-dark-emphasis
  h5.text-light-emphasis .text-light-emphasis


mixin TypographySizeDescription
  p&attributes(attributes) If you want different sizes of fonts, you may use the following classes.

mixin TypographySizeDemo
  h6.fs-1 .fs-1
  h6.fs-2 .fs-2
  h6.fs-3 .fs-3
  h6.fs-4 .fs-4
  h6.fs-5 .fs-5
  h6.fs-6 .fs-6
  h6.fs-7 .fs-7
  h6.fs-8 .fs-8
  h6.fs-9 .fs-9
  h6.fs-10 .fs-10
  h6.fs-11 .fs-11
  .mt-3
    h6.fs-sm-9 .fs-sm-9
    h6.fs-md-8 .fs-md-8
    h6.fs-lg-7 .fs-lg-7
    h6.fs-xl-6 .fs-xl-6

mixin TypographyLeadDescription
  p&attributes(attributes) Make a paragraph stand out by adding 
    code .lead

mixin TypographyLeadDemo
  p.lead
    | Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

mixin TypographyDropcapDescription
  p&attributes(attributes) Make a paragraph stand out by adding 
    code .dropcap
    |  class.

mixin TypographyDropcapDemo
  p.dropcap Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius porro hic ex. Earum similique laudantium esse nostrum sed corporis. Libero omnis quos deleniti amet aliquam nam. Natus voluptas reiciendis eligendi reprehenderit, facere tenetur distinctio sunt officia, temporibus aperiam voluptatum quo ducimus illum incidunt adipisci doloremque rem est magnam in, molestiae excepturi odit. Reprehenderit ullam.

mixin TypographyAlignmentDescription
  p&attributes(attributes) Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a 
    code .text-truncate
    |  class to truncate the text with an ellipsis.

mixin TypographyAlignmentDemo
  dl.row
    dt.col-sm-3 Description lists
    dd.col-sm-9 A description list is perfect for defining terms.
    dt.col-sm-3 Euismod
    dd.col-sm-9
      p Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
      p Donec id elit non mi porta gravida at eget metus.
    dt.col-sm-3 Malesuada porta
    dd.col-sm-9 Etiam porta sem malesuada magna mollis euismod.
    dt.col-sm-3.text-truncate Truncated term is truncated
    dd.col-sm-9
      | Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
    dt.col-sm-3 Nesting
    dd.col-sm-9
  dl.row
    dt.col-sm-4 Nested definition list
    dd.col-sm-8 Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

mixin TextTransformationDescription
  p&attributes(attributes) Transform text in components with text capitalization classes.

mixin TextTransformationDemo
  p.text-lowercase Lowercased text.
  p.text-uppercase Uppercased text.
  p.text-capitalize CapiTaliZed text.