extends ../../layouts/LayoutComponent
include ../../mixins/utilities/Float

append variables

  -
    var pageHeader = {
      title: 'Float',
      description: 'Toggle floats on any element, across any breakpoint, using our responsive float utilities',
      url: `https://getbootstrap.com/docs/${bootstrapVersion}/utilities/float/`,
      linkText: 'Float on Bootstrap'
    }
  -
    var rightNav = [
      {
        name: 'Overview',
        id: '#overview',
      },
      {
        name: 'Responsive',
        id: '#responsive',
      },
    ]

block component
  .mb-9
    +ComponentCard({
      title: 'Overview',
      description: `These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the 
      <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float">CSS <code>float</code> property</a>. <code>!important</code> is included to avoid specificity issues. These use the same viewport breakpoints as our grid system. Please be aware float utilities have no effect on flex items.`,
      anchor:true,
      descriptionClass:'mt-2'
    }).my-5
      +FloatDemo

    +ComponentCard({
      title: 'Responsive',
      description: 'Responsive variations also exist for each <code>float</code> value',
      anchor:true,
      descriptionClass:'mt-2'
    }).my-5
      +FloatResponsiveDemo