extends ../../layouts/LayoutComponent
include ../../mixins/components/CloseButton
include ../../mixins/components/Alerts
include ../../mixins/components/Modals

append variables
  
  -
    var pageHeader = {
      title: 'Close button',
      description: "A generic close button for dismissing content like modals and alerts.",
      url: `https://getbootstrap.com/docs/${bootstrapVersion}/components/close-button/`,
      linkText: 'Close Button on Bootstrap'
    }

block component
  +PageHeader(pageHeader)

  .row.g-3
    .col-6
      .card
        .card-header
          +DocCardHeader('Close button')
              +CloseButtonExampleDescription.mt-2.mb-0

        .card-body.bg-body-tertiary
          +ComponentCard
            .rounded-1.p-3
              +CloseButtonExample
    .col-6
      .card
        .card-header
          +DocCardHeader('Close button white variant')
            +CloseButtonWhiteVarientDescription.mt-2.mb-0
        .card-body.bg-body-tertiary
          +ComponentCard
            .bg-1000.rounded-1.p-3(data-bs-theme="light")
              +CloseButtonWhiteVariant