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

append variables
  
  
  -
    var pageHeader = {
      title: 'Vertical Align',
      description: 'Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.',
      url: `https://getbootstrap.com/docs/${bootstrapVersion}/utilities/vertical-align/`,
      linkText: 'Vertical align on Bootstrap'
    }
append content

  +PageHeader(pageHeader)


  +ComponentCard({
    title: 'Example',
    anchor: true,
    description: `Change the alignment of elements with the vertical-alignment utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.
    <br> Choose from <code>.align-baseline,</code> <code>.align-top,</code> <code>.align-middle,</code> <code>.align-bottom,</code> <code>.align-text-bottom,</code> and <code>.align-text-top</code> as needed.
    <br>Multiple links and tap targets are not recommended with stretched links. However, some <code>position </code>and <code>z-index </code>styles can help should this be required.`,
    descriptionClass:'mt-2',
  }).mb-3
    +VerticalAlignExampleDemo

  +ComponentCard({
    title: 'Vertical Alignment With Table Cells',
    anchor:true
  })
    +VerticalAlignExampleTable