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

append variables
  
  -
    var pageHeader = {
      title: 'Display',
      description: 'Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.',
      url: `https://getbootstrap.com/docs/${bootstrapVersion}/utilities/display/`,
      linkText: 'Display on Bootstrap'
    }

append content
  +PageHeader(pageHeader)

  .card.mb-3
    .card-header
      +DocCardHeader('Notation')
    .card-body.bg-body-tertiary
      +DisplayProperty
  +ComponentCard({
    title: 'Example',
    anchor:true
  }).mb-3
    +DisplayBasicExample

  .card.mb-3
    .card-header
      +DocCardHeader('Hiding Elements')
    .card-body.bg-body-tertiary
      +DisplayInHide

  +ComponentCard({
    title: 'Display in Prints',
    description: "Change the <code>display </code>value of elements when printing with our print display utility classes. Includes support for the same <code>display </code>values as our responsive <code>.d-* utilities. </code><ul class='mt-3'><li><code>.d-print-none</code></li><li><code>.d-print-inline</code></li><li><code>.d-print-inline-block</code></li><li><code>.d-print-block</code></li><li><code>.d-print-table</code></li><li><code>.d-print-table-row</code></li><li><code>.d-print-table-cell</code></li><li><code>.d-print-flex</code></li><li><code>.d-print-inline-flex</code></li></ul><p class='mt-3 mb-0'>The print and display classes can be combined.",
    anchor:true,
    descriptionClass:'mt-2'
  })
    +DisplayPrintDemo